更改图像设计颜色Fabric js

Question

1我必须更改活动对象图像颜色，目前我的T恤颜色正在改变但是当我在其上添加设计时，我无法改变颜色。

我的代码更改T恤颜色：

//setup front side canvas
canvas = new fabric.Canvas('tcanvas', {
    hoverCursor: 'pointer',
    selection: true,
    selectionBorderColor: 'blue'
});
canvas.on({
    'object:moving': function(e) {
        e.target.opacity = 0.5;
    },
    'object:modified': function(e) {
        e.target.opacity = 1;
    },
    'object:selected': onObjectSelected,
    'selection:cleared': onSelectedCleared
});
$('.color-preview').click(function(){
    var color = $(this).css("background-color");
    document.getElementById("shirtDiv").style.backgroundColor = color;
    $('.shirtDivs').css('background-color',color);
});

此处我尝试更改设计颜色

$('#image-color').miniColors({
    change: function(hex, rgb) {
        var activeObject = canvas.getActiveObject();
        if (activeObject && activeObject.type === 'image') {
            activeObject.fill = this.value;
            canvas.renderAll();

        }
    },
    open: function(hex, rgb) {

    },
    close: function(hex, rgb) {

    }
});

Demo

Answer 1

@ user3810894 - 我猜你要问的是如何更改设计的背景颜色（演示中的gravatar）。

衬衫背景上没有颜色的原因是因为沙龙的背景颜色是白色而且不透明。

代替

如果您要拍摄这些图像并清除背景并重新保存（作为具有透明度的PNG），那么当您重叠它时它将呈现衬衫的颜色。

如果你想改变不同于衬衫颜色的化身的背景颜色，那么你会做同样的事情 - 让背景透明，然后用CSS给它一个背景颜色（比如它如何用于演示中的衬衫）

衬衫改变了“颜色”，因为它只是衬衫的透明图像，阴影使用不同程度的透明度。

所以从本质上讲，你也可以对你的重力图像进行处理。

希望能有所帮助。