在web-worker中将图像位图/图像绘制为OffScreenCanvas

Question

我有一个vue.js应用程序，我在其中设置了vue-workers/web-workers，以便在用户上传几张图像后在后台执行一些图像处理(缩放/裁剪)。

我决定使用ImageBitMpas & OffScreenCanvas，因为在web workers中不支持画布和图像对象。我可以使用CreateImageBitMap()方法从我的图像文件创建ImageBitMap。它成功地返回了promise，然后解析为ImageBitMap。我可以将其打印到我的控制台，并看到ImageBitMap已创建！我添加了一张打印到下面控制台的ImageBitmap的图片。

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; 

问:我遇到问题的地方是，当我将这个ImageBitMap传递给OffScreenCanvas.draw()方法时，我得到一个错误，说“无法在OffscreenCanvasRenderer上执行drawImage ...”在下图中打印ImageBitMap后，您可以在控制台中看到确切的错误。

是否有人成功地将图像绘制到vue-worker/web-worker中的OffScreenCanvas？任何可以工作的代码的例子都会非常感谢！

另外，根据我的研究，似乎只有Chrome才支持createImageBitMap()？！有没有其他方法代替使用ImageBitMap来绘制到OffScreenCanvas，可以在chrome和Safari上工作？

Answer 1

你试过使用ImageBitmapRenderingContext吗？

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