好的，第一步，您将使用 PNG 代替 jpeg 格式，这样您就可以在图像上设置透明区域。
在图像编辑器中打开它并剪掉图像上的所有空白区域，使杯子具有透明的轮廓。像这样：
我们不会在这里使用 jQuery，因为老实说，我对此一无所知，所以我无法帮助您，而是我们将直接使用 HTML 5 中的 canvas API（这意味着您的应用程序将无法运行在旧浏览器上）
在这里，我们将执行逐像素的颜色乘法，因为您的杯子是灰度的，这将为我们完成。
让我们选择一个包含所有像素颜色信息的数组。
- 将图像添加到 DOM
- 创建屏幕外画布元素
- 等待图片加载
- 在画布上绘制图像
-
在图像的 onload 事件中使用getImagedata 方法获取像素数据
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