javascript - CanvasRenderingContext2D.drawImage() 是否异步运行？

Question

我应该注册一个回调来处理 Canvas blob 对象还是 CanvasRenderingContext2D.drawImage() 阻止 javascript 执行直到 drawImage() 完成？

Answer 1

是的 CanvasRenderingContext2D.drawImage 确实同步运行，但可能不是您想要的方式...

如果提供的 sourceImage 尚未完成获取其资源(在 HTMLImageElement 或 SVGImageElement 的情况下)，则它不会等待。

var img = new Image();
img.src = "https://slowserv.er/bigImage.png";
ctx.drawImage(img, x, y); // here it won't wait for the image to be fetched

但是如果图像已经被完全获取，并且它的元数据已经被解析但是图像数据还没有被解码，那么drawImage将等待它被解码。您可以通过运行 this Answer 来查看演示来自 Firefox。_{这种行为似乎只能在 Firefox 中捕捉到，因为 Chrome 实际上会在触发 onload 事件之前等待图像被解码。}

所以回答你的问题，如果 sourceImage 处于加载状态(例如 img.naturalWidth !== 0 为 <img> )，那么是的，你可以确定 drawImage 将在下一行代码之前执行。

if(img.naturalWidth !==0) { // here we are sure our image is loaded
  ctx.drawImage(img, x, y); // and here we are sure it has been drawn on the canvas
  // even though toBlob is itself async
  // this will pick the canvas has it is now
  ctx.canvas.toBlob(onblobgenerated, options);
}