拉伸背景图

复制
<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')
​
 // fabric.Image.fromURL：加载图片的api 
 // 第一个参数：图片地址（可以是本地的，也可以是网络图） 
 // 第二个参数：图片加载的回调函数
 fabric.Image.fromURL(
   'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/27d1b4e5f8824198b6d51a2b1c2d0d75~tplv-k3u1fbpfcp-zoom-crop-mark:400:400:400:400.awebp',
 (img) => {
   // 设置背景图
   canvas.setBackgroundImage(
     img,
     canvas.renderAll.bind(canvas),
     {
       scaleX: canvas.width / img.width, // 计算出图片要拉伸的宽度 
       scaleY: canvas.height / img.height // 计算出图片要拉伸的高度
     }
     )
     }
   )
  }
  ​
  onMounted(() => {
 init()
})
</script>

这个例子使用了 fabric.Image.fromURL 这个 api 来加载图片，第一个参数是图片地址，第二个参数是回调函数。

拿到图片的参数和画布的宽高进行计算，从而使图片充满全屏。