iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 5
2
Modern Web

用 Javascript 當個影像魔術師系列 第 5

Day 05 - 圖片效果 - 灰階、反轉

顏色處理

接下來我們就可以將拿到的圖片資訊做一下處裡啦!

因為同種效果可能就有好幾種不同的實作方式,所以在接下來的演算法地方如果有不對之處還請各位大大不吝指教

那首先就從很常見的一個效果,圖像反轉開始吧。我們傳入之前獲得的 Uint8ClampArray,並且將 R、G、B 都使用 255 - 原本的值。


export const invert = pixelData => {
// 每次跳四個索引,也就是一個像素,不處理透明度
  for (let i = 0; i < pixelData.length; i += 4) {
    pixelData[i] = 255 - pixelData[i] // red
    pixelData[i + 1] = 255 - pixelData[i + 1] // green
    pixelData[i + 2] = 255 - pixelData[i + 2] // blue
  }
  return pixelData
}

接下來修改一下之前的程式,在繪畫至 Canvas 前先經過這一段算法。

const pixelData = context.getImageData(0, 0, cw, ch)
filter.invert(pixelData.data)
context.putImageData(pixelData, 0, 0)

所以如果成功的話應該會看到圖片的效果出現。

原始圖片

顏色反轉

灰階處理

接下來也是一個很常見的效果,將圖片轉成灰色。在三個通道值都相等的情況下,像素會呈現灰色( 0、255 分別代表黑色及白色,而灰度則是依據值多少決定,越大的會越接近白色 )
這個算法會算出 R、G、B 三個的平均值,並且替代原本的值,所以最後三個通道的值都會相等

export const grayscale = pixelData => {
  for (let i = 0; i < pixelData.length; i += 4) {
    const avg = (pixelData[i] + pixelData[i + 1] + pixelData[i + 2]) / 3
    pixelData[i] = avg // red
    pixelData[i + 1] = avg // green
    pixelData[i + 2] = avg // blue
  }
  return pixelData
}

一樣我們把效果改成使用轉灰階

const pixelData = context.getImageData(0, 0, cw, ch)
filter.grayscale(pixelData.data)
context.putImageData(pixelData, 0, 0)

看下效果

小結

今天介紹了兩個效果,大家應該會明白,其實不同的效果只是對 R、G、B 做不同的演算處理產生。明天見!


上一篇
Day 04 - 圖片資訊
下一篇
Day 06 - 圖片效果 - 曝光度
系列文
用 Javascript 當個影像魔術師30

尚未有邦友留言

立即登入留言