HTML5 Canvas: Инверсия цвета пикселей

Question

Я следующий учебник по WC3 здесь: http://www.w3schools.com/tags/canvas_getimagedata.asp

У меня есть изображение, загруженное и рядом это полотно, которое у меня есть хороший постояльца, и я намерен отображать бок о бок изображения. Я пытаюсь инвертировать цвет пикселя в качестве демонстрации, но я не могу заставить цвета меняться. Я не понимаю, почему.

Вот мой код ручки, где я отделил HTML от JS: http://codepen.io/kKasper/pen/zBXWOZ

document.getElementById("team").onload = function() { 
var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=document.getElementById("team"); 
    ctx.drawImage(img, 0, 0); 
    var imgData = ctx.getImageData(0, 0, c.width, c.height); 
    // invert colors 
    var i; 
    for (i = 0; i < imgData.data.length; i += 4) { 
     imgData.data[i] = 255 - imgData.data[i]; 
     imgData.data[i+1] = 255 - imgData.data[i+1]; 
     imgData.data[i+2] = 255 - imgData.data[i+2]; 
     imgData.data[i+3] = 255; 
    } 
    ctx.putImageData(imgData, 0, 0); 
}; 

Вероятно, ctx.drawImage (IMG, 0, 0); рисует мое изображение внутри холста. По какой-то причине функция, которая работает в учебнике WC3, не работает должным образом на моем изображении, потому что когда она рисует изображение после функции, изменений нет.

Может ли кто-нибудь помочь мне решить это, пожалуйста?

Answer 1

Попробуйте открыть консоль разработчика на своем кодедеене. Я получаю эту ошибку:

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

Это означает, что вы нарисовали изображение из другого домена (т.е. не codepen.io) на холсте. В качестве функции безопасности для предотвращения взаимодействия вредоносных сценариев с внешними доменами браузеры запретят JS получать доступ к таким данным. См. Статью MDN на странице same-origin policy.

Попробуйте использовать код из локального файла или использовать изображение с того же домена, что и страница. Держу пари, что это сработает.

Консоль разработчика - ваш друг!

Answer 2

Вы можете использовать композицию для инвертирования изображения, если ваш браузер поддерживает смешивание.

Преимущества:

• Это быстрее, чем getImageData
• Полотно не приемлю с ограничениями безопасности кросс происхождения

ctx.drawImage(img,0,0); 
ctx.globalCompositeOperation='difference'; 
ctx.fillStyle='white'; 
ctx.fillRect(0,0,canvas.width,canvas.height);