数据 url 的画布无法正常工作答案

【问题标题】：Canvas to data url not working properly数据 url 的画布无法正常工作
【发布时间】：2013-09-16 14:02:23
【问题描述】：

我有一个函数，它接受一个 img 元素并返回一个数据 url。这相当于 7/10 次，并返回 3/10 次空白图像。我通过浏览器（chrome）查看创建的数据 url 并使用相同的图像，所以我知道这个函数正在返回损坏的图像。任何人都可以找出原因吗？

function imgToDataURL(img) {
    var canvas = document.createElement('canvas');
    canvas.width = img.naturalWidth;
    canvas.height = img.naturalHeight;
    var c = canvas.getContext('2d');
    c.drawImage(img, 0, 0);
    dataurl = canvas.toDataURL();
    return dataurl;
}

$(function() {
    img = new Image();
    img.crossOrigin = '';
    img.onload = function() {
        newimg = new Image();
        newimg.onload = function() {
            document.body.appendChild(newimg);
        }
        newimg.src = imgToDataURL(img);
    }
    img.src = 'https://somedomain.s3.amazonaws.com/someimg.png';
});

这个例子大部分时间都有效，但有时会以一个大的白色矩形而不是图像结束。

【问题讨论】：

请注意，出于安全原因，画布源图像必须托管在与其提供服务的页面相同的域中。因此，如果您的 img.src 是其他域并且您将该其他域图像写入画布，那么 canvas.toDataURL 将失败。
我已经设置好了，所以我可以使用 CORS 从相关域中读取图像。
只是好奇...你为什么要通过画布运行 img？难道你不能用 .src='somedomain.s3.amazonaws.com/someimg.png' 创建一个 html img-element
你的 img.crossOrigin 应该是 img.crossOrigin="anonymous"
它与一些图像处理一起使用，其中图像可能会被处理，然后可能会再次处理其结果。所以第一眼把它们变成数据url很方便。我没有收到任何安全错误。那是我最后一次头痛。

标签： javascript html canvas data-url

【解决方案1】：

您必须使用.drawImage 函数在绘制图像之前等待图像加载。只有在浏览器加载图像后，您才能调用您的imgToDataURL 函数。

类似这样的：

var image_sources = ["img1.png", "img2.png", "..."];

for(var i=0; i<image_sources.length; i++) {
    var new_img = document.createElement("img");
    new_img.onload = function() {
       imgToDataURL(this);
    };
    new_img.src = image_sources[i];
}

【讨论】：

我希望这是问题，但我已经在这样做了。总是使用加载的图像调用 imgToDataURL。
@user2073343 你能做一个 jsfiddle 来演示这个问题吗？您发布的代码没有任何问题
@user2073343 不，imgToDataURL 在您的示例中的任何地方都没有调用。显然您遇到了问题，但如果您不提供调用 imgToDataURL 的上下文，那么您的示例不完整。
@user2073343 这是正确答案。更新后的代码非常清楚地显示imgToDataURL(img) 在onload 事件之外被调用。请注意，在分配onload 事件后进行调用与实际等待它加载不相同。你必须把它放在onload 事件中。
在我加载图像的第一个 onload 事件中，我想将其转换为数据 url。