[英]Drawing ImageBitMap/Image to OffScreenCanvas in a web-worker
我有一个 vue.js 应用程序,我在其中设置了 vue-workers/web-workers 以在用户上传几张图像后在后台执行一些图像处理(缩放/裁剪)。
I decided to go with ImageBitMpas & OffScreenCanvas since Canvas and Image Object is not supported in web workers. 我可以使用 CreateImageBitMap() 方法从我的图像文件创建一个 ImageBitMap。 它成功返回 promise,然后解析为 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() 方法时,我收到一条错误消息“无法在 OffscreenCanvasRenderer 上执行 drawImage ...”您可以在 ImageBitMap 之后在控制台中看到确切的错误打印在下面的图片中。
有没有人成功地将图像绘制到 vue-worker/web-worker 中的 OffScreenCanvas? 任何工作代码示例将不胜感激!
同样根据我的研究,似乎只有 Chrome 支持 createImageBitMap() ? 除了使用 ImageBitMap 绘制到 OffScreenCanvas 之外,还有其他方法可以在 chrome 和 Safari 上工作吗?
您是否尝试过使用ImageBitmapRenderingContext
?
canvas.getContext('bitmaprenderer').transferFromImageBitmap(bitmap);
在示例中,结果的类型是array
,因为Promise.all
但不支持作为图像源。 删除 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
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.