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将等待对其进行解码。您可以通过从Firefox运行this Answer来查看其演示。 _{这种行为似乎只能在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);
}

CanvasRenderingContext2D.drawImage（）是否异步运行？

1 个答案: