fabric酷炫图片处理

顏色的偏差调整
调整色彩亮度和对比
负片、灰阶、杂讯等效果
去除背景
内建其它网美爱用滤镜 (?)
图片滤镜效果

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.png

我们就很轻鬆地帮照片加上灰阶效果囉！

负片效果

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

复制

image.png

纯黑白

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

复制

image.png

復古

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

复制

image.png

混和风格 纯黑白 + 復古

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

复制

image.png

模糊

需要传入物件提供 blur 数值

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

复制

image.png

去背

去背需要提供色彩以及范围

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

复制

image.png

可不只这些呦

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 才会显示出来呦
})

复制

image.png

这边可以看到因為我们直接用 URL 去做载入图片，这边 fabric 底层应该是没有建立 标籤来储存图片，所以有同源的限制，这边解法是用另一种图片载入的方法

请参考 MDN - 同源政策 https://developer.mozilla.org/zh-TW/docs/Web/Security/Same-origin_policy
影像滤镜出来不完整

原因是一开始使用解析度过大图像 (3024*4032) ... 超大

[图片上传失败...(image-89dd01-1593932948377)]

[图片上传失败...(image-4486aa-1593932948378)]

这边是 Fabricjs 為了防止用户因使用过大的图片而造成无法处理所做的限制
可以透过操作 fabric.textureSize 去操控被限制的大小