圖片顏色轉換, 意思就如字面上所說, 可以將我們在畫布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跨域問題因此目前無法繪出圖二
