使用背景图

复制
<template> 
  <canvas width="400" height="400" id="canvas" style="border: 1px solid #ccc;"></canvas>
</template>
 
<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
 
function init() {
  const canvas = new fabric.Canvas('canvas')
 
  // 设置背景图 
  // 参数1：背景图资源（可以引入本地，也可以使用网络图） 
  // 参数2：设置完背景图执行以下重新渲染canvas的操作，这样背景图就会展示出来了
  canvas.setBackgroundImage(
    'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
    canvas.renderAll.bind(canvas)
  )
}
 
onMounted(() => {
  init()
})
</script>

setBackgroundImage 这个很好懂，设置背景图片。

需要注意的是，在 Fabric.js 里使用 gif 只会渲染第一帧。