Изменение цвета PNG с использованием Javascript/jQuery и CSS

У меня есть черное сердце PNG изображение Я хочу отображать с другим цветом. Как изменить цвет сердца с помощью javascript/css/jquery?

Я пытаюсь создать дизайнера рубашки. Таким образом, фон - это рубашка, а сердце - дизайн печати (среди других форм).

P.S. Я знаю, что это уже дубликат, но, похоже, нет никакого решения, которое могло бы помочь. Надеюсь, вы, ребята, могли бы помочь мне, если бы вы уже это сделали. Большое вам спасибо!

ОБНОВЛЕНИЕ РЕШЕНИЯ:

Решение заключалось в использовании холста. Найденное решение здесь. Здесь код:

<h4>Original Image</h4>
<img id="testImage" src='black-heart.png'/>

<h4>Image copied to canvas</h4>
<canvas id="canvas" width="128" height="128"></canvas>

<h4>Modified Image copied to an image tag</h4>
<img id="imageData"/>



<script>
var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    image = document.getElementById("testImage");

ctx.drawImage(image,0,0);

var imgd = ctx.getImageData(0, 0, 128, 128),
    pix = imgd.data,
    uniqueColor = [0,0,255]; // Blue for an example, can change this value to be anything.

// Loops through all of the pixels and modifies the components.
for (var i = 0, n = pix.length; i <n; i += 4) {
      pix[i] = uniqueColor[0];   // Red component
      pix[i+1] = uniqueColor[1]; // Blue component
      pix[i+2] = uniqueColor[2]; // Green component
      //pix[i+3] is the transparency.
}

ctx.putImageData(imgd, 0, 0);


var savedImageData = document.getElementById("imageData");
savedImageData.src = canvas.toDataURL("image/png"); 
</script>

Ответ 1

Trick 1

Создайте несколько изображений (используя программное обеспечение для редактирования фотографий, такое как Gimp или Photoshop) и просто измените источник изображения с помощью jQuery.

Trick 2

Другим вариантом является наличие PNG с прозрачным отверстием в виде сердечка и изменение цвета фона с помощью jQuery.

Ответ 3

Сделайте два изображения и используйте метод CSS Sprites, чтобы изменить цвет изображения, когда пользователь нажимает/зависает/и т.д., вы можете настроить, как вы хотеть. См. Ссылку на простой учебник по созданию CSS-спрайтов.

Ответ 4

Это лучшее решение, которое я нашел, но не совсем применимо к вашему проекту футболки, просто для людей, которые хотят использовать значки фигур.

Вы можете использовать FONTS. А остальное - история, мы все знаем, как изменить цвет шрифта.

http://fortawesome.github.com/Font-Awesome/