前幾天已經練習了怎麼樣使用 fabric.Image 新增圖片了，今天讓我們再來為我們圖片添加更豐富的變化！

fabricjs 能為圖片渲染出更豐富的濾鏡效果，讓平淡的圖片產生更多更酷炫的效果

舉凡如下：

• 顏色的偏差調整
• 調整色彩亮度和對比
• 負片、灰階、雜訊等效果
• 去除背景
• 內建其它網美愛用濾鏡 (?)

圖片濾鏡效果

Fabric 擁有強大的濾鏡 api，且還能夠支援 WebGL 來使用 GPU 資源

甚至還能夠建立自己的濾鏡效果呢！

fabric.Image.filters (Array)

最簡單的使用方法就是修改 fabric.Image 中的 filters 屬性，這是一個陣列，這個陣列裡面存放 Fabric 的 filter 物件實例，所以說這些效果還是能疊加的，只要我們把濾鏡效果都裝進這個陣列裏頭！

這邊就簡單的創建幾種濾鏡來玩看看效果吧！

灰階效果

// 圖片
const imgEl = document.createElement('img')
imgEl.crossOrigin = 'Anonymous' // 讓圖片能讓所有人存取
imgEl.src = 'https://i.imgur.com/1k9XjUn.jpg'
imgEl.onload = () => {
  const image = new fabric.Image(imgEl, {
    scaleX: 0.5,
    scaleY: 0.5,
    angle: 15,
    top: 60,
    left: 300
  })
  // 將 filters 實例 push 進 filters 裏頭
  image.filters.push(new fabric.Image.filters.Grayscale())
  // 這邊需要重整所有的濾鏡效果
  image.applyFilters()
  canvas.add(image)
}

我們就很輕鬆地幫照片加上灰階效果囉！

負片效果

image.filters.push(new fabric.Image.filters.Invert())

純黑白

image.filters.push(new fabric.Image.filters.BlackWhite()) // 純黑白

復古

  image.filters.push(new fabric.Image.filters.Sepia()) // 復古

混和風格 純黑白 + 復古

  image.filters.push(new fabric.Image.filters.BlackWhite()) // 純黑白
  image.filters.push(new fabric.Image.filters.Sepia()) // 復古

模糊

需要傳入物件提供 blur 數值

  image.filters.push(new fabric.Image.filters.Blur({
    blur: 0.5
  })) // 模糊

去背

去背需要提供色彩以及範圍

  image.filters.push(new fabric.Image.filters.RemoveColor({
  distance: 0.2,
  color: 'white'
})) // 去背

可不只這些呦

Fabric 其實還提供了更多更有趣的內建濾鏡讓大家去使用，如果還有興趣可以到

fabricjs filter demo - http://fabricjs.com/image-filters
fabric doc filters - http://fabricjs.com/docs/fabric.Image.filters.html
去玩更多濾鏡效果呦

最後分享這邊踩到的一些雷

cross-origin data

這邊原本是想偷懶直接用 fabric.Image.FromURL 去直接使用 URL 建立一張圖片的

// 使用 url 繪製圖片
fabric.Image.fromURL('https://i.imgur.com/1k9XjUn.jpg', (img) => {
  const oImg = img.set({
      left: 300,
      top: 100,
      angle: 15,
      width: 500,
      height: 500
  })
  oImg.filters.push(new fabric.Image.filters.Grayscale())
  oImg.applyFilters()
  canvas.add(oImg) // 記得還是要加進 canvas 才會顯示出來呦
})

這邊可以看到因為我們直接用 URL 去做載入圖片，這邊 fabric 底層應該是沒有建立 標籤來儲存圖片，所以有同源的限制，這邊解法是用另一種圖片載入的方法

請參考 MDN - 同源政策 https://developer.mozilla.org/zh-TW/docs/Web/Security/Same-origin_policy

影像濾鏡出來不完整

原因是一開始使用解析度過大圖像 (3024*4032) ... 超大


這邊是 Fabricjs 為了防止用戶因使用過大的圖片而造成無法處理所做的限制
可以透過操作 fabric.textureSize 去操控被限制的大小
不過我這邊是自己去把圖片解析度縮小了啦...

今日小結

今天練習 Fabric 強大的 filters 濾鏡系統，似乎在 2.0 之後的版本又添加了 WebGL 來使用 GPU 資源真是大大提升了處理圖片的效能！

其它參考資料
fabricjs filters overview - http://fabricjs.com/fabric-filters
圖片來源
帶我們家小狗衛武營拍的XD

今日 codepen https://codepen.io/nono1526/pen/Bqxgrv?editors=1010