仅更改 overlayimage 的颜色而不是整个 canvas Fabricjs

Question

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

的中心

现在我只想改变图像背景的颜色，这样 canvas 的额外栏就没有颜色了

我得到的结果

我想要的结果

我尝试过的是使用 fabricjs 库的 overlaycolor 图像，但 none 它们对我有用。我试图在 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>

仅更改 overlayimage 的颜色而不是整个 canvas Fabricjs

Change color of overlayimage only instead of the whole canvas Fabricjs

html

javascript

jquery

canvas

fabricjs