更改图像设计颜色面料js [英] Change Image Design color Fabric js

问题描述

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

1i have to change active object image color currently my t-shirt color is changing but when i add design on it i am unable to change color of.

我的代码以更改T恤颜色:

My Code To change Tshirt Color :

//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);
});

在这里，我尝试更改设计颜色

HERE I Try To change Design 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) {

    }
});

演示

推荐答案

@ user3810894-我想您要问的是如何更改设计(演示中的gravatar)的背景颜色).

@user3810894 - I'm guessing what you are asking is how to change the background color of the design (gravatar in your demo).

之所以没有在衬衫背景上显示颜色，是因为图像的背景颜色是白色且不透明.

The reason it is not taking on the color on the shirt background is because the gravatar's background color is white and not transparent.

，而不是

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

If you were to take those images and clear out the background and resave (as a PNG with transparency) then it would take on the color of the shirt when you overlayed it.

如果您想更改化身的背景颜色与衬衫的颜色不同，那么您将做同样的事情-使背景透明，然后使用CSS为背景赋予颜色(例如它如何用于背景颜色)演示中的衬衫)

If you want to change the background color of the avatar different than the color of the shirt, then you will do the same thing - make the background transparent and then give it a background color with CSS (like how it works for the shirt in the demo)

衬衫会更改颜色"，因为它只是具有不同透明度的带有阴影的衬衫的透明图像.

The shirt changes "color" because it's only a transparent image of a shirt with shadows using varying degrees of transparency.

因此，从本质上讲，您也可以对自己的图像进行处理.

So in essence you could do it to your gravatar images as well.

希望能帮助到某人.

这篇关于更改图像设计颜色面料js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！