イメージの色をリアルタイムで交換する

Question

まず、自分の状況を説明して、自分の問題を少し良く知ることができます。私はHTML5アプリケーションを作っています。私はキャンバスを持っており、カラーピッカーを使ってキャンバスの色を変えることができます。今私はキャンバスに貼りたい写真がありますが、その写真の色をカラーピッカーで変更する必要があります。だから、私はその絵の上に黒の色を置き換えてキャンバスに置く必要があるので、背景をねじ込む必要があります。

だから、次のようになります。キャンバス
第二カラーピッカーの色を変更しpicker-
第一の色 - カラーピッカーの1を用いて画像の上に黒い色を置き換え、キャンバス

の上に置きます

私の問題は、ページを再読み込みせずにイメージの色を置き換える方法です。

私の唯一の条件は、Silverlight、Flash、Java、またはデバイスにサードパーティのソフトウェアをインストールする必要がある他の同様のテクニックを使用しないことです。

ありがとうございます。 質問を完全に理解できない場合は、お気軽にお問い合わせください。 JSの唯一の解決策と

Answer 1

私のアプローチは次のようになります。canvas要素の内部

• Loading the image。 Look at the MDC canvas tutorial

• トリガーキャンバス上のユーザーをクリックし、ピクセルの色を取得します（ピクセルの色を取得する方法を知るために、以下のリンクを参照）、this answer to get the mouse position

• 見代用キャンバス内のすべての色でユーザーが選択したもの私はほとんどすべてのブラウザでキャンバスを持つピクセル操作ができることに気づくいくつかのキャンバス実験後

  • Pushing pixel with canvas at Mozilla Hacks
  • http://beej.us/blog/2010/02/html5s-canvas-part-ii-pixel-manipulation/
  • このJS at mezzoblue apply heavy filter to an image

：ピクセル操作に関するいくつかの例について小さな画像でも非常に遅くなる。これを行うには別の実験のピクセルの色を取得することで、その後可能性：AJAX呼び出し

と

• は、PHP（または他のサーバサイドスクリプト）に色情報を渡すには、画像ライブラリと色の操作を行いますAjaxのレスポンスを使用して画像
• は画像