Estoy tratando de combinar una imagen sobre otra imagen usando Fabric JS .
De mi investigación encontré esta clase Blend que se puede usar para lograr esta tarea. Pero encontré la documentación poco clara sin ningún ejemplo adecuado. Así que me referí y seguí esta respuesta como una guía para seguir adelante.
Aquí está la muestra de mi código. Quiero que la imagen con la image-2 se mezcle manteniendo image-1 en el fondo.
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>Como puede ver cuando ejecuta el fragmento anterior, sigo recibiendo este error
No capturado (en promesa) TypeError: fabric.Image.filters.Blend no es un constructor
¿Por qué es eso y cómo se puede solucionar este error?