Canvas 圖片顏色轉換

圖片顏色轉換, 意思就如字面上所說, 可以將我們在畫布Canvas上的顏色進行轉換。
就像有些圖片App那樣, 可以把顏色加強對比、增加飽和、灰階效果等等

由於工作上的需要, 這次需要將幾張圖片結合近一張畫布Canvas接著將其反白。
實作方式並不困難，考慮以下程式範例以及註解：

// 建立畫布
let canvas = document.createElement('canvas')
// 取得Context
let ctx = canvas.getContext('2d')
// 設定畫布大小
let canvasSize = 300
// 取得裝置 devicePixelRatio
let devicePixelRatio = window.devicePixelRatio || 1
// 取得裝置 BackingStorePixelRatio
let backingStoreRatio = ctx.webkitBackingStorePixelRatio || ctx.mozBackingStorePixelRatio || ctx.msBackingStorePixelRatio || ctx.oBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
// 取得畫布實際大小比值
let ratio = (devicePixelRatio / backingStoreRatio)
// 設定畫布樣式寬高
canvas.style.width = canvas.style.height = `${canvasSize}px`
// 設定畫布實際寬高
canvas.width = canvas.height = canvasSize * ratio
// 修正畫布內容大小
ctx.scale(ratio, ratio)

// 以上內容為修正失真, 接著載入範例圖片
let image = new Image()
image.addEventListener('load', () => {
  
  ctx.drawImage(image, 0, 0)
  
  document.body.appendChild(canvas)
  
  // 本主題範例重點由此開始
  
  // 建立反白圖片物件
  let antiWhiteImage = new Image()
  
  // 取得原畫布圖像資料
  antiWhiteImage = ctx.getImageData(0, 0, canvas.width, canvas.height)
  
  let red, green, blue, alpha, convertColor
  // 注意這邊的迴圈變數i, 每次為 i+=4
  for (let i = 0; i < antiWhiteImage.data.length; i += 4) {
    // i = red 0~255
    red = antiWhiteImage.data[i]
    // i+1 = green 0~255
    green = antiWhiteImage.data[i + 1]
    // i+2 = blue 0~255
    blue = antiWhiteImage.data[i + 2]
    // i+3 = alpha 0~255
    alpha = antiWhiteImage.data[i + 3]

    // 轉換所有非白色的顏色至白色, 其他則轉為黑色
    convertColor = (red + green + blue) > 0 ? 255 : 0
    antiWhiteImage.data[i]      = convertColor
    antiWhiteImage.data[i + 1]  = convertColor
    antiWhiteImage.data[i + 2]  = convertColor
    antiWhiteImage.data[i + 3]  = 255
  }
  
  
  // 宣告畫布2
  let canvas2 = document.createElement('canvas')
  // 取得畫布2, Context
  let ctx2 = canvas2.getContext('2d')
  
  // 設定畫布2樣式寬高
  canvas2.style.width = canvas2.style.height = `${canvasSize}px`
  // 設定畫布2實際寬高
  canvas2.width = canvas2.height = canvasSize * ratio
  
  ctx2.putImageData(antiWhiteImage, 0, 0);
  document.body.appendChild(canvas2)
})
image.src = 'http://reso2.yiihuu.com/530647-z.jpg'

此範例邏輯正確, 但實際執行此範例會遇到Canvas跨域問題因此目前無法繪出圖二