图片滤镜

『Fabric.js 图片路径 - 文档』

🎁 本节案例预览 - 图片滤镜

🎁 本节代码仓库

<template> 
  <div> 
    <canvas width="500" height="500" id="canvas" style="border: 1px solid #ccc;"></canvas> 
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
import gwen from '@/assets/images/gwen-spider-verse-ah.jpg'

function init() {
  const canvas = new fabric.Canvas('canvas')

  fabric.Image.fromURL(gwen, img => {
    img.scale(0.5) // 图片缩小50%
    canvas.add(img)
  })

  // 单个滤镜
  fabric.Image.fromURL(gwen, img => {
    img.scale(0.5) // 图片缩小50%
    img.left = 250 
    // 添加滤镜
    img.filters.push(new fabric.Image.filters.Grayscale())
    // 图片加载完成之后，应用滤镜效果
    img.applyFilters()
    canvas.add(img)
  })

  // 叠加滤镜 
  // “filters”属性是一个数组，我们可以用数组方法执行任何所需的操作：移除滤镜（pop，splice，shift），添加滤镜（push，unshift，splice），甚至可以组合多个滤镜。当我们调用 applyFilters 时，“filters”数组中存在的任何滤镜将逐个应用，所以让我们尝试创建一个既色偏又明亮（Brightness）的图像。
  fabric.Image.fromURL(gwen, img => {
    img.scale(0.5) // 图片缩小50% 
    // 添加滤镜
    img.filters.push(
        new fabric.Image.filters.Grayscale(),
        new fabric.Image.filters.Sepia(), //色偏 
        new fabric.Image.filters.Brightness({ brightness: 0.2 }) //亮度
    )
    // 图片加载完成之后，应用滤镜效果
    img.applyFilters()
    img.set({
      left: 250,
      top: 250,
    })

    canvas.add(img)
  })
}

onMounted(() => {
  init()
})
</script>

给图片添加滤镜，fabric.Image.fromURL 的回调函数里返回一个图片对象，图片对象可以使用 filters 添加滤镜。

fabric 内置滤镜

• BaseFilter 基本过滤器
• Blur 模糊
• Brightness 亮度
• ColorMatrix 颜色矩阵
• Contrast 对比
• Convolute 卷积
• Gamma 伽玛
• Grayscale 灰度
• HueRotation 色调旋转
• Invert 倒置
• Noise 噪音
• Pixelate 像素化
• RemoveColor 移除颜色
• Resize 调整大小
• Saturation 饱和
• Sepia 色偏