本文介绍我列举了Fabric.js换图的3种方式。还包括替换组内图片的操作。环境及版本Chrome浏览器版本：96.0.4664.45Fabric.js版本：4.6.0我是在原生环境下开发的，也提供了一个在Vue3环境下开发的代码（文末有链接）。动手实践以下是3个示例，使用了2个图像Agumon.png和Bhikkhu.png，它们是在iconfont网站上找到的。如果您需要使用本案例的图片，可以在文末提供的仓库中获取。场景一：改变图片元素的src如果在画布上添加一个Image对象，可以使用Image.setSrc设置一张新图片，然后使用Canvas.renderAll刷新画布。修改图片以上这个场景是最简单的。如果画布上有多个图形和图片，创建图片时可能需要添加一些自定义属性来判断。只需使用fabric.getObjects().find()进行搜索。find()是数组的原始方法。场景二：修改组内图片（无缓存）。创建的组默认有缓存。如果有缓存，用Canvas.renderAll()方法重新渲染不会更新图片。所以在创建组的时候，声明没有缓存：Group.objectCaching。修改图片在这个场景中，重点是在创建组时声明objectCaching:false场景三：修改组中的图片(withcache)如果组（Group）设置了缓存，需要替换组（Group）中的图片。我的做法是：找到图像对象，保存到一个变量中；删除组中的图像对象（使用Group.removeWithUpdate）；更新图像对象的src点（使用Image.setSrc）；将图像放入组中（使用Group.addWithUpdate）；重新渲染画布（使用Canvas.renderAll）；修改图片按照这个例子，目的是可以实现的，但是总感觉不舒服。如果大家有更好的想法，可以分享出来，一起讨论学习。如果你的项目中也需要换图片，但不是以上三种场景，可以留言，我会尽力解决。代码仓库的原生实现。换图是在Vue3中使用Fabric实现的。更多换图推荐《Fabric.js 从入门到精通》《Fabric.js实现渐变(Gradient)效果，包括径向渐变radial》《Fabric.js 自定义右键菜单》
