有趣的6种图片灰度转换算法

6种图片灰度转换算法

【引自杨敬卓的博客】媒介

诟谇照片的时代固然已经以前，但如今看到以前的┞氛片，是不是有一种回到以前的感到，很cool有木有~

Gray = ( Math.max(Red, Green, Blue) + Math.min(Red, Green, Blue) ) / 2

看完这篇文┞仿，就可以把彩色照片变成各类各样的诟谇的┞氛片啦。

本文完全的在线例子图片灰度算法规子，例子的图片有点多，可能有些慢。

例子的源码位于blog/demo里

三原色与灰度

原色是指不克不及经由过程其他色彩的混淆调配而得出的“基本质”。一般来说叠加型的三原色是红色、绿色、蓝色，以不合比例将原色混淆，可以产生出其他的新色彩。这套原色体系常被称为“RGB色彩空间”，亦即竽暌股红(R)绿(G)蓝(B)所组合出的色彩体系。

当这三种原色以等比例叠加在一路时，会变成灰色;若将此三原色的强度均调至最大年夜并且等量重叠时，则会出现白色。灰度就是没有色彩，RGB色彩分量全部相等。

获取图片的像素数据

算法不区分说话，这里以前端举例。可以应用canvas取得图片某个区域的像素数据

//伪代码 
var img = new Image(); 
img.src = 'xxx.jpg'; 
var myCanvas = document.querySelector(canvasId); 
var canvasCtx = myCanvas.getContext("2d"); 
canvasCtx.drawImage(img, 0, 0, img.width, img.height); 
//图片的像素数据 
var data = canvasCtx.getImageData(0, 0, img.width, img.height);

应用getImageData()返回一个ImageData对象，此对象有个data属性就是我们要的数据了，数据是以Uint8ClampedArray 描述的一个一维数组，包含以 RGBA 次序的数据，数据应用 0 至 255(包含)的┞符数表示。所以，一个像素会有4个数据(RGBA),RGB是红绿蓝，A指的是透明度。

//伪代码 
for(var Pixel in Image){ 
  var Red = Image[Pixel].Red 
  var Green = Image[Pixel].Green 
  var Blue = Image[Pixel].Blue 
 
  var Gray = (Red + Green + Blue) / 3 
 
  Image[Pixel].Red = Gray 
  Image[Pixel].Green = Gray 
  Image[Pixel].Blue = Gray 
}

举个例子：本文720*480的水不雅图片，一共有720 * 480 = 259200像素，每个像素又有4个数据，所以数据数组的总长度为259200 * 4 = 1036800。

可以看到图片的数据很长，如不雅一次性处理很多图片的时刻，计算量相当可不雅，所以例子中会应用worker，把沉重的计算义务交给后台线程。

所认为了更通俗易懂，有时我们选择HLS模型描述色彩，这三个字母分别表示Hue(色调)、Saturation(饱和度)、Lightness(亮度)。色调，取值为：0 - 360，0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定色彩。饱和度，取值为：0.0% - 100.0%，它平日指色彩的鲜艳程度。亮度，取值为：0.0% - 100.0%，黑色的亮度为0。

算法的根本步调