Canvas图像裁剪器 - canvas.toDataURL异步执行此操作会返回任何类型的承诺 [英] Canvas image cropper - canvas.toDataURL is acting asynchronously does this return any kind of promise

问题描述

如果我使用结果在'toDataURL'和画布绘制之间发出警报，那么一切都按预期进行。

If I put an alert between 'toDataURL' and a canvas draw using the result then everything proceeds as expected.

toDataURL是否在画布上触发事件或应该我使用某种'onLoad'作为我设置的图像src？

Does toDataURL fire an event on the canvas or should I use some kind of 'onLoad' for the image src I am setting it to?

IE img.addEventListener（'load'，function（）{...}

IE img.addEventListener('load',function(){...}

推荐答案

.toDataURL 是一种不会触发任何事件的同步操作。

.toDataURL is a synchronous operation that does not trigger any events.

同步，它是一个阻塞操作，所以不需要 alert 来防止在toDataURL之前执行下一个命令完全完成。当toDataURL完全完成时，下一个命令将执行。

Being synchronous, it's a blocking operation so no alert is required to prevent the next command from executing before toDataURL is fully complete. The next command will execute when toDataURL is fully complete.

由于你使用dataURL作为图像源，你需要给那个图像时间通过分配回调加载：

Since you're using the dataURL as an image source, you will want to give that image time to load by assigning a callback:

var img=new Image();
img.onload=function(){
    ctx.drawImage(img,0,0);
}
img.src=canvas.toDataURL();

这篇关于Canvas图像裁剪器 - canvas.toDataURL异步执行此操作会返回任何类型的承诺的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！