巧用3种方法在Fabric.js中更换图片（包含组内图片，支持缓存）

2024-01-16 03:48:05

Fabric.js 是一个优秀的 Canvas 图形库，它提供了许多有用的功能来帮助我们轻松创建和操作 Canvas 图形。其中，更换图片是 Fabric.js 中一个常用的操作，本文将介绍如何在 Fabric.js 中更换图片，并提供 3 种不同的方法供您参考。

方法一：直接设置图片源

最简单的方法是直接设置图片源。这种方法适用于单个图片，以及组内没有缓存的图片。具体步骤如下：

选中要更换图片的对象。
使用 setSrc() 方法设置图片源。
调用 renderAll() 方法刷新画布。

const canvas = new fabric.Canvas('c');
const image = new fabric.Image('path/to/image.jpg');
canvas.add(image);

image.setSrc('path/to/new-image.jpg');
canvas.renderAll();

方法二：使用 `loadFromJSON()` 方法

如果要更换的图片是组内图片，或者组内存在缓存，则需要使用 loadFromJSON() 方法。具体步骤如下：

选中要更换图片的对象。
调用 toJSON() 方法将对象转换为 JSON 字符串。
使用 loadFromJSON() 方法从 JSON 字符串中加载新图片。
调用 renderAll() 方法刷新画布。

const canvas = new fabric.Canvas('c');
const group = new fabric.Group([
  new fabric.Image('path/to/image1.jpg'),
  new fabric.Image('path/to/image2.jpg')
]);
canvas.add(group);

const json = group.toJSON();
group.loadFromJSON(json, (newGroup) => {
  newGroup.setSrc('path/to/new-image.jpg');
  canvas.renderAll();
});

方法三：使用 `setElement()` 方法

如果要更换的图片是组内图片，并且组内存在缓存，则还可以使用 setElement() 方法。具体步骤如下：

选中要更换图片的对象。
使用 getElement() 方法获取图片元素。
将图片元素替换为新图片。
调用 renderAll() 方法刷新画布。

const canvas = new fabric.Canvas('c');
const group = new fabric.Group([
  new fabric.Image('path/to/image1.jpg'),
  new fabric.Image('path/to/image2.jpg')
]);
canvas.add(group);

const image = group.getElement();
image.src = 'path/to/new-image.jpg';
canvas.renderAll();