Basic Image Replacement in Fabric.js

To replace an image in a Fabric.js canvas, use the setSrc method on an Image object followed by Canvas.renderAll to refresh the display.

<button onclick="replaceImage()">Replace Image</button>
<canvas width="300" height="300" id="canvas"></canvas>

<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
  const canvas = new fabric.Canvas('canvas');
  fabric.Image.fromURL('../../images/Agumon.png', (imageObj) => {
    canvas.add(imageObj);
  });

  function replaceImage() {
    const imageElement = canvas.getObjects()[0];
    imageElement.setSrc('../../images/Bhikkhu.png', () => {
      canvas.renderAll();
    });
  }
</script>

For canvases with mulitple elements, identify the target image using custom properties and array methods like find.

Replacing Images in Non-Cached Groups

When working with groups, disable caching by setting objectCaching: false during group creation to allow image updates with Canvas.renderAll.

<button onclick="updateGroupImage()">Update Group Image</button>
<canvas width="300" height="300" id="canvas"></canvas>

<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
  const canvas = new fabric.Canvas('canvas');
  fabric.Image.fromURL('../../images/Agumon.png', (imageObj) => {
    const label = new fabric.Text('Non-Cached Group', {
      fontSize: 14,
      top: 50
    });
    const group = new fabric.Group([imageObj, label], {
      objectCaching: false
    });
    canvas.add(group);
  });

  function updateGroupImage() {
    const group = canvas.getObjects()[0];
    const imageElement = group.getObjects().find(item => item.isType('image'));
    imageElement.setSrc('../../images/Bhikkhu.png', () => {
      canvas.renderAll();
    });
  }
</script>

Replacing Images in Cached Groups

For groups with caching enabled, replace an image by removing it from the group, updating its source, and re-adding it.

<button onclick="modifyCachedGroupImage()">Modify Cached Group Image</button>
<canvas width="300" height="300" id="canvas"></canvas>

<script src="https://cdn.bootcdn.net/ajax/libs/fabric.js/460/fabric.min.js"></script>
<script>
  const canvas = new fabric.Canvas('canvas');
  fabric.Image.fromURL('../../images/Agumon.png', (imageObj) => {
    const label = new fabric.Text('Cached Group', {
      fontSize: 14,
      top: 50
    });
    const group = new fabric.Group([imageObj, label]);
    canvas.add(group);
  });

  function modifyCachedGroupImage() {
    const group = canvas.getObjects()[0];
    const imageElement = group.getObjects().find(item => item.isType('image'));
    group.removeWithUpdate(imageElement);
    imageElement.setSrc('../../images/Bhikkhu.png', () => {
      group.addWithUpdate(imageElement);
      canvas.renderAll();
    });
  }
</script>