web-dev-qa-db-ja.com

Javascript / jQueryとCSSを使用してPNGの色を変更する

ブラックハート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>
javascriptjquerycssimagepng
13
haifacarina

トリック1

（GimpやPhotoshopなどの写真編集ソフトウェアを使用して）複数の画像をすでに作成し、jQueryを使用して画像ソースを簡単に変更します。

トリック2

別のオプションは、透明なハート型の穴のあるPNGを作成し、jQueryを使用して背景色を変更することです。

8
adarshr

できません。

あなたができることはそれを ハートのユニコードテキスト文字 に置き換えて、その色を設定することです。

2
Diodeus - James MacFarlane

これは私が見つけた最良の解決策ですが、シェイプアイコンを使用したい人のためだけに、Tシャツプロジェクトにはまったく当てはまりません。

FONTSを使用できます。そして残りは歴史です、私たちは皆、フォントの色を変更する方法を知っています。

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

1
Nicola Mihaita

2つの画像を作成し、 CSSスプライト テクニックを使用して、ユーザーがクリック/ホバー/などしたときに画像の色を変更します。必要に応じてカスタマイズできます。 CSSスプライトの作成に関する簡単なチュートリアルについては、リンクを参照してください。

1
uday