不能使用画布方法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); 

和我得到第一画布元件上的图像，当我在控制台检查有的imageData，具有宽度，lenght和像素阵列，但不知何故我无法在另一个画布元素上获得该图像。我不认为有错别字，我重写了几次相同的代码，最后我将它剥离到最小版本，没有像素操作，但它仍然不起作用。

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