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

Question

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

现在我只想更改图像背景的颜色，以便 canvas 的额外条不着色

我得到的结果

我想要的结果

我尝试过使用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>