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

Question

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

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

提前致谢 :)

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

Answer 1

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

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

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

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

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

1. 将图像添加到DOM
2. 创建一个屏幕外的画布元素
3. 等待图像加载
4. 在画布上绘制图像

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

   <*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格式,而不是十六进制,因此如果您的选择器返回十六进制值以转换它,请使用此函数:

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 ".它支持一种或两种颜色,并且设置简单.