HTML5/JSのイメージカラーオーバーレイ

Question

透明な背景を持ついくつかのpngベクトルがあります。そのため、ユーザーはベクターを選択し、ピッカーからどの色を選択できるかを選択できます。

複数のpngが同じキャンバスにロードされ、オーバーラップする必要があるため、背景色でマスクすることはできません。

イメージをキャンバスにロードして特定の色でオーバーレイするにはどうすればよいですか？

編集：私はいくつかの情報が見つかりましたhereとhere（ - 答えはネイサン）どのような仕事の種類が、すべてのブラウザではありません。

私は

Answer 1

は実際にあなたがキャンバスにイメージをロードし、特定の色でそれをオーバーレイしたい透明滞在するだけで、それ自体がオーバーレイされるPNG、およびtransparenceyを必要とし、特にように、第2の1、それが得られます全体的な画像に色効果を与える。

このjQueryプラグインは、イメージをキャンバスに読み込んだり、素晴らしい色合いの効果を与える色を操作してイメージ要素に戻したりします。これをイメージ要素に変換することは、IDやクラスの代わりにimg要素でCSSベースのスタイルを設定することができるため、非常に重要な部分です。

だけインタラクティブdemoと遊ぶ：

をしてdocsを経る：

は楽しみを持っています。