如何使用jquery更改图像的颜色
首先，我很抱歉我要问的愚蠢问题。 我有一个杯子的形象。 当任何用户从颜色选择器中选择颜色代码时，我想将杯子的颜色变为该颜色。
请问如何使用jquery给我一个如何做到这一点的提示？ 我计划使用PHP和Jquery实现这一目标。
提前致谢 ：）
PS我刚刚想到，如果使用颜色选择器不能改变对象的颜色，如果它是图像格式，但仍然需要有一种方法来实现这一点。 请你给我一些建议吗？
好的，第一步，您将使用PNG，而不是使用jpeg格式，因此您可以在图像上使用透明区域。
在图像编辑器上打开它并剪下图像上的所有空白区域，使杯子具有透明轮廓。 像这样：
我们不打算在这里使用jQuery，因为老实说我对此一无所知所以我无法帮助你，而是我们将直接使用HTML 5中的canvas API（这意味着你的应用程序无法在旧版浏览器上运行）
在这里，我们将执行逐像素色彩乘法，因为你的杯子是灰度级的，它将为我们做。
让我们选择一个包含所有像素颜色信息的数组。
- 将图像添加到DOM
- 创建一个屏幕外的canvas元素
- 等待图像加载
- 在canvas上绘制图像
-
使用
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格式，而不是hex，因此如果您的选择器返回hex值以转换它，请使用此函数：
function hexToRGB(hex) { var long = parseInt(hex.replace(/^#/, ""), 16); return { R: (long >>> 16) & 0xff, G: (long >>> 8) & 0xff, B: long & 0xff }; }
现在这里是神奇的部分，让我们遍历像素数据并将其乘以颜色选择器的颜色。
在我的脚本上没有颜色选择器，我刚刚创建了一个简单的文本输入来输入hex颜色，下面这个函数是输入按钮的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上做了一个快速的“魔杖”，你以后可以做些更好的事情。
你可以使用带有透明区域的杯子的淘汰图片，给它一个背景并根据需要改变背景的颜色。 cssTricks
这是一个基本的例子， jsFiddle ，使用Farbtastic Color Picker 。
$('#colorpicker').farbtastic(function(color){ $('img').css("background-color",color); });
你应该使用Nik Korablin的“ Product Colorizer ”。 它支持一种或两种颜色，并且设置简单。
您可以覆盖绝对定位的.png，其z-index大于马克杯的基本图像。 叠加层将是彩色马克杯，如果需要可以将背景打开。 根据需要通过事件处理程序交换叠加层 – 可能添加/删除一个类？