如何使用jquery更改图像的颜色 [英] How to change color of an image using 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.

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

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.

在此先感谢：）

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

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?

推荐答案

好的，首先，您将使用PNG，而不是使用jpeg格式，这样您就可以拥有透明区域在图像上。

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

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

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:

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

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)

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

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

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

1. 将图像添加到DOM


2. 创建屏幕外画布元素


3. 等待图像加载


4. 在画布上绘制图像



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

1. Add the image to the DOM
2. Create an offscreen canvas element
3. Wait for the image to load
4. Draw the image on the canvas

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

< * img src =mug.pngid =mugwidth =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;
}

我们需要颜色从颜色选择器到RGB格式，而不是十六进制，所以使用此函数以防你的选择器返回一个十六进制值来转换它：

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:

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.

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

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

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

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

马克杯轮廓看起来不像好的，那是因为我在photoshop上做了一个快速的魔杖，你以后可以做得更好。

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.

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