HTML5画布灰度图像颜色教程

最新推荐文章于 2021-06-15 11:59:27 发布

limeiyans

最新推荐文章于 2021-06-15 11:59:27 发布

阅读量1k

点赞数

分类专栏： HTML5画布灰度图像颜色教程文章标签： HTML5画布灰度图像颜色教程

本文链接：https://blog.csdn.net/limeiyans/article/details/18321189

版权

HTML5画布灰度图像颜色教程专栏收录该内容

1 篇文章 0 订阅

订阅专栏

灰度图像的颜色与HTML5画布,我们可以遍历所有像素的图像,计算每个的亮度,然后设置红、绿、蓝组件等于亮度。

注意:getImageData()方法需要的图像是托管在一个web服务器相同的域代码执行它。如果不满足此条件,将会抛出一个SECURITY_ERR异常。

<!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) {
          var brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
          // red
          data[i] = brightness;
          // green
          data[i + 1] = brightness;
          // blue
          data[i + 2] = brightness;
        }

        // 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>
  </body>
</html>

limeiyans

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5画布灰度图像颜色教程

灰度图像的颜色与HTML5画布,我们可以遍历所有像素的图像,计算每个的亮度,然后设置红、绿、蓝组件等于亮度。注意:getImageData()方法需要的图像是托管在一个web服务器相同的域代码执行它。如果不满足此条件,将会抛出一个SECURITY_ERR异常。 body { margin: 0px; padding: 0px;
复制链接

扫一扫