I’m trying to use fabric.js to dynamically change color of t-shirt and also place design on it. The design is a PNG image. All image are sourced from URLs. I have been able to use BlendColor to change the color. Now when I’m trying to use BlendImage to blend design on it, it’s turning the t-shirt plain white. How can I achieve proper blend of color and design on t-shirt?
Output without BlendImage
Output with BlendImage
Here is my JS code
const designWidth = 300;
const designHeight = 300;
var tshirt, design;
var colorPicker = document.getElementById("colorPicker");
var color = colorPicker.value;
var colorFilter;
var designFilter;
var canvas = new fabric.Canvas('productCanvas',{
backgroundColor: 'white',
width: 512,
height: 768
});
//Add Design
fabric.Image.fromURL('https://static.wixstatic.com/media....png', function(img){
canvas.insertAt(img,1);
design = img;
img.scaleToHeight(designHeight);
img.scaleToWidth(designWidth);
}, {left: (canvas.width - designWidth)/2, top: (canvas.height - designHeight)/2, crossOrigin: 'anonymous'});
//Add Image with product
fabric.Image.fromURL('https://static.wixstatic.com/media....png', function(img){
setImagetoCanvas(canvas,img);
changeProduct(color, img, design, canvas);
tshirt = img;
}, {selectable: false, crossOrigin: 'anonymous'});
//Change color
var changeColorBtn = document.getElementById("changeColorBtn");
changeColorBtn.addEventListener(
"click",
function(e) {
color = colorPicker.value;
changeProduct(color,tshirt, design, canvas);
},
false
);
//Change color & design of product
function changeProduct (color, productImg, design, c){
if (colorFilter == null) {
colorFilter = new fabric.Image.filters.BlendColor({
color: color,
mode: 'multiply',
});
designFilter = new fabric.Image.filters.BlendImage({
image: design,
mode: 'multiply',
});
} else {
productImg.filters = [];
colorFilter.setOptions({color: color});
}
productImg.filters.push(colorFilter);
productImg.filters.push(designFilter);
productImg.applyFilters();
c.renderAll();
}