顏色的偏差调整
调整色彩亮度和对比
负片、灰阶、杂讯等效果
去除背景
内建其它网美爱用滤镜 (?)
图片滤镜效果
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 去操控被限制的大小
网友评论