在 web-worker 中将 ImageBitMap/Image 绘制到 OffScreenCanvas

Question

I have a vue.js application where I set up vue-workers/web-workers to perform some image processing(scaling/cropping) in the background after a user uploads a couple images.

I decided to go with ImageBitMpas & OffScreenCanvas since Canvas and Image Object is not supported in web workers. I can create an ImageBitMap from my image file using CreateImageBitMap() method. It successfully returns a promise and then resolves to an ImageBitMap. I can print it to my console and see the ImageBitMap gets created. I added a picture of the ImageBitmap printed to the console below.

ImageBitmap is created and error is thrown

var loadingImage = new Image();
loadingImage.onload = () => {

    console.log(createImageBitmap(loadingImage)); // I can see the ImageBitmap logged to console
    const canvas = new OffscreenCanvas(100,100);
    const ctx = canvas.getContext('2d');

    Promise.all([
        createImageBitmaps(loadingImage);
    ]).then(function(result){
        console.log("printing promise resolved");
        console.log(result);
        ctx.drawImage(result,0,0,200,200);  /// <-- this is where error is thrown
    })  

    // other code here .... 

};
loadingImage.src = base64Src; 

Question: Where I am having trouble is when I pass this ImageBitMap to the OffScreenCanvas.draw() method I get an error saying "failed to execute drawImage on OffscreenCanvasRenderer..." You can see the exact error in the console after the ImageBitMap is printed in the picture below.

Has anyone successfully drawn an image to an OffScreenCanvas in a vue-worker/web-worker? Any Example of working code would be greatly appreciated!

Also from my research, it seems like createImageBitMap() is only supported in Chrome?? Is there another way instead of using ImageBitMap to draw to OffScreenCanvas that will work on both chrome and Safari???

Answer 1

您是否尝试过使用ImageBitmapRenderingContext ？

canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);

Answer 2

In the example the type of result is an array , because of Promise.all but that's not supported as image source. Removing Promise.all and directly using the resolved result solves the problem.

var loadingImage = new Image();
loadingImage.onload = () => {

    console.log(createImageBitmap(loadingImage)); // I can see the ImageBitmap logged to console
    const canvas = new OffscreenCanvas(100,100);
    const ctx = canvas.getContext('2d');
    
    createImageBitmap(loadingImage).then(function(result){
        console.log("printing promise resolved");
        console.log(result);
        ctx.drawImage(result,0,0,200,200);  /// <-- this is where error is thrown
    })  

    // other code here .... 

};
loadingImage.src = "https://i.stack.imgur.com/ioGgw.png"; 

This prints, no error (in Chrome):

[object Promise] { ... }
"printing promise resolved"
[object ImageBitmap] {
  close: function close() { [native code] },
  height: 402,
  width: 812
}