Question

首先，我很抱歉我要问的愚蠢问题。我有一个杯子的形象。当任何用户从颜色选择器中选择颜色代码时，我想将杯子的颜色变为该颜色。

请您使用jquery给我一个如何做到这一点的提示？我计划使用PHP和Jquery实现这一目标。

提前致谢：）

P.S我刚想到，如果它是图像格式，那么使用颜色选择器就无法改变对象的颜色，但仍然需要有一种方法来实现这一点。请你给我一些建议吗？

Answer 1

好的，第一步，您将使用PNG，而不是使用jpeg格式，因此您可以在图像上使用透明区域。

在图像编辑器上打开它并剪切图像上的所有空白区域，使杯子具有透明轮廓。像这样：

enter image description here

我们不打算在这里使用jQuery，因为老实说我对此一无所知所以我无法帮助你，而是我们将直接使用HTML 5中的canvas API（这意味着你的应用程序无法正常工作）在较旧的浏览器上）

在这里，我们将执行逐像素色彩乘法，因为你的杯子是灰色的，可以为我们做。

让我们选择一个包含所有像素颜色信息的数组。

将图像添加到DOM
创建屏幕外画布元素
等待图片加载
在画布上绘制图像

使用getImagedata方法在图片的onload事件中获取像素数据

＆lt; * img src =“mug.png”id =“mug”width =“25％”height =“25％”onload =“getPixels（this）”/＆gt;

var mug = document.getElementById("mug");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;

function getPixels(img)
{
    canvas.width = img.width;
    canvas.height = img.height;

    ctx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, img.width, img.height);
    originalPixels = ctx.getImageData(0, 0, img.width, img.height);
    currentPixels = ctx.getImageData(0, 0, img.width, img.height);

    img.onload = null;
}

我们需要颜色选择器中的颜色为RGB格式，而不是十六进制，因此如果您的选择器返回十六进制值以转换它，请使用此函数：

function hexToRGB(hex)
{
    var long = parseInt(hex.replace(/^#/, ""), 16);
    return {
        R: (long >>> 16) & 0xff,
        G: (long >>> 8) & 0xff,
        B: long & 0xff
    };
}

现在这里是神奇的部分，让我们遍历像素数据并将其乘以颜色选择器的颜色。

在我的脚本上没有颜色选择器，我刚刚创建了一个简单的文本输入来输入十六进制颜色，下面这个函数是输入按钮的onclick事件

    function changeColor()
    {
        if(!originalPixels) return; // Check if image has loaded
        var newColor = hexToRGB(document.getElementById("color").value);

        for(var I = 0, L = originalPixels.data.length; I < L; I += 4)
        {
            if(currentPixels.data[I + 3] > 0) // If it's not a transparent pixel
            {
                currentPixels.data[I] = originalPixels.data[I] / 255 * newColor.R;
                currentPixels.data[I + 1] = originalPixels.data[I + 1] / 255 * newColor.G;
                currentPixels.data[I + 2] = originalPixels.data[I + 2] / 255 * newColor.B;
            }
        }

        ctx.putImageData(currentPixels, 0, 0);
        mug.src = canvas.toDataURL("image/png");
    }

看，诀窍是：

获取原始像素颜色
将范围从0-255转换为0-1
将其乘以您想要的新颜色。

您可以在此处看到它：http://users7.jabry.com/overlord/mug.html

我确信它至少适用于firefox和chrome。
杯子轮廓看起来不太好，因为我只是在photoshop上做了一个快速的“魔杖”，你以后可以做些更好的事情。

Answer 2

你可以使用带有透明区域的杯子的淘汰图片，给它一个背景并根据需要改变背景的颜色。 cssTricks

以下是使用jsFiddle的基本示例Farbtastic Color Picker。

$('#colorpicker').farbtastic(function(color){
    $('img').css("background-color",color);
});

Answer 3

你应该使用Nik Korablin的~~“Product Colorizer”~~。它支持一种或两种颜色，并且设置简单。

Answer 4

你可以覆盖绝对定位的.png，其z-index大于马克杯的基本图像。叠加层将是彩色马克杯，如果需要可以将背景打开。根据需要通过事件处理程序交换叠加层 - 可能添加/删除一个类？

如何使用jquery更改图像的颜色

4 个答案: