I am trying to blend an image over another image using Fabric JS.
From my research I found this Blend class that can be used to achieve this task. But I found the documentation unclear without any proper examples. So I referred and followed this answer as a guidance to proceed forward
Here is the sample of my code. I want the image with the id image-2 to be blended by keeping image-1 in the background.
const firstImage = document.getElementById('image-1');
const secondImage = document.getElementById('image-2');
window.onload = () => {
const canvas = new fabric.Canvas('previewCanvas');
const bgImage = new fabric.Image(firstImage);
const fgImage = new fabric.Image(secondImage)
const filter = new fabric.Image.filters.Blend({
image: fgImage,
mode: 'multiply',
alpha: 0.5
});
bgImage.filters.push(filter);
bgImage.applyFilters(canvas.renderAll.bind(canvas));
canvas.add(bgImage);
}<img src="https://dummyimage.com/150x150/000/fff" id="image-1" />
<img src="https://dummyimage.com/150x150/404582/fff" id="image-2" />
<canvas id="previewCanvas"><canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.1/fabric.js" integrity="sha512-CzyxOXSECwo2nGJQZ2P8fdDxWVMVzn0jNdT2lYJ3afbqDJbaQ4qxgv9sLc85f6KP8HO2y929Bu+lnPKGC3ofSg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>As you can see when you run the above snippet I keep on receiving this error
Uncaught (in promise) TypeError: fabric.Image.filters.Blend is not a constructor
Why is that and how can this error be solved?