.btn__x{显示：flex；.el-button{margin-right:20px;}}本文介绍我使用的Fabric.js版本是4.6.0。本次要实现的效果是：在本地上传一张图片，然后渲染到canvas中（作为背景图片）。我先用native方法实现一次，然后在Vue3+Element-plus环境下再实现一次。最后说说我在实际项目中的实践。需求：点击上传按钮上传图片得到图片，放到画布上进行渲染。需要注意的是，本文主要实现了上传图片并渲染到canvas上的逻辑，所以对上传文件的类型没有限制，对文件大小也没有限制。如果您在业务中需要限制文件类型，只需要添加基于本案例的限制方法即可。本文所有代码均在文末给出的仓库中。如果本文内容对你有帮助，请点个赞~原生通过获取图片路径的操作会受到浏览器安全策略的影响，所以需要处理。实现逻辑：定义上传按钮和画布（HTML部分）；初始化画布；点击上传按钮获取图片地址（这里需要处理安全策略问题）；获取图片路径，使用canvas.setBackgroundImage设置图片为画布背景；在canvas.setBackgroundImage的回调函数中刷新画布；保存
以上实现方式，如果是纯前端环境，保存时背景图的地址为本地地址("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)//重新渲染canvas)})element-plus中的操作我使用了vue3+element-plus。实现逻辑与native方法相同。唯一的区别是这个例子使用了el-upload组件。我将图像文件转换为base64并将其放在画布中。
