I want some clientside image compression using a webworker. My code is already working on my local machine (FF, Chrome, Safari).

Its e2e-tested with playwright 1.44.0. Running the tests locally succeeds but running the tests inside github actions the webkit part fails.

I think its because of webkit only partial supports createImageBitmap. However, the referenced bug report does not really help me at all.

Can you tell me how i can change my code to work on safari aswell or make my pipeline happy?

// worker.ts
onmessage = async (msg: MessageEvent<File>) => {
  const img: File = msg.data

  // this is not working on safari
  const imageBitmap = await createImageBitmap(img) 

  const offscreenCanvas = new OffscreenCanvas(imageBitmap.width / 2, imageBitmap.height / 2)
  const ctx = offscreenCanvas.getContext('2d')
  if (ctx == null) return

  // Draw the ImageBitmap onto the OffscreenCanvas, resizing it
  ctx.drawImage(imageBitmap, 0, 0, offscreenCanvas.width, offscreenCanvas.height)
  const blob = await offscreenCanvas.convertToBlob()
  const resizedImg = new File([blob], img.name, { type: img.type })

  postMessage(resizedImg)
}

//compress.ts
async function compressImages(images: FileList): Promise<File[]> {
  const files: File[] = []
  if (window.Worker) {
    const myWorker = new Worker(new URL('./worker.ts', import.meta.url))

    for (const image of images) {
      myWorker.postMessage(image)
      console.log('Message posted to worker')

      await new Promise<void>((resolve) => {
        myWorker.onmessage = (e: MessageEvent<File>) => {
          console.log('Message received from worker', e.data)
          files.push(e.data)
          resolve()
        }
      })
    }
  } else {
    console.log("Your browser doesn't support web workers.")
  }

  return files
}

export { compressImages }