首先，我很抱歉我要问的愚蠢问题。我有一个杯子的图像。当任何用户从颜色选择器中选择颜色代码时，我想将杯子的颜色变成该颜色。
请你给我一个关于如何使用 jquery 做到这一点的提示？我打算使用 PHP 和 Jquery 来实现这一点。
提前致谢 ：）
PS我突然想到，如果对象是图像格式，则无法使用颜色选择器更改对象的颜色，但仍然必须有一种方法来实现这一点。请你给我一些建议好吗？
如何使用 jquery 更改图像的颜色
IT技术
javascript
jquery
2021-02-12 17:53:33
4个回答
好的，第一步，您将使用 PNG，而不是使用 jpeg 格式，这样您就可以在图像上有透明区域。
在图像编辑器上打开它并剪掉图像上的所有空白区域，留下一个透明轮廓的杯子。像这样：
我们不会在这里使用 jQuery 因为老实说我对此一无所知所以我无法帮助您，相反我们将直接使用 HTML 5 中的画布 API（这意味着您的应用程序将无法在旧浏览器上运行)
在这里，我们将执行逐像素颜色乘法，因为您的杯子是灰度的，这将为我们做。
让我们选择一个包含所有像素颜色信息的数组。
- 将图像添加到 DOM
- 创建一个离屏画布元素
- 等待图片加载
- 在画布上绘制图像
使用
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上做了一个快速的“魔杖”，你以后可以做得更好。
您可以使用带有透明区域的杯子的剔除图片，为其设置背景并根据需要更改背景颜色。css技巧
这是一个使用Farbtastic Color Picker的基本示例jsFiddle。
$('#colorpicker').farbtastic(function(color){
$('img').css("background-color",color);
});
您应该使用“产品Colorizer ”由尼克Korablin。它支持一种或两种颜色，并且设置简单。
您可以覆盖绝对定位的 .png，其 z-index 大于杯子的基本图像。覆盖层将是彩色杯子，如果需要，可以将背景剔除。根据需要通过事件处理程序交换覆盖 - 也许添加/删除一个类？