HTML5 canvasで画像の色(カラーバランス)を変更する方法 – How to change the color balance of the image in HTML5 canvas

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【HTML5 canvasで画像の色(カラーバランス)を変更する方法 – How to change the color balance of the image in HTML5 canvas】です。画像の色調を変えるのは結構地味な効果ですが、HTML5で実装するのには若干手間がかかります。とはいえ一度組んでしまえば汎用的に役に立ちそうですし…ちょこっとクライアントワークで使う事もあったのでメモしておきます。なにいってんだ?という方はChromeでデモをご確認ください。

実装方法

以下は基本的な部分のみになりますが、使い方も改変も簡単だと思います。change(id,src,rR,rG,rB)のrR,rG,rBは赤緑青の強度になります。rRが加算されれば赤に近づき、減算でシアンに近づいてゆきます。またrGは緑とマゼンダ、rBは青と黄を変更しています。実際にはchange(‘ID’,’画像URL’,赤,青,緑);の赤,青,緑の部分に加算減算したい数値を記述し、実行させます。

HTML
<canvas id="canvsid" width="300" height="300"></canvas>
JS

function change(id,src,rR,rG,rB) {
var canvas = document.getElementById(id),
picWidth = $(‘#canvsid’).width(),
picHeight = $(‘#canvsid’).height(),
picLength = picWidth * picHeight,
mg = new Image();
if (canvas.getContext) {
ctx = canvas.getContext(“2d”);
mg.onload = function() {
var imgH = mg.height,
imgW = mg.width,
imgHhalf = mg.height/2,
imgWhalf = mg.width/2,
imgx = imgWhalf – picWidth/2,
imgy = imgHhalf – picHeight/2;
ctx.drawImage(mg,imgx,imgy,picWidth,picHeight,0,0,picWidth,picHeight);
mg = ctx.getImageData(0, 0, picWidth, picHeight);
for (var i = 0; i < picLength * 4; i += 4) { var myRed = mg.data[i]; var myGreen = mg.data[i + 1]; var myBlue = mg.data[i + 2]; mg.data[i] = myRed + rR; mg.data[i + 1] = myGreen + rG; mg.data[i + 2] = myBlue + rB; } ctx.putImageData(mg, 0, 0); } mg.src = src; }}[/js]
JS(実行用)
[js]change(‘canvsid’,’画像URL’,100,0,0);

また今回の例ではctx.drawImage~~の部分で画像の切り抜き + キャンバスへの描写を行っています。切り抜きの範囲は画像のセンターから算出していますので、画像の中央からキャンバスサイズに切り抜きが実行描写されるようになっております。jQueryも一部使用していますので事前読み込みはお忘れなく。
 

 
ちなみに上記に少し改造すれば画像をグレースケールに変更する事も可能だったり…。個人的にはコードをもう少しスリムにしてサムネイルを一辺にレッドにする等の使い方をしています。

以上になります。