通过Javascript更改图像颜色

Question

我一直在寻找使用单击事件时更改图像的颜色。

我碰到了这篇文章，马克杯的第一个也是主要的回应非常有效。

但是，我需要使用类而不是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>

谢谢

Answer 1

好的，花了一些时间，但通过结合给出的建议和额外的搜索，找到了满足我需求的解决方案。

到目前为止，每条建议都让我受益匪浅，但我需要的特定功能存在一些问题，因此我将其发布，以防对其他人有所帮助。

我正在使用 < svg > 元素：

我需要一个主图像，以及顶部的一些较小的图像，如果单击该图像，或者单击主图像外部的按钮，这些图像会改变颜色。

<div style="position: absolute; top: 0px; left: 0px;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="0px" height="0px"><defs><filter id="desaturate"> <feColorMatrix 
  type="matrix"
  values="0.5 0 0 0 0
          0.2 0 0 0 0
          0.9 0 0 0 0
          0 0 0 1 0" /></filter></defs></svg></div>

这些值设置颜色变化。这是一个反复试验的过程，因为我还没有找到很好的颜色指南，但有足够的指南可供参考。

我遇到了使用 < svg > 元素引起的随机空间和定位问题。所以我把它放在绝对定位的潜水中，并将元素的大小设置为“0”“0”，这样它就不会占用空间，也不会影响页面上的其他任何内容。

ID 指定了该特定颜色。然后，您可以将此颜色更改应用到任意数量的图像，如下所示：

<div style="position: relative; top: 000px; left: 000px; z-index: 1; display: inline;">
<svg class="svgClass" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="450px" height="900px">
<image xlink:href="main_image.png" width="450" height="900" />
<image xlink:href="small_image1.png" class="ChangeImageColour ChangeImageColourClick" width="79" height="198" x="110px" y="100px" />
<image xlink:href="small_image2.png" class="ChangeImageColour ChangeImageColourClick" width="79" height="198" x="150px" y="130px" /></svg></div>

同样，为了避免 SVG 的位置和间距问题，我将图像的 < svg > 元素的大小设置为与主图像相同的大小，并将它们全部放置在 < div > 中，然后可以将其定位在页面上的正确位置。如果您希望图像以这种方式重叠，则需要将所有图像放在同一 < svg > 元素中，否则在某些浏览器中可能会出现显示位置和间距问题。

您可以使用“x”和“y”将每个图像单独放置在主图像的顶部。您还必须指定图像的高度和宽度。

一旦您有了用于指定颜色的 < svg > 以及用于图像的 < svg > 元素，您现在只需使用 class 和 ID 属性以及以下代码将该颜色应用于所需的图像：

<script>
  var $shape = $( '.ChangeImageColour' );
$( '.ChangeImageColourClick' ).click(function() {
          if ( $shape.attr( 'filter' ) )
     $shape.removeAttr( 'filter' );
  else
     $shape.attr( 'filter', 'url(#desaturate)' );
});
</script>

我希望在图像或按钮上单击事件后发生颜色变化。只需创建一个具有匹配“click”类的按钮，在本例中为“ChangeImageColourClick”。所以你可以创建任何可以点击并改变颜色的东西。此单击添加要更改的设置颜色的 ID (#desaturate)。如果任何匹配元素已经具有该 ID，则将其删除。

这会产生切换颜色变化的效果。它将改变同一类的任何匹配图像的颜色。

如果不需要，您当然可以不使用单击事件，或者从“打开”颜色更改开始，然后单击以删除等。

注意：您可以有多个包含图像的 < svg > 元素并应用相同的颜色更改。只需确保将 < svg > 元素尺寸设置为您想要的尺寸，即使它是 0。如果将其留空，则会出现一些间距问题。

我需要将图像放在相同的 < svg > 中，因为它们是占用页面上相同空间的 png 图像。如果您的图像不重叠，您应该使用单独的 < svg > 元素或每个图像或图像集，并将 < svg > 元素的尺寸设置为该图像的大小，并且您不应该遇到任何奇数间距和定位问题在某些浏览器中。

我认为这足以解释一切。

它非常适合我的需要，并且是相当简洁的编码，特别是当您只需设置一次颜色并应用于多个图像时。

请注意我添加的一些注释，以确保它按照您的需要显示。

感谢您的所有帮助，如果有任何相关内容需要添加，将进行更新。

如果您遇到任何问题，请在此发帖。我不是专家，但现在已经对此进行了相当多的研究，并且可能已经尝试并测试了大多数陷阱