холст показывается в 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

EDIT:

Извините, я неправильно понял ваш вопрос. Это почти наверняка из-за ошибки безопасности. Вам не разрешено использовать getImageData, если вы нарисовали на холсте изображение другого «происхождения» (другого домена или локальной файловой системы). В Chrome локально вы можете обойти это, если вы делаете:

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

Есть нечто, называемое флагом очистки источника, и оно удаляется, когда вы рисуете изображение из другого источника. Все файлы имеют разное происхождение по (хорошим) причинам безопасности.

---

Оригинальный ответ:

Вам нужно дождаться загрузки изображения:

рабочий пример: 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';