本文介绍
我应用 Fabric.js 的版本是 4.6.0。
这次要实现的成果是：在本地上传一张图片，而后渲染到 canvas 里（当做背景图）。
我会用 原生 的办法实现一次，而后再在 Vue3 + Element-plus 环境下实现一次。
最初聊聊我在实在我的项目中的做法。
需要：
- 通过点击上传按钮上传图片
- 拿到图片，放到画布上渲染
须要留神的是，本文次要实现 上传图片并渲染到画布 的逻辑，所以没有做上传文件类型的限度，也没做文件大小限度。如果你的业务中须要限度文件类型，只需在本案例根底上增加限度的办法就行了。
本文所有代码都在文末给出的仓库里。
如果本文内容对你有所帮忙，也请你帮我点个赞呗~
原生操作
通过 <input type="file" /> 获取图片门路，会受到浏览器安全策略影响，所以须要解决一下。
实现逻辑：
- 定义好 上传按钮 和 画布（HTML局部）；
- 初始化画布；
- 点击上传按钮 获取图片地址（这里须要解决一下安全策略的问题）；
- 拿到图片门路，应用
canvas.setBackgroundImage将图片设置成画布背景； - 在
canvas.setBackgroundImage的回调函数里刷新一下画布；
<div> <input type="file" name="file" id="upload" onchange="handleUpload()" /> <button onclick="saveCanvas()">保留</button></div><canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas><!-- 引入fabric.js --><script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.js"></script><script>// 上传文件的DOM元素const uploadEl = document.getElementById("upload")// 画布let canvas = null// 初始化画布function initCanvas() { canvas = new fabric.Canvas('canvas')}// 上传文件事件function handleUpload() { // 上传文件列表的第一个文件 const file = uploadEl.files[0] // 图片文件的地址 let imgPath = null // 获取图片文件实在门路 // 因为浏览器安全策略，当初须要这么做了 // 这段代码是网上复制下来的，想深刻了解的能够百度搜搜 “C:\fakepath\” if (window.createObjcectURL != undefined) { imgPath = window.createOjcectURL(file); } else if (window.URL != undefined) { imgPath = window.URL.createObjectURL(file); } else if (window.webkitURL != undefined) { imgPath = window.webkitURL.createObjectURL(file); } // 设置画布背景，并刷新画布 canvas.setBackgroundImage( imgPath, canvas.renderAll.bind(canvas) )}// 保留画布function saveCanvas() { let data = canvas.toJSON() console.log(data)}window.onload = function() { initCanvas()}</script>下面的实现形式，如果是在纯前端的环境下，保留时背景图是地址是本地地址( "blob:http://127.0.0.1:5500/383e7860-3fa5-43b9-92d9-e7165760e60b" )。
这样其实不是很好，如果在别的电脑想通过 反序列化 渲染进去的时候，可能会呈现一点问题。
如果纯前端实现的形式，能够将图片转成 base64 再生成背景图。
fabric.Image.fromURL( imgPath, // 实在图片地址 img => { // 将图片设置再画布上，而后从新渲染画布，图片就进去了。 canvas.setBackgroundImage( img, // 要设置的图片 canvas.renderAll.bind(canvas) // 从新渲染画布 ) })在 element-plus 里的操作
我应用了 vue3 + element-plus 。
实现逻辑和原生办法一样。
惟一不同的是本例用了 el-upload 这个组件。
我将图片文件转成 base64 再放进画布。
<template> <div> <div class="btn__x"> <!-- 上传组件 --> <el-upload action="https://jsonplaceholder.typicode.com/posts/" :multiple="false" :show-file-list="false" :limit="1" accept=".jpg,.png" :before-upload="onProgress" > <el-button type="primary">上传</el-button> </el-upload> <!-- 保留按钮（序列化） --> <el-button @click="saveCanvas">保留：关上控制台查看</el-button> </div> <!-- 画布 --> <canvas id="canvas" width="600" height="600" style="border: 1px solid #ccc;"></canvas> </div></template><script setup>import { onMounted, ref } from 'vue'import { useStore } from 'vuex'import { fabric } from 'fabric'const store = useStore()// 画布let canvas = null// 上传function onProgress(file) { // 拿图片文件 const reader = new FileReader() reader.readAsDataURL(file) // 图片文件齐全拿到后执行 reader.onload = () => { // 转换成base64格局 const base64Img = reader.result // 将base64图片设置成背景 canvas.setBackgroundImage( base64Img, canvas.renderAll.bind(canvas) // 刷新画布 ) } return false}// 初始化画布function init() { canvas = new fabric.Canvas('canvas')}// 保留function saveCanvas() { console.log(canvas.toJSON())}// 页面加载实现后，初始化画布onMounted(() => { init()})</script><style lang="scss" scoped>.btn__x { display: flex; .el-button { margin-right: 20px; }}</style>在正式开发中
在正式的我的项目开发中，下面两种状况呈现的概率应该不多（除非你的后端搭档是个懒人）
先说说下面两种状况存在的问题：
- 图片门路是本地地址，保留到服务器是没意义的。
- 转成 base64 来保留，字段可能会很大。
这种状况放到服务器可能没什么用的。 127.0.0.1 是你本机的，你上传的图片在他人的电脑可能无奈查看。
这种状况尽管问题不大，但 backgroundImage.src 的值有点大。
我在我的项目中的做法：
- 前端上传图片给后端
- 后端把图片存到服务器，而后返回一个图片url给前端
- 前端拿到图片url，再放到
fabric里渲染进去
这样做的益处是 backgroundImage.src 的值变短了。
在正式我的项目中，你可能还要思考到背景图的大小和画布大小不匹配问题。
你能够参考 《Fabric.js 从入门到收缩》 中 “拉伸背景图” 这大节。
代码仓库
原生形式实现
在 Vue3+Element-plus 中实现
举荐浏览
《Fabric.js 从入门到收缩》
《Fabric.js 突变成果（包含径向突变）》
《Fabric.js 3个api设置画布宽高》
《Fabric.js 自定义右键菜单》
《Fabric.js 更换图片的3种办法（包含更换分组内的图片，以及存在缓存的状况）》
如果本文内容对你有所帮忙，也请你帮我点个赞呗~
点赞 + 关注 + 珍藏 = 学会了