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

Question

我正在尝试通过将 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 分配给图像之后发出警报，那么它甚至可以与 FF 和 chrome 一起使用。我猜这完全是因为 javascript 异步行为，在将完整的 src 分配给图像之前，绘图过程发生，因此没有获得完整的图像。 谁能告诉我如何处理这个问题。

Answer 1

尝试在绘制图像之前等待图像 onLoad 事件。并确保在分配 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';

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

 var img = new Image();
 img.onload = function() { 
    ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh);
 }
 img.src = "data:img/gifx;base64....";

如果这在 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';