在web worker中绘制ImageBitMap/Image到OffScreenCanvas

Question

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

我决定选择ImageBitMpas&OffScreenCanvas，因为web工作人员不支持Canvas和Image Object。我可以使用CreateImageBitMap((方法从我的图像文件创建一个ImageBitMap。它成功地返回了一个promise，然后解析为ImageBitMap。我可以把它打印到我的控制台上，然后看到ImageBitMap被创建！我在下面的控制台中添加了一张ImageBitmap打印的图片。

创建ImageBitmap并抛出错误

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((方法时，我收到一个错误，说"无法在OffsetcreenCavas Renderer上执行drawImage…"在下面的图片中打印ImageBitMap后，您可以在控制台中看到确切的错误。

是否有人在vue worker/web worker中成功地将图像绘制到OffScreenCanvas？任何工作代码示例都将不胜感激！

同样从我的研究来看，createImageBitMap((似乎只在Chrome中受支持？！除了使用ImageBitMap绘制到OffScreenCanvas之外，还有其他方法可以在chrome和Safari上工作吗？？？

Answer 1

您尝试过使用ImageBitmapRenderingContext吗？

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

Answer 2

在本例中，由于Promise.all，结果类型为array，但不支持将其作为图像源。删除Promise.all并直接使用已解决的结果可以解决问题。

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"; 

此打印，无错误(在Chrome中(：

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