Javascript 画布到数据url工作不正常

我有一个函数，它接受一个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';
});

---

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

在使用

.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];
}

var image_sources=[“img1.png”、“img2.png”和“…”；
对于（var i=0；我希望这就是问题所在，但我已经在这么做了。总是使用加载的图像调用imgToDataURL。@user2073343您能制作一个JSFIDLE来演示这个问题吗？您使用的代码没有问题posted@user2073343不，
imgToDataURL
在您的示例中没有被调用。显然，您遇到了一个专业问题问题，但如果您没有提供调用
imgToDataURL
的上下文，那么您的示例是不完整的。@user2073343这是正确的答案。更新的代码非常清楚地显示
imgToDataURL（img）
在
onload
事件外被调用。请注意，在分配
onload
事件后进行调用与实际等待加载并不相同。您必须将其放入
onload
事件内。在加载图像的第一个onload事件内，我要将其转换为数据l、 请注意，出于安全原因，canvas源映像必须与提供服务的页面位于同一个域中。因此，如果您的img.src是其他域，并且您将该其他域映像写入canvas，则canvas.toDataURL将失败。我已经设置了此设置，以便可以使用CORS从相关域读取映像。只是好奇……您为什么要运行通过canvas创建img？难道不能创建一个带有.src=''的html img元素吗？您的img.crossOrigin应该是img.crossOrigin=“匿名”它将与一些图像处理一起使用，其中图像可能会被处理，然后其结果可能会再次被处理。因此，第一眼就可以方便地将它们转换为数据URL。我没有收到任何安全错误。这是我最后一个头痛的问题。