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

Question

我试图通过将 base64 图像数据作为 src 分配给图像对象来在 Canvas 上绘制复选框图像。它在 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';