仅更改覆盖图像的颜色而不是整个画布 Fabricjs

Question

我有一个画布，上面有透明 T 恤的背景图像。现在我想动态改变 t 恤的颜色，为了做到这一点，可以改变画布背景的颜色，衬衫会适应它。我的画布大约是 920 宽和 570 高，背景图像是 530 宽和 630 高，它位于画布的中心

现在我只想改变图像背景的颜色，使画布的额外条不着色

我得到的结果

我想要的结果

我尝试过使用 fabricjs 库的 overlaycolor 图像，但它们都不适合我。我试图在 Fabric 库的 setBackgroungColor 中给出 left:190，但这也不起作用。

感谢您对此事的任何帮助

<div id="shirtDiv">
                    <canvas id="tcanvas"></canvas>
</div>


<script>
var canvas;
    var canvas = new fabric.Canvas('tcanvas',{backgroundColor:'red', floodColor:'red'});
    canvas.setHeight(570);
    canvas.setWidth(926);
    canvas.setOverlayImage('https://lh3.googleusercontent.com/proxy/m96GqS_oGOQQPt4TMfxYQtrFfdRN6IcgkMQ-y4t_9DVDpSLsGv-2PXdX_NvjP1ljsgw680RuzZBiURQgzPSnWxmX1hU',canvas.renderAll.bind(canvas),{
        top:25,
        left:190
    });
    </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>

这里是代码：jsfiddle

Answer 1

尝试使用fabric.Image.backgroundColor。 将在对图像进行平移之前绘制颜色（或渐变）的图像区域。

var canvas;
    var canvas = new fabric.Canvas('tcanvas');
    canvas.setHeight(570);
    canvas.setWidth(926);
    canvas.setOverlayImage('http://fabricjs.com/assets/printio.png', function() {
  canvas.requestRenderAll();
  canvas.overlayImage.backgroundColor = 'red';
}, {
        top:25,
        left:190
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<div id="shirtDiv">
                    <canvas id="tcanvas"></canvas>
</div>