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标志的东西，一旦你从不同的原点绘制图像就会删除它。出于（良好）安全原因，所有文件都有不同的来源。

原始答案：

您需要等待图片加载：

工作示例：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';

IE上显示的画布，但不是chrome和firefox

1 个答案: