Fabric.js Filters 图片滤镜

前几天已经练习了怎麼样使用 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 资源真是大大提升了处理图片的效能！