我一直在寻找在使用单击事件时更改图像的颜色。
我偶然发现了这篇文章,其中对马克杯的第一个也是主要的回应效果非常好。
但是,我需要使用类,而不是 ID,因为我需要更改多个图像的颜色。当我将代码更改为 getElementsByClassName 而不是 byID 时,它不再起作用。
我当然将 ID=mug 更改为 class=mug。
我在代码中看不到任何其他地方会导致问题,因此任何帮助将不胜感激。
我无法在原件上发布,所以在这里添加。原文链接是:如何使用jquery改变图像的颜色
这是代码:
<img src="mug.png" id="mug" width="25%" height="25%" onload="getPixels(this)" />
<input type="text" id="color" value="#6491ee" />
<input type="button" value="change color" onclick="changeColor()">
<script type="text/javascript">
var mug = document.getElementById("mug");
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
var originalPixels = null;
var currentPixels = null;
function HexToRGB(Hex)
{
var Long = parseInt(Hex.replace(/^#/, ""), 16);
return {
R: (Long >>> 16) & 0xff,
G: (Long >>> 8) & 0xff,
B: Long & 0xff
};
}
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)
{
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");
}
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;
}
</script>
Thanks