1

私は次のコードを持っています:

var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
ctx.drawImage(img,0,0);
};
img.src = 'mwq.gif';
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx2.putImageData(imageData, 0, 0);

最初のキャンバス要素で画像を取得します。コンソールをチェックインすると、幅、長さ、ピクセル配列を持つimageDataがありますが、どういうわけか別のキャンバス要素でその画像を取得できません。タイプミスはないと思います。同じコードを数回書き直しました。最後に、ピクセル操作なしで最小限のバージョンにしましたが、まだ機能していません。

4

1 に答える 1

2

Your code isn't called in the onload callback, it's executed before the image is loaded so there is nothing to put.

You could change it to

var img = new Image();
canvas = document.getElementById("c");
ctx = canvas.getContext('2d')
canvas2 = document.getElementById("c2");
ctx2 = canvas2.getContext('2d')
img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img,0,0);
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    ctx2.putImageData(imageData, 0, 0);
};
img.src = 'mwq.gif';
于 2012-08-24T10:47:07.680 に答える