本文介绍我使用 Fabric.js 的版本是 4.6.0。 这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。 我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。 最后聊聊我在真实项目中的做法。
需求： - 通过点击上传按钮上传图片
- 拿到图片，放到画布上渲染
需要注意的是，本文主要实现 上传图片并渲染到画布 的逻辑，所以没有做上传文件类型的限制，也没做文件大小限制。如果你的业务中需要限制文件类型，只需在本案例基础上添加限制的方法就行了。
本文所有代码都在文末给出的仓库里。 如果本文内容对你有所帮助，也请你帮我点个赞呗~
原生操作通过 实现逻辑： - 定义好 上传按钮 和 画布（HTML部分）；
- 初始化画布；
- 点击上传按钮 获取图片地址（这里需要处理一下安全策略的问题）；
- 拿到图片路径，使用
canvas.setBackgroundImage 将图片设置成画布背景； - 在
canvas.setBackgroundImage 的回调函数里刷新一下画布；
上面的实现方式，如果是在纯前端的环境下，保存时背景图是地址是本地地址( "blob:http://127.0.0.1:5500/383e7860-3fa5-43b9-92d9-e7165760e60b" )。 这样其实不是很好，如果在别的电脑想通过 反序列化 渲染出来的时候，可能会出现一点问题。
如果纯前端实现的方式，可以将图片转成 base64 再生成背景图。 { // 将图片设置再画布上，然后重新渲染画布，图片就出来了。 canvas.setBackgroundImage( img, // 要设置的图片 canvas.renderAll.bind(canvas) // 重新渲染画布 ) })
在 element-plus 里的操作我使用了 vue3 + element-plus 。 实现逻辑和原生方法一样。
唯一不同的是本例用了 el-upload 这个组件。
我将图片文件转成 base64 再放进画布。 “拉伸背景图” 这小节。
代码仓库原生方式实现 在 Vue3+Element-plus 中实现
推荐阅读《Fabric.js 从入门到膨胀》
《Fabric.js 渐变效果（包括径向渐变）》
《Fabric.js 3个api设置画布宽高》
《Fabric.js 自定义右键菜单》
《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》
如果本文内容对你有所帮助，也请你帮我点个赞呗~
点赞 + 关注 + 收藏 = 学会了
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ | 
