HTML5 пиксель манипулирование не работает

Question

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

<script type="text/javascript">
<!--
window.addEventListener('load', function () {
  var elem = document.getElementById('myCanvas');
  var context = elem.getContext('2d');
  var img = new Image();

  img.addEventListener('load', function () {
      var x = 0, y = 0;

      context.drawImage(this, x, y);

      var imgd = context.getImageData(x, y, this.width, this.height);
      var pix = imgd.data;

      for (var i = 0, n = pix.length; i < n; i += 4) {
        pix[i  ] = 255 - pix[i  ]; // red
        pix[i+1] = 255 - pix[i+1]; // green
        pix[i+2] = 255 - pix[i+2]; // blue
      }

      context.putImageData(imgd, x, y);
  }, false);

  img.src = 'test.jpg';
}, false);
// -->
</script>

И «Test.jpg» находится в той же папке, что и скрипт. Я что-то пропустил? Отображает одно и то же изображение без инвертирования.

Answer 1

ответ на ваш вопрос правильный здесь

Протестировано на Chrome, и похоже, что это файл: // схема, которая его нарушает.Когда я переместил скрипт на свой локальный сервер (http://) вместо запуска файла (file: //), он работал!

Proof:

Answer 2

Я только что попробовал этот пример, и мне показалось, что он работает нормально. Я получил негатив / перевернутое изображение. Использование Firefox 10.0.2