Fabric。js将本地图像上传到画布背景

　　本文介绍
　　我使用Fabric。js的版本是4。6。0。
　　这次要实现的效果是：在本地上传一张图片，然后渲染到canvas里（当做背景图）。
　　我会用原生的方法实现一次，然后再在Vue3Elementplus环境下实现一次。
　　最后聊聊我在真实项目中的做法。
　　需求：通过点击上传按钮上传图片拿到图片，放到画布上渲染
　　需要注意的是，本文主要实现上传图片并渲染到画布的逻辑，所以没有做上传文件类型的限制，也没做文件大小限制。如果你的业务中需要限制文件类型，只需在本案例基础上添加限制的方法就行了。
　　本文所有代码都在文末给出的仓库里。
　　如果本文内容对你有所帮助，也请你帮我点个赞呗
　　原生操作
　　通过获取图片路径，会受到浏览器安全策略影响，所以需要处理一下。
　　实现逻辑：定义好上传按钮和画布（HTML部分）；初始化画布；点击上传按钮获取图片地址（这里需要处理一下安全策略的问题）；拿到图片路径，使用canvas。setBackgroundImage将图片设置成画布背景；在canvas。setBackgroundImage的回调函数里刷新一下画布；
　　inputtypefilenamefileiduploadonchangehandleUpload（）buttononclicksaveCanvas（）保存buttoncanvasidcanvaswidth600height600styleborder：1pxsolidccc；canvas！引入fabric。js
　　上面的实现方式，如果是在纯前端的环境下，保存时背景图是地址是本地地址（blob：http：127。0。0。1：5500383e78603fa543b992d9e7165760e60b）。
　　这样其实不是很好，如果在别的电脑想通过反序列化渲染出来的时候，可能会出现一点问题。
　　如果纯前端实现的方式，可以将图片转成base64再生成背景图。fabric。Image。fromURL（imgPath，真实图片地址img｛将图片设置再画布上，然后重新渲染画布，图片就出来了。canvas。setBackgroundImage（img，要设置的图片canvas。renderAll。bind（canvas）重新渲染画布）｝）
　　在elementplus里的操作
　　我使用了vue3elementplus。
　　实现逻辑和原生方法一样。唯一不同的是本例用了elupload这个组件。我将图片文件转成base64再放进画布。template！上传组件eluploadactionhttps：jsonplaceholder。typicode。composts：multiplefalse：showfilelistfalse：limit1accept。jpg，。png：beforeuploadonProgresselbuttontypeprimary上传elbuttonelupload！保存按钮（序列化）elbuttonclicksaveCanvas保存：打开控制台查看elbutton！画布canvasidcanvaswidth600height600styleborder：1pxsolidccc；canvastemplatestylelangscssscoped。btnx｛display：flex；。elbutton｛marginright：20px；｝｝style
　　在正式开发中
　　在正式的项目开发中，上面两种情况出现的概率应该不多（除非你的后端伙伴是个懒人）
　　先说说上面两种情况存在的问题：图片路径是本地地址，保存到服务器是没意义的。转成base64来保存，字段可能会很大。
　　这种情况放到服务器可能没什么用的。127。0。0。1是你本机的，你上传的图片在别人的电脑可能无法查看。
　　这种情况虽然问题不大，但backgroundImage。src的值有点大。
　　我在项目中的做法：前端上传图片给后端后端把图片存到服务器，然后返回一个图片url给前端前端拿到图片url，再放到fabric里渲染出来
　　这样做的好处是backgroundImage。src的值变短了。
　　在正式项目中，你可能还要考虑到背景图的大小和画布大小不匹配问题。你可以参考《Fabric。js从入门到膨胀》中拉伸背景图这小节。
　　代码仓库
　　原生方式实现：https：gitee。comk21vinfabricjsdemoblobmasterdemosUploadImgindex。html
　　在Vue3Elementplus中实现：https：gitee。comk21vinfrontenddatavisualizationblobmastersrcviewsFabricJSDemopagesUploadImgUploadImg。vue