更改图像设计颜色 Fabric js

Posted 2023-03-06

技术标签:

【中文标题】更改图像设计颜色 Fabric js【英文标题】：Change Image Design color Fabric js 【发布时间】：2014-11-20 17:33:54 【问题描述】：

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

【问题讨论】：

这是您提供的演示，还是其他人的演示？ 【参考方案1】：

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

之所以不取衬衫背景颜色，是因为头像的背景颜色是白色的，不透明。

而不是

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

如果您想将头像的背景颜色更改为不同于衬衫的颜色，那么您将做同样的事情 - 使背景透明，然后使用 CSS 给它一个背景颜色（就像它的工作原理一样演示中的衬衫）

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

所以本质上你也可以对你的 gravatar 图像进行处理。

希望对某人有所帮助。

【讨论】：