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

canvas shown on IE but not chrome and firefox

本文关键字：chrome firefox IE 布显示 显示      更新时间：2023-09-26

我想使用画布将图像设置为灰度。有很多这样的例子。但它在我最新的Chrome和火狐浏览器上有问题。令人惊讶的是，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的新手。因此，任何帮助都将不胜感激。

EDIT:

对不起，我误解了你的问题。几乎可以肯定，这是由于安全错误。如果您在画布上绘制了来自不同"原点"(不同的域或本地文件系统)的图像，则不允许使用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';
相关文章：