Javascript 我怎么知道HTML5画布何时完成绘制？

我是javascript的初学者。 在将图像上传到服务器进行存储之前，我正在尝试调整客户端图像的大小 我找到了一种使用HTML5画布的方法：

我的问题：它一直在上传空白图像。我认为空白图像的原因是，当我从画布上抓取图像时，画布没有画出来。 当我在从画布抓取图像之前设置3秒windows.timeout时，一切正常。 有没有比超时更可靠的方法？或者是否有其他方法来调整客户端图像的大小

我之所以要进行客户端图像大小调整，是因为我要处理的是那些上传不必要的大文件的人，我认为进行客户端图像大小调整是最有效的

感谢您提供的任何提示/答案

//调整图像大小
Resizeimage.resize（文件）；
//***如果我用timeout包装这个部分，它就可以工作了
var canvas=document.getElementById（'canvas'）；
var data=canvas.toDataURL（file.type）；
//将base64/URLEncoded数据组件转换为字符串中的原始二进制数据
var-bytestring；
if（data.split（'，'）[0].indexOf（'base64'）>=0）
bytestring=atob（data.split（'，）[1]）；
其他的
bytestring=escape（data.split（'，'）[1]）；
//获取图像类型
var mimeString=data.split（'，'）[0]。split（'：'）[1]。split（'；'）[0]；
//将字符串的字节写入类型化数组
var ia=新的Uint8Array（bytestring.length）；
for（var i=0；i

window.onload=函数（）{
//在这里完成加载后，您想做什么
}

只有在没有脚本标记的情况下，才可以将这段代码放在HTML中或JavaScript文件中的某个地方；）

---

希望这对你有用：你的问题很简单

只要不附加任何事件，JavaScript就会一个接一个地运行语句（您需要这样做，因为您希望在抓取图像时执行所有语句）

如果将代码附加到事件（例如，

image.onload

），这部分代码将等待事件，其余代码将继续异步

因此，你是对的-当你试图抓住这个图像时，图像没有被绘制出来

通过超时解决它是一种糟糕的方式（效率最低/最不安全），最好将图像捕获代码包装到一个函数中，并在图像重新调整大小后运行此函数。它类似于用于同步异步事件的回调

示例

/*setTimeout的行为将类似于事件*/
设置超时(
函数（）{
$（'console'）.append（“SetTimeout”）；
SynchCodeAfterTimeout（）；
}, 1000);
AsynchCodeAfterTimeout（）；
函数AsynchCodeAfterTimeout（）{
$（'console'）.append（“AsynchCodeAfterTimeout”）；
}
函数SynchCodeAfterTimeout（）{
$（'console'）.append（“SynchCodeAfterTimeout”）；
}

控制台{
字体系列：Consoleas、摩纳哥、monospace；
}

---

我遇到了一个问题，画布到图像总是空白的

然后我推迟了，现在一切正常

setTimeout(function () {
    var da = document.getElementById("canvasFabric").toDataURL("png", "1");
    $('#FInalImage').attr("src", canvasFabric.toDataURL("png", "1"));
    window.open(da);
}, 100);

---

很好的解释，但如果你也能发布一些代码，那就太好了great@Breakpoint谢谢，我已经插入了我的代码。顺便说一句，我正在尝试使用MeanJS。因此，我的代码是客户端的angularJS，所以我在正确的方向上使绘图同步。很抱歉问这个问题，但我如何使它同步？我在谷歌上看到，我可以通过触发事件或使用延迟对象来实现这一点。但它们不需要检查画布何时准备就绪吗？正如我在回答中所指出的，将所有图像捕获代码封装在一个函数中，该函数可以从重新调整大小代码的最后一部分访问，并像我调用的

SynchCodeAfterTimeout（）

那样调用它，您应该在

函数渲染（src）

中的

.onload

末尾调用代码，非常感谢您的详细解释和示例！你是最棒的！所以画布实际上是阻塞的。。但是onload使得整个代码块都是异步的。。。现在它更有意义了：）老兄，你帮了我这么多！如果目标是绘制图像并向画布添加文本，并且要写入的数据来自api，那么这将不起作用。我也有同样的问题。根本原因是什么？理论上，所有画布绘制都应该同步完成，因此

settimout

应该没有什么区别。@levi不知道，但我不认为这是一个解决方案。在我的例子中，这似乎是由

React

渲染整个视图（包括画布）引起的。

setTimeout(function () {
    var da = document.getElementById("canvasFabric").toDataURL("png", "1");
    $('#FInalImage').attr("src", canvasFabric.toDataURL("png", "1"));
    window.open(da);
}, 100);