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

Question

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

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

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

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

Решением было использование canvas. Нашел мое решение здесь . Вот код:

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

Answer 1

Трюк 1

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

Трюк 2

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

Answer 2

Вы не можете.

Что вы можете сделать, это заменить его текстовым символом Юникод для сердца и установить его цвет.

Answer 3

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

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

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

Answer 4

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