Question

所以这个网站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>

Answer 1

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

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

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

反转颜色HTML5画布教程

1 个答案: