Fabric.js 画布 —— 拉伸背景图

拉伸背景图

<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 来加载图片，第一个参数是图片地址，第二个参数是回调函数。

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

本作品采用《CC 协议》，转载必须注明作者和本文链接