Fabric.js 在 JS 中加载图片,并渲染到画布上

使用js引入

Fabric.js 在 JS 中加载图片,并渲染到画布上

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

<script setup>
import { onMounted } from 'vue'
import { fabric } from 'fabric'
import logo from '@/assets/logo.png' // 引入图片

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

  fabric.Image.fromURL(logo, oImg => {
    oImg.scale(0.5) // 缩放
    canvas.add(oImg) // 将图片加入到画布
  })
}

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

使用 fabric.Image.fromURL 加载图片。

第一个参数是图片资源,可以放入本地图片,也可以放网络图片;

第二个参数是回调函数,图片加载完就可以对图片对象进行操作。

本作品采用《CC 协议》,转载必须注明作者和本文链接
juejin.cn/user/2673620576140030/posts
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!