3.8 把图像颜色转换成灰色

优质

小牛编辑

140浏览

2023-12-01

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

警告：由于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值的每个分量，再把处理后的图像重绘到画布。