JSFiddle - React, Tailwind, and code Playground

HTML

File input - select image
<input id="file-input" type="file" />
<div class="results">

</div>

JavaScript

var response = `self.addEventListener('message', async ev => {
    const {id,file} = ev.data;
    console.log('received data', file);
    let image = await self.createImageBitmap(file);
    console.log(image);
    self.postMessage({width: image.width, height: image.height});
});`;

const blob = new Blob([response], {type: 'application/javascript'});
const worker = new Worker(URL.createObjectURL(blob));
document.addEventListener('DOMContentLoaded', () => {
  const input = document.querySelector('#file-input');
  input.addEventListener('change', (e) => {
    worker.postMessage({file: input.files[0], id: 1})
  });
});

worker.addEventListener('message', (ev) => {
  const size = ev.data;
  document.querySelector('.results').innerHTML = `Image width: ${size.width}, Image height: ${size.height}`;
});