javascript - 如何使用jquery改变图像的颜色

Question

很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它， visit the help center 。

已关闭 10 年前。

首先，我对我要问的愚蠢问题感到抱歉。我有一张杯子的图像。当任何用户从颜色选择器中选择颜色代码时，我想将杯子的颜色变成该颜色。

请您给我一个关于如何使用 jquery 执行此操作的提示吗？我计划使用 PHP 和 Jquery 来实现这一点。

提前致谢:)

P.S 我刚刚想到，如果对象是图像格式，则不可能使用颜色选择器更改对象的颜色，但仍然必须有一种方法来实现此目的。请您给我推荐一些东西好吗？

Answer 1

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

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

我们不会在这里使用 jQuery，因为说实话，我对此一无所知，所以我无法帮助您，相反，我们将直接使用 HTML 5 中的 canvas API(这意味着您的应用程序将无法运行)在较旧的浏览器上)

在这里，我们将执行每像素颜色乘法，因为您的杯子是灰度的，这将为我们完成此操作。

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

1. 将图像添加到 DOM
2. 创建一个离屏 Canvas 元素
3. 等待图片加载
4. 在 Canvas 上绘制图像

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

   <*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上做了一个快速的“魔杖”，稍后你可以做一些更好的事情。