3

img 要素を受け取り、データ URL を返す関数があります。これは 7/10 回のように機能し、3/10 回空白の画像を返します。作成したデータの URL をブラウザ (chrome) で表示し、同じ画像を使用しているので、この関数が壊れた画像を返していることがわかります。誰でも理由を見つけることができますか?

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 に答える