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

本文简介

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

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

Chrome浏览器版本：96.0.4664.45

Fabric.js版本：4.6.0

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

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

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

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

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

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

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

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

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

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

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

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

我的做法是：

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

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

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