反转颜色 HTML5 画布教程答案

【问题标题】：Inverting colours HTML5 canvas tutorial反转颜色 HTML5 画布教程
【发布时间】：2014-06-05 19:14:57
【问题描述】：

所以这个网站http://www.html5canvastutorials.com/advanced/html5-canvas-invert-image-colors-tutorial/ 有一个反转颜色的教程。我一直在尝试做类似的事情，但它不起作用，尽管我没有错误。我也在本地服务器上运行它，因为我最初遇到了阻止它正常运行的安全错误，现在 Chrome 运行代码没有问题。我只是在屏幕上看不到任何变化。我决定将他们的代码转移到 JSFiddle 中只是为了查看它的工作情况，然后通过更改值来学习，但是当我点击运行时，darth vader 图像并没有反转。这是否意味着他们的示例代码缺少某些内容，并且可以解释为什么我没有看到我正在处理的任何变化？

感谢您的帮助。

根据要求http://jsfiddle.net/user69247/fMwp5/1/

（对不起，因为我有 jsfiddle 链接，所以也希望发布代码）

<html>
  <head>
   <style>
     body {
     margin: 0px;
     padding: 0px;
  }
</style>
 </head>
 <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
    <script>
      function drawImage(imageObj) {
    var canvas = document.getElementById('myCanvas');
    var context = canvas.getContext('2d');
    var x = 69;
    var y = 50;

    context.drawImage(imageObj, x, y);

    var imageData = context.getImageData(x, y, imageObj.width, imageObj.height);
    var data = imageData.data;

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

    // overwrite original image
    context.putImageData(imageData, x, y);
  }

  var imageObj = new Image();
  imageObj.onload = function() {
    drawImage(this);
  };
  imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>

【问题讨论】：

你能提供你创建的小提琴吗 - 我们可以看看有什么问题。
很抱歉一开始就应该这样做，现在添加它:)

标签： javascript html canvas

【解决方案1】：

问题是您需要使用本地托管的图像 - 或数据 url。我在小提琴中遇到的错误是存在跨浏览器问题。以下修改后的小提琴工作正常。

image.src = 'data:image/png;base64,iVBOR....seefiddle'

http://jsfiddle.net/fMwp5/2/

【讨论】：

哦，对了，所以这基本上就像我在设置 MAMP 之前遇到的代码问题。这给了我一些东西，至少在弄清楚我正在做的事情不太奏效。谢谢