javascript - 不能使用 Canvas 方法 putImageData

Question

我有以下代码:

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);

我在第一个 Canvas 元素上获取图像，当我在控制台中检查时，有 imageData，具有宽度、长度和像素数组，但不知何故我无法在另一个 Canvas 元素上获取该图像。我不认为有拼写错误，我多次重写相同的代码，最后我将它剥离到没有像素操作的最小版本，但它仍然无法正常工作。

Answer 1

您的代码未在 onload 回调中调用，它在加载图像之前执行，因此无需放置任何内容。

你可以把它改成

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';