描画するときの画像の色を変えたい

質問

こんにちは。
html5でcanvasに画像を描画しているのですが、この時に画像の色調を変える方法はありますでしょうか？

画像はアルファ付きのpngで、周囲が透明の白い図形です。
この図形を例えば青っぽく描画したり、赤っぽく描画したりしたいのですが、javascriptで可能でしょうか？

回答No.5

noname#237555

結論から言うと、可能です. 例えば次のようなコードで画像を赤っぽく加工できます.

const ctx = canvas.getContext("2d");
//元画像を描画する
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
//赤い画像を重ねる
ctx.globalCompositeOperation = "screen";
ctx.fillStyle = "rgba(128,0,0)";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//元画像の範囲で切り抜く
ctx.globalCompositeOperation = "destination-in";
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

この他にもfilterを使ったもの, ピクセル操作を用いるもの等様々な方法があります.
が、質問の内容だけではどのような結果を要しているのか判断できません.

参考URL：

http://jsdo.it/defghi1977/8QV0

回答No.4

b0a0a

不透明度の分塗りたい色で塗りつぶすることが考えられます。

例えばこんな感じですね
var id=ctx.getImageData(0,0,400,400)
var data=id.data
data.forEach((v,i)=>{if(i%4==3){data[i-3]=v;data[i-2]=0;data[i-1]=0}})
ctx.putImageData(id,0,0)

回答No.3

chie65536（@chie65535）

で、ここからが本題。

＞画像はアルファ付きのpngで、周囲が透明の白い図形です。
＞この図形を例えば青っぽく描画したり、赤っぽく描画したりしたいのですが、javascriptで可能でしょうか？

「可能と言えば可能」だけど、かなり面倒です。

・方法その１

色々な色調のpng画像を、予め何百個も用意しておいて、どれを表示するか、javascriptで切り替える。

この方法の長所：画像ファイルを必要なだけ用意すれば良いので、処理が簡単。

この方法の短所：用意してない色調は表示できない。

・方法その２

pngファイルを「バイナリで分解」したパーツを用意しておき、javascriptのプログラムでPLTEチャンクの部分を生成して、動的にpng画像を生成して、その都度、生成したpngを表示する。

この方法の長所：動的に画像ファイルを生成するので、どのような色調にも対応できる。

この方法の短所：pngファイルのファイル構造を熟知していなければならず、画像ファイルを動的に生成するので、ブラウザでページをリロードされると「キャッシュに残っていた別の色調の画像が出てしまう」や「他の閲覧者が表示した、別の色調の画像が出てしまう」などの不具合が出る場合がある。

回答No.2

chie65536（@chie65535）

＞png画像でもfillStyleは関係するのでしょうか？

png画像は、canvasとは何の関係も無い。

＞html5でcanvasに画像を描画しているのですが

これって「Googleが提供しているExplorerCanvasというJavaScriptライブラリを使用している」と言う意味ですよね？

違うなら「canvasに」と言う表記は「誤解の元」なので「画面に」と言い替えて下さい。

当方は「Googleが提供しているExplorerCanvasというJavaScriptライブラリを使用していて、excanvas.jsライブラリを組み込んで使用している」と言う前提で回答しています。

excanvas.jsライブラリは、画面に円や直線や四角形を描画するライブラリで、pngやGIF画像とは何の関連性もありません。まったくの「別物」です。

回答No.1

chie65536（@chie65535）

http://www.html5.jp/canvas/how3.html

補足

えっと、変わらないようなのですが。
png画像でもfillStyleは関係するのでしょうか？