优质文章外链发布 5元/条 QQ:2970302840
Camila Waz 发布于
2018-08-20 16:08:59

HTML5 Canvas putImageData()方法获取反转图像颜色

要使用HTML5 Canvas反转图像的颜色,我们可以迭代图像中的所有像素,并通过从最大颜色值255中减去每个组件来反转红色,绿色和蓝色组件。接下来,我们可以重新绘制 使用更新的图像数据和putImageData()方法反转图像,这需要图像数据数组和位置。
注意:getImageData()方法要求图像托管在Web服务器上,该域与执行它的代码具有相同的域。 如果不满足此条件,将抛出SECURITY_ERR异常。
html代码:
<!DOCTYPE HTML>
<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 = 'https://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
    </script>
  </body>
</html>

当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2018-08-20/173.html
最后生成于 2019-11-21 10:17:54