如何使用Fabric.js实现更换图片、分组内图片更换及缓存图片更换的多种方法？

本文共计1602个文字，预计阅读时间需要7分钟。

原文简介：本文简要介绍了Fabric.js，并列出了三种在Fabric.js中更换图片的方法。其中包括更换单个图片以及更换组内图片的操作。环境及版本：Chrome浏览器版本：96.0.4664.45；Fabric.js版本：4.6.0。我是在原生环境下进行开发的，同时也在进行相关操作。

改写后：本文简述了Fabric.js，并展示了三种在Fabric.js中更换图片的技巧。这包括单个图片和组内图片的更换操作。测试环境为Chrome 96.0.4664.45，使用Fabric.js 4.6.0。开发在原生环境进行。

我列举了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 刷新一下画布即可。

<style> canvas { border: 1px solid #ccc; } </style> <button onclick="change()">修改图片</button> <canvas width="300" height="300" id="canvas"></canvas> <script src="cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script> <script> // 实例化canvas canvas = new fabric.Canvas('canvas') // 创建图片对象 fabric.Image.fromURL('../../images/Agumon.png', oImg => { // 将图片对象添加到 canvas 中 canvas.add(oImg) }) // 更换图片事件 function change() { // 获取图片对象。因为在本例中，画布里只有一个元素，用 getObjects() 获取到的数组第一个元素就是图片咯 const img = canvas.getObjects()[0] // 使用 setSrc 方法更改图片，第二个参数是回调函数，在回调函数里刷新一下 canvas 即可 img.setSrc('../../images/Bhikkhu.png', () => { canvas.renderAll() }) } </script>

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

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

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

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

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

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

<style> canvas { border: 1px solid #ccc; } </style> <button onclick="change()">修改图片</button> <canvas width="300" height="300" id="canvas"></canvas> <script src="cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script> <script> // 实例化canvas canvas = new fabric.Canvas('canvas') // 创建图片对象 fabric.Image.fromURL('../../images/Agumon.png', oImg => { // 文本 const text = new fabric.Text('没缓存的组', { fontSize: 14, top: 50 }) // 创建组 const group = new fabric.Group([oImg, text], { objectCaching: false // 不缓存！！！ }) // 将分组添加到canvas里 canvas.add(group) }) // 更换图片事件 function change() { // 获取组 const group = canvas.getObjects()[0] // 获取图片 const img = group.getObjects().find(item => { // 通过 isType 判断图片元素，因为组内有2个元素（一个图片，一个文本） return item.isType('image') }) // 找到图片，然后更换 img.setSrc('../../images/Bhikkhu.png', () => { // 更换完图片，刷新一下 canvas canvas.renderAll() }) } </script>

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

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

我的做法是：

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

<style> canvas { border: 1px solid #ccc; } </style> <button onclick="change()">修改图片</button> <canvas width="300" height="300" id="canvas"></canvas> <script src="cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script> <script> // 实例化canvas canvas = new fabric.Canvas('canvas') // 创建图片对象 fabric.Image.fromURL('../../images/Agumon.png', oImg => { // 文本 const text = new fabric.Text('没缓存的组', { fontSize: 14, top: 50 }) // 创建组 const group = new fabric.Group([oImg, text]) // 将分组添加到canvas里 canvas.add(group) }) // 更换图片事件 function change() { // 获取组 const group = canvas.getObjects()[0] // 查找图片对象，并保存到一个变量上 const img = group.getObjects().find(item => { // 通过 isType 判断图片元素，因为组内有2个元素（一个图片，一个文本） return item.isType('image') }) // 删除分组内的图片对象 group.removeWithUpdate(img) // 更新图片对象的 `src` 指向 img.setSrc('../../images/Bhikkhu.png', () => { // 将图片放到分组里 group.addWithUpdate(img) // 重新渲染画布 canvas.renderAll() }) } </script>

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

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

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

原生方式实现 更改图片

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

《Fabric.js 从入门到精通》

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

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

点赞 + 关注 + 收藏 = 学会了