老实说我决定要写影像处理这个部分的时候还蛮犹豫的，因为在javascript 做影像处理的这个领域，IT邦之前其实就有蛮多写的蛮不错的文章。

例如第11届铁人赛 , lb01910483大大写的 用 Javascript 当个影像魔术师。

不过既然都决定要写了，那我也只能尽力去把这个章节写完XD

话不多说，就让我们开始吧。

canvas的影像处理基础

大家不知道还有没有印象我们在前些时候有讲过canvas的像素操作(pixel manipulation)。

我们之前有讲过canvas的imageData的提取方法，也有提到过最一个基本的像素处理案例实作：『拼字图画』。

相信之前有读过我们的像素操作教学文的人应该已经对我们接下来要讲的东西都有了一些基本的概念~

没读过或不熟的同学可以再回去读一读喔~之前的文连结在这边: https://ithelp.ithome.com.tw/articles/10270233

我们在这一篇会先来简单的热个身! 从一些简单的影像处理技术，还有简单的色彩原理开始讲解 ~

简易影像处理技术实作一 : 彩色转灰阶

其实这个技巧我们在像素处理那篇有用过，但是当时并没有很清楚地提出来讲～

彩色转灰阶的原理其实很简单，就是单纯的把RGB channel 的值取平均

就像下面这样:

function turnImageDataIntoGrayscale(imageData){
   let data = imageData.data;
   for(let i=0;i<data.length;i = i+4){
     let r = data[i];
     let g = data[i+1];
     let b = data[i+2];
     //取得rgb值得平均, 如此一来因为rgb都变成同一个数值
     // 图像就会变成灰阶图
     let average = (r+g+b)/3
     data[i] = data[i+1] = data[i+2] = average;
   }
  return imageData;
}

可能有些人会有点纳闷，为什麽取平均就会变成灰阶图呢? 其实可以稍微回忆一下每次在写css要用灰阶色时，灰阶系列的颜色基本都是rgb为相同数值的组合(例如#333 就是rgb(51,51,51))~

简易影像处理技术实作二 : 反相

反相顾名思义就是把色相(Hue)颠倒过来，而实作的方式很简单，就是直接用255去扣掉当前的channel值就可以了

function invertImageData(imageData){
   let data = imageData.data;
   for(let i=0;i<data.length;i = i+4){
     let r = data[i];
     let g = data[i+1];
     let b = data[i+2];

    //直接用255去扣掉当前的channel值
     data[i] = 255 - r;
     data[i+1] = 255 - g;
     data[i+2] = 255 - b;
     
   }
  return imageData;
}

在上面两个案例中，也就是灰阶化和反相，他们其实都是对色相(Hue)、彩度(Chroma)、明度(Value)的一种操作。

色相(Hue)、彩度(Chroma)、明度(Value) 在美术领域的色彩学中并称『色彩三要素』，意思是说只要透过调节这三种要素的数值/占比，就可以产生任意颜色。

而在电脑编程的世界中，我们平常在写样式的时候通常是用到HEX色码或者是RGB(A)制的颜色，但是其实还有另外两种我们比较不常用到的格式，那就是HSV和HSL，这两者的H和S代表的都是Hue(色相)和Saturate(饱和度)，HSV的V是Value(明度)，而HSL的L则是亮度(Ligntness)

• Hue(色相) : 基本上跟色彩学 - 色彩三要素的色相(Hue)无异。
• Saturate(饱和度): 跟色彩学 - 色彩三要素的彩度(Chroma)有直接关系，但是不是等价，除此之外HSL和HSV的S计算方式略有不同。
• Value(明度): 跟色彩学 - 色彩三要素的明度(Value)有直接关系，但是不是等价。
• 亮度(Ligntness): 虽然名称不同，跟色彩学 - 色彩三要素的明度(Value)反而比较接近。

图片来自 维基百科

从上图我们可以看出HSL制和HSV制的差别主要就在於表示色彩亮度的Ｚ轴部分(HSL会随着L值的增加而变得更趋近於白色，但是HSV不会)

RGB与HSL/HSV 的相互转换方法 可以读这篇 ： https://www.itread01.com/content/1549753775.html

到这边我们就做完基本的热身了 ~ 下一篇开始我们会实作一些比较有趣的案例，还是老样子各位敬请期待 :D