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

本文简介

我列举了3种在 Fabric.js 中 更换图片 的方法。

其中还包括 更换组内图片 的操作。

环境和版本

Chrome浏览器版本：96.0.4664.45

Fabric.js版本：4.6.0

我是在原生环境下开发的，同时也提供了一份 Vue3 环境下开发的代码（文末有链接）。

动手操作

接下来有3个案例，使用了2张图片 Agumon.png 和 Bhikkhu.png，图片是在 iconfont 网站上找到的。

如果需要使用本案例的图片，可以在文末提供的仓库中获取。

情景1：更换图片元素的src

如果在画布上添加的是 Image 对象，那么可以使用 Image.setSrc 设置新的图片，然后再使用 Canvas.renderAll 刷新一下画布即可。

file

修改图片

上面这种情景是最简单的。

如果画布上有多个图形和图片，你可能需要在创建图片的时候加一些自定义属性进去判断。

使用 fabric.getObjects().find() 去搜索就行了。

find() 就是数组的原始方法。

情景2：修改组内的图片（无缓存）

创建组默认是有缓存的，有缓存的话使用 Canvas.renderAll() 方法重新渲染也不会更新图片。

所以在创建组的时候要声明 不缓存： Group.objectCaching。

file

修改图片

这种情景，重点在创建组时，要声明 objectCaching: false。

情景3：修改组内的图片（有缓存）

如果 组(Group) 设置了缓存，又需要更换 组(Group) 内的图片。

我的做法是：

1. 查找图片对象，并保存到一个变量上；
2. 删除分组内的图片对象（使用 Group.removeWithUpdate ）；
3. 更新图片对象的 src 指向（使用 Image.setSrc ）；
4. 将图片放到分组里（使用 Group.addWithUpdate ）；
5. 重新渲染画布（使用 Canvas.renderAll）；

file

修改图片

按这个例子的方式是可以达到目的的，但总觉得不太舒服。

如果你有更好的思路可以分享一下，一起讨论学习。

如果你的项目中也需要更改图片，但又不在以上3种情景中，可以留言，我会尝试解决。

代码仓库

原生方式实现 更改图片

在Vue3中使用Fabric实现 更改图片

更多推荐

《Fabric.js 从入门到精通》

《Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》

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

本文由博客一文多发平台 OpenWrite 发布！