3

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

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

4

1 回答 1

3

在使用函数绘制它们之前，您必须等待图像加载。.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];
}
于 2013-09-16T14:14:42.243 回答