通過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>元素的尺寸設置為該圖像的大小，您不應該有任何奇數間距和定位問題在某些瀏覽器中。

我想這就解釋了一切。

它非常適合我需要的東西，並且是一個相當簡潔的編碼，特別是因為你只需設置一次顏色並應用於多個圖像。

請注意我放置的一些注意事項，以確保它根據您的需要顯示。

感謝所有幫助，如果有任何相關內容需要更新。

如果您遇到任何問題，請在此處發帖。 我不是專家，但現在已經看了很多，並且可能已經嘗試並測試了大多數陷阱