javascript - Canvas 到数据 url 无法正常工作

Question

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

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

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