Javascript 将base64图像数据作为src分配给图像时，Firefox和Chrome上的结果不一致

我试图通过将base64图像数据作为src分配给图像对象，在画布上绘制复选框图像。它在IE上运行良好，但在Firefox和Chrome上的结果不一致 这是我的密码

    img = document.createElement('img');
    img.src = 'data:image/gif;base64,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';
    ctx.drawImage(
        img,
        sx, 
        sy, 
        sw, 
        sh, 
        dx, 
        dy, 
        dw, 
        dh      
        );

如果我在将src分配给image之后发出警告，那么它甚至可以与FF和chrome一起工作。我猜这都是因为javascript异步行为，在将完整src分配给image之前，绘图过程会发生，因此无法获得完整的image。

---

谁能告诉我如何处理这个问题。

在绘制图像之前，请尝试等待图像加载事件。并确保在分配src属性之前添加处理程序

 img = document.createElement('img');
 img.onload = function() {
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 };
 img.src = 'data:image/gif;base64,R0lGO...OFYDEWHDswIAA7';

还可以尝试这种方法（在大多数浏览器中，结果应该完全相同，但一些较旧的浏览器确实存在一种或另一种方法的问题）：

如果这在Firefox和Chrome上仍然不起作用，您可以尝试将图像添加到DOM中，看看这是否有什么不同：

 img = document.createElement('img');
 document.body.appendChild(img);
 img.onload = function() {
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 };
 img.src = 'data:image/gif;base64,R0lGO...OFYDEWHDswIAA7';

---

我仍在努力解决此问题，您的建议解决了我在canvas.todataURL（）中遇到的一个问题。我已尝试了上面建议的所有三个选项，但仍然无法使其在画布上绘制，如果我在为src分配相同代码后放置警报，则可以使用超时为0的setTimeout。这将等待当前代码执行完成setTimeout（function（）{//Set img.src}，0）；

 img = document.createElement('img');
 document.body.appendChild(img);
 img.onload = function() {
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 };
 img.src = 'data:image/gif;base64,R0lGO...OFYDEWHDswIAA7';