HTML5画布灰度图像颜色教程

来源：互联网发布：c 二维数组赋值不全编辑：程序博客网时间：2024/04/29 02:30

灰度图像的颜色与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>

0 0