HTML5 Canvas实战
3.8 把图像颜色转换成灰色
阅读(

路径和文本

图形及组合

处理图像和视频

绘制图像

裁剪图像

拷贝、粘贴画布的某部分

处理视频

获取图像数据

处理像素:图像反色

视频反色

把图像颜色转换成灰色

本节,我们将探讨另一个常用的像素处理算法,把颜色改为灰色。

彩色图像转为灰色图像
图3-9 彩色图像转为灰色图像

警告:由于getImageData()方法的安全限制,本节的例子必须在Web服务器上运行。

绘制步骤

按照以下步骤,把一幅图像的颜色转换为灰色:

1. 定义画布上下文:

window.onload = function(){
  var canvas  = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");

2. 创建一个image对象,把onload属性设置为一个绘制图像并获取图像数据的函数:

  var imageObj  = new Image();
  imageObj.onload  = function() {
    var sourceWidth  = this.width;
    var sourceHeight = this.height;
    var destX  = canvas.width  /  2  - sourceWidth  /  2;
    var destY  = canvas.height  /  2  - sourceHeight  /  2;
    var sourceX  = destX;
    var sourceY  = destY;
    context.drawImage(this, destX, destY);
    var imageData  = context.getImageData(sourceX, sourceY, sourceWidth, sourceHeight);
    var data  = imageData.data;
    

3. 循环图像的每个像素,并使用亮度的公式把这些像素的颜色转换为灰色:

  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];
    data[i]  = brightness;  // red
    data[i  +  1]  = brightness;  // green
    data[i  +  2]  = brightness;  // blue
    // i+3是透明度(第四个元素)
   }

4. 使用处理后的图像覆盖源图像,并在onload定义的外面设置图像的源地址

    //覆盖源图像
    context.putImageData(imageData, destX, destY);
  };
  imageObj.src  = "jet_300x214.jpg";
};

5. 在HTML文档的body部分嵌入canvas标签:

<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>

工作原理

要把RGB颜色转换为渐变的灰色,我们需要获得颜色的亮度。我们使用亮度公式,得到一个彩色像素点的灰度值。该公式是基于这样一个事实,人类最敏感的是绿色,然后是红色,最不敏感的是蓝色:

Brightness = 0.34 * R + 0.5 * G + 0.16 * B

考虑到生理效应,请注意,我们给绿色增加了较高的权重(最敏感),然后是红色(次敏感),然后是蓝色(最不敏感)。

有了这个公式,我们可以简单的循环图像中的所有像素,计算其感知亮度,并把该值赋给RGB值的每个分量,再把处理后的图像重绘到画布。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验