在IE上顯示的畫布，但未顯示chrome和firefox

Question

我想使用畫布使圖像變為灰度。 有很多例子。 但是我最新的Chrome和Firefox出現了問題。 令人驚訝的是，IE9很好。 這是我的代碼問題嗎？

這是我的代碼：

function draw() {
canvas = document.getElementById('canvas')
ctx = canvas.getContext('2d');
image = new Image();
image.src = 'ichiro.jpg';
ctx.drawImage(image, 0, 0);
imgd = ctx.getImageData(0, 0, 480, 400);
for (i=0; i<imgd.data.length; i+=4) {
    grays = imgd.data[i]*.3 + imgd.data[i+1]*.6 + imgd.data[i+2]*.1;
    imgd.data[i  ] = grays;   // red
    imgd.data[i+1] = grays;   // green
    imgd.data[i+2] = grays;   // blue
}
ctx.putImageData(imgd, 0, 0);

imggray = new Image();
imggray.src = canvas.toDataURL();
imggray.onload = function() {
    ctx.drawImage(imggray, 0, 0);
}

}

我是HTML5和javascript的新手。 因此，任何幫助將不勝感激。

Answer 1

編輯：

抱歉，我看不懂你的問題。 幾乎可以肯定是由於安全錯誤。 如果您已將來自不同“來源”（不同域或本地文件系統）的圖像繪制到畫布上，則不允許使用getImageData 。 在本地Chrome中，您可以執行以下操作：

C:\\Users\\root\\AppData\\Local\\Google\\Chrome\\Application\\chrome.exe --allow-file-access-from-files

有一個叫做origin-clean的標記，當您從其他來源繪制drawImage時，它將被刪除。 出於（良好）安全原因，所有文件的來源均不同。

---

原始答案：

您需要等待圖像加載：

工作示例： http : //jsfiddle.net/SYLW2/1107/

...
// this now happens only after the image is loaded:
image.onload = function() {
ctx.drawImage(image, 0, 0);
imgd = ctx.getImageData(0, 0, 480, 400);
for (i=0; i<imgd.data.length; i+=4) {
    grays = imgd.data[i]*.3 + imgd.data[i+1]*.6 + imgd.data[i+2]*.1;
    imgd.data[i  ] = grays;   // red
    imgd.data[i+1] = grays;   // green
    imgd.data[i+2] = grays;   // blue
}
ctx.putImageData(imgd, 0, 0);

imggray = new Image();
imggray.src = canvas.toDataURL();
imggray.onload = function() {
    ctx.drawImage(imggray, 0, 0);
}
}
image.src = 'http://placekitten.com/400/400';