Fabric.js Filters 图片滤镜
2018-11-27 19:52:37
2302次阅读
0个评论
前几天已经练习了怎麼样使用 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 资源真是大大提升了处理图片的效能!


收藏00

登录 后评论。没有帐号? 注册 一个。