Изменение цвета изображения через Javascript

Question

Я искал, чтобы изменить цвет изображения при использовании события клика.

I Пришло через это сообщение, в котором первый и главный ответ с Кружкой работает очень хорошо.

Однако мне нужно использовать класс, а не идентификатор, так как мне нужно изменить цвет более чем одного изображения. Когда я меняю код на getElementsByClassName, а не byID, он больше не работает.

Я, конечно, меняю ID = кружку на класс = кружка.

Я не вижу нигде в коде, который может вызвать проблему, поэтому любая помощь будет оценена по достоинству.

Я не могу опубликовать оригинал, поэтому добавьте сюда. Оригинальная ссылка: How to change color of an image using 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, поэтому он не занимает места и не влияет ни на что другое на странице.

Идентификатор определяет этот цвет. Вы можете применить это изменение цвета на стольких же изображения, как вам нравится следующим образом:

<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> для изображений, теперь просто нужно применить этот цвет к изображениям, которые вы хотите с помощью атрибутов классов и идентификаторы и следующий код:

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

Я хочу, чтобы изменение цвета происходило после эфира щелчка на изображении или с помощью кнопки. Просто создайте кнопку с соответствующими «щелчками» calss, в данном случае «ChangeImageColourClick». Таким образом, вы можете создавать все, что нужно щелкнуть, и изменить цвет. Этот клик добавляет идентификатор установленного цвета для изменения (#desaturate). Если какой-либо соответствующий элемент уже имеет идентификатор, он удаляется.

Это создает эффект переключения цвета. Он изменит цвет любого совпадающего изображения того же класса.

Вы можете, конечно, не использовать событие щелчка, если не требуется, или начать с изменением цвета «на» и нажмите кнопку для удаления и т.д.

Примечания: Вы можете иметь несколько < SVG> элементы с изображениями в и применить одно и то же изменение цвета. Просто убедитесь, что вы устанавливаете размеры элемента < svg> для тех, которые вы хотите, даже если это 0. Если вы оставите его пустым, вы получите некоторые проблемы с интервалом.

Мне нужно иметь изображения в том же < svg>, поскольку они представляют собой изображения png, которые занимают одно и то же место на странице. Если ваши изображения не перекрываются, вы должны использовать отдельные элементы < svg> или каждый набор изображений или изображений и задавать размеры элемента < svg> размеру этого изображения, и у вас не должно быть проблем с нечетным интервалом и позиционированием в некоторых браузерах.

Я думаю, что об этом объясняется все.

Он работает очень хорошо для того, что мне нужно, и представляет собой довольно краткий код кодирования, тем более, что вам нужно только установить цвет один раз и применить к нескольким изображениям.

Просто будьте осторожны с некоторыми примечаниями, которые я поставил, чтобы убедиться, что они отображаются по мере необходимости.

Спасибо за помощь, обновите, если есть что-то, что нужно добавить.

Если у вас возникли проблемы, отправьте сообщение здесь. Я не эксперт, но посмотрел на это сейчас честно и, вероятно, пробовал и тестировал большинство подводных камней.

Answer 2

Я не знаю, как обычай работу, которую вы пытаетесь, но простое исправление было бы сделать второй класс с фильтром, затем добавьте этот класс в событие 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-фильтров here. Используйте оттенок-поворот, чтобы изменить оттенок (цвет). Используйте цветовое колесо, чтобы определить, куда вы хотите пойти.

Если вы хотите переключиться на использование класс, чтобы изменить их все сразу, вы можете сделать это вместо того, чтобы:

<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 3

Я думаю, что это может иметь какое-то отношение к поддержке браузера, потому что 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> 

Я не побежал код, но он должен работать