# 图片

# 创建

使用 fabric.Image.fromURL(imgpath, function) 方法创建图片

第一个参数是图片路径

第二个回调

# show code

fabric.Image.fromURL(catImg, (img) => {
  img.set({ left: 30, top: 20, scaleX: 0.2, scaleY: 0.2 })
  canvas.add(img)
})

1
2
3
4

# 多张图片重叠问题

图片置于最底层 img.sendToBack()

# show code

const draw = (canvas) => {
  fabric.Image.fromURL(catImg, (img) => {
    img.set({ left: 30, top: 20 })
    canvas.add(img)
  })

  fabric.Image.fromURL(yaImg, (img) => {
    canvas.add(img)
    img.sendToBack() // 图片置于最底层
  })
}

1
2
3
4
5
6
7
8
9
10
11

# 添加滤镜

# show code

fabric.Image.fromURL(catImg, (img) => {
  // 添加滤镜
  img.filters.push(
    new fabric.Image.filters.Grayscale(),
    new fabric.Image.filters.Sepia(), // 色偏
    new fabric.Image.filters.Brightness({ brightness: 0.1 }) // 亮度
  )
  // 图片加载完成之后，应用滤镜效果
  img.applyFilters()
  canvas.add(img)
})

1
2
3
4
5
6
7
8
9
10
11

fabric 内置滤镜

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

← 变换背景图 →