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

First of all I am sorry for the stupid question I am going to ask. I have an image of a mug. When any user picks a color code from color picker I want to turn the color of the mug to that color.

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

Would you please kindly give me a hint on how to do this using jquery? I am planning to achieve this using PHP and Jquery.

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

Thanks in Advance :)

提前致谢 ：）

P.S It just occurred to me that its not possible to change the color of an object using a color picker if it is in an image format but still there got to be a way to achieve this. Would you please kindly suggest me something?

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

4 个解决方案

#1

Ok, first step, instead of using jpeg format, you're going to use the PNG so you can have transparent areas on the image.

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

Open it on an image editor and cut out all the blank areas on the image, leaving the mug with a transparent contour. Like this:

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

We are not going to use jQuery here because honestly I know nothing about it so I can't help you with that, instead we're going to use directly the canvas API from HTML 5 (this means your app will not work on older browsers)

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

Here we will perform a per-pixel color multiplication, since your mug is in gray scale that will do it for us.

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

Let's pick an array containing all of the pixels color information.

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

1. Add the image to the DOM
2. 将图像添加到DOM
3. Create an offscreen canvas element
4. 创建一个屏幕外的画布元素
5. Wait for the image to load
6. 等待图像加载
7. Draw the image on the canvas
8. 在画布上绘制图像

9. Get the pixels data using the getImagedata method, inside the onload event of the image

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

   <*img src="mug.png" id="mug" width="25%" height="25%" onload="getPixels(this)" />

   <* img src =“mug.png”id =“mug”width =“25％”height =“25％”onload =“getPixels（this）”/>

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

We need the color from the color picker to be in the RGB format, not hex, so use this function in case your picker returns a hexadecimal value to convert it:

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

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

Now here is the magic part, let's loop through the pixel data and multiply it to the color from the color picker.

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

on my script there is no color picker, I have just created a simple text input to type in the hexadecimal color, this function below is the onclick event of an input button

在我的脚本上没有颜色选择器，我刚刚创建了一个简单的文本输入来输入十六进制颜色，下面这个函数是输入按钮的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");
    }

See, the trick is:

看，诀窍是：

• Get the original pixel color
• 获取原始像素颜色
• Convert it from range 0-255 to 0-1
• 将其从0-255范围转换为0-1
• Multiply it to the new color you want it to be.
• 将它乘以您想要的新颜色。

You can see it working here: http://users7.jabry.com/overlord/mug.html

你可以在这里看到它：http：//users7.jabry.com/overlord/mug.html

• I am sure it works at least on firefox and chrome.

  我相信它至少适用于firefox和chrome。

• The mug contour doesn't look good, that's because I just did a quick "magic wand" on photoshop, you can do something better later.

  杯子轮廓看起来不太好，那是因为我在photoshop上做了一个快速的“魔杖”，你以后可以做些更好的事情。

#2

You could use a knock-out picture of a mug with transparent areas, give it a background and change the color of the background as required. cssTricks

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

Here's a basic example, jsFiddle, using Farbtastic Color Picker.

这是一个基本的例子，jsFiddle，使用Farbtastic Color Picker。

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

#3

You should use "Product Colorizer" by Nik Korablin. It supports one or two colors, and is simple to set up.

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

#4

You could overlay an absolutely positioned .png with a z-index greater than the base image of the mug. The overlay would be the colored mug and could have the background knoced out if needed. Swap the overlay as needed via an event handler- maybe add/remove a class?

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