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

本文介绍

我使用 Fabric.js 的版本是 4.6.0。

这次要实现的效果是：在本地上传一张图片，然后渲染到 canvas 里（当做背景图）。

我会用 原生 的方法实现一次，然后再在 Vue3 + Element-plus 环境下实现一次。

最后聊聊我在真实项目中的做法。

file

需求：

1. 通过点击上传按钮上传图片
2. 拿到图片，放到画布上渲染

需要注意的是，本文主要实现 上传图片并渲染到画布 的逻辑，所以没有做上传文件类型的限制，也没做文件大小限制。如果你的业务中需要限制文件类型，只需在本案例基础上添加限制的方法就行了。

本文所有代码都在文末给出的仓库里。

如果本文内容对你有所帮助，也请你帮我点个赞呗~

原生操作

通过 获取图片路径，会受到浏览器安全策略影响，所以需要处理一下。

实现逻辑：

• 定义好 上传按钮 和 画布（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) // 重新渲染画布
    )
  }
)

在 element-plus 里的操作

我使用了 vue3 + element-plus 。

file

实现逻辑和原生方法一样。
唯一不同的是本例用了 el-upload 这个组件。
我将图片文件转成 base64 再放进画布。

在正式开发中

在正式的项目开发中，上面两种情况出现的概率应该不多（除非你的后端伙伴是个懒人）

先说说上面两种情况存在的问题：

1. 图片路径是本地地址，保存到服务器是没意义的。
2. 转成 base64 来保存，字段可能会很大。

file

这种情况放到服务器可能没什么用的。 127.0.0.1 是你本机的，你上传的图片在别人的电脑可能无法查看。

file

这种情况虽然问题不大，但 backgroundImage.src 的值有点大。

我在项目中的做法：

1. 前端上传图片给后端
2. 后端把图片存到服务器，然后返回一个图片url给前端
3. 前端拿到图片url，再放到 fabric 里渲染出来

这样做的好处是 backgroundImage.src 的值变短了。

在正式项目中，你可能还要考虑到背景图的大小和画布大小不匹配问题。
你可以参考 《Fabric.js 从入门到膨胀》 中 “拉伸背景图” 这小节。

代码仓库

原生方式实现

在 Vue3+Element-plus 中实现

推荐阅读

《Fabric.js 从入门到膨胀》


《Fabric.js 渐变效果（包括径向渐变）》


《Fabric.js 3个api设置画布宽高》


《Fabric.js 自定义右键菜单》


《Fabric.js 更换图片的3种方法（包括更换分组内的图片，以及存在缓存的情况）》

如果本文内容对你有所帮助，也请你帮我点个赞呗~
点赞 + 关注 + 收藏 = 学会了