通过Javascript更改图像颜色

Question

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

我遇到了这篇文章，其中第一个和主要的回应与Mug工作得非常好。

但是，我需要使用类而不是ID，因为我需要更改多个图像的颜色。 当我将代码更改为getElementsByClassName而不是byID时，它不再有效。

我当然把ID =杯子改为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

我不知道你正在尝试的工作的自定义，但一个简单的解决方法是使用过滤器创建第二个类，然后在click事件中添加该类。

<img src='mug.png' id='mug' class='unfiltered-pic'  onclick="changeColor(this)>
<style>
.unfiltered-pic {
     width: 25%
     height: 25%
}

.filtered-pic {
    filter: hue-rotate(/*degree on color wheel*/deg)
}
</style>
<script>
function changeColor(element) {
     element.setAttribute('class', 'filtered-pic');
}
</script>

您可以在此处通过css-filters选择各种过滤器。 使用hue-rotate更改色调（颜色）。 使用色轮确定您要去的地方。

如果您想切换到使用类一次更改所有这些，您可以改为：

<img src='mug.png' id='mug' class='unfiltered-pic'  onclick="changeColor()>
<style>
.unfiltered-pic {
     width: 25%
     height: 25%
}

.filtered-pic {
    filter: filter function /*See Link*/
}
</style>
<script>
var pics = document.getElementByClassName('unfiltered-pic')
function changeColor() {
     for(var i=0; i < pics.length; i++) {
         pics[i].setAttribute('class', 'filtered-pic');
     }
}
</script>

如果您需要任何澄清或其他帮助，请与我们联系。

Answer 2

我认为它可能与浏览器支持有关，因为document.getElementByClassName("mug"); 应该返回一个元素数组（旧浏览器可能不支持它）。 在这一点上，很容易迭代每个杯子并改变颜色

<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="changeMugsColor()">

<script type="text/javascript">
    var mug = document.getElementsByClassName("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 changeMugsColor() {
        for (var ii = 0; ii < mug.length; ii++) {
            changeColor(mug[ii]);
        }
    }

    function changeColor(amug)
    {
        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);
        amug.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 3

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

到目前为止，每个建议都让我感到满意，但是我需要的具体功能存在一些问题，所以我发布这个以防万一。

我正在使用<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>

值设置颜色更改。 这是试验和错误atm，因为我还没有找到一个很好的颜色指南，但有足够的周围来得到。

使用<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>元素就可以了，你现在只需要使用类和ID属性以及下面的代码将这种颜色应用于你想要的图像：

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

我希望在图像或按钮上的单击事件以太后发生颜色更改。 只需创建一个匹配“click”calss的按钮，在本例中为“ChangeImageColourClick”。 因此，您可以创建要点击的任何内容并更改颜色。 此单击添加要更改的设置颜色的ID（#desaturate）。 如果任何匹配元素已具有该ID，则将其删除。

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

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

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

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

我想这就解释了一切。

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

请注意我放置的一些注意事项，以确保它根据您的需要显示。

感谢所有帮助，如果有任何相关内容需要更新。

如果您遇到任何问题，请在此处发帖。 我不是专家，但现在已经看了很多，并且可能已经尝试并测试了大多数陷阱