古籏一浩のJavaScriptラボ ― 第14回

HTML5のcanvasで作る画像フィルター

2009年10月07日 10時00分更新

文● 古籏一浩

Firefox編：
getImageData()／putImageData()で代用する

　FirefoxにはOperaのように setPixel()／getPixel()がありません。代わりに、getImageData()／putImageData()を使ってピクセル値を読み出します。

　getImageData()は、指定した座標範囲に含まれるピクセルデータを一括して取得するメソッドです。たとえば、getImageData(0, 5, 20, 30)とすれば座標(0,5)-(20,30)までのピクセル情報がまとめて内部にコピーされます。そこで、getImageData(x,y,1,1)とすれば、X,Y座標の1ピクセル分のデータを取得できます。

　getImageData()で取得した色情報は、data配列に以下の順番で格納されます。

0：赤の輝度（0～255）
1：緑の輝度（0～255）
2：青の輝度（0～255）
3：不透明度（0～255）

　任意の座標ピクセルの色情報は以下の記述で取得できます。


imagePixelData = context.getImageData(x, y, 1, 1).data;
R = imagePixelData[0];
G = imagePixelData[1];
B = imagePixelData[2];

　続いて、任意の座標にピクセルを描画してみましょう。putImageData()は、指定された画像データを任意の座標に表示するメソッドです。putImageData()で表示する画像は、createImageData()を使って作成します。createImageData()の引数は、（1）横幅、（2）縦幅、の2つで、createImageData(1,1)とすれば1ピクセルの画像が用意されます。

　createImageData()で生成した画像オブジェクトには、色情報を格納しているdata配列があります。このdata配列はgetImageData()のdataとまったく同じです。つまり、createImageData()で生成した画像オブジェクトのdata配列に色情報を設定すれば、任意の色でピクセルを描画できるわけです。

　実際のプログラムがサンプル3です。画像データが読み込まれていないとキャンバスには何も表示されないので、サンプル3ではimgタグを使って画像をあらかじめ読み込ませています。なお、Firefoxの場合、画像が同一ドメイン（同一階層以下）にないとセキュリティエラーとなり表示されません。ファイル名だけの指定ではローカル環境であってもエラーになりますので、Webサーバーにアップロードして動作を確認してください。


Firefoxで赤色フィルター処理が行われた画像が表示される

●サンプル3（Firefox 3.5以降専用）

【HTML】


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <title>Sample</title>
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all">
        <script type="text/javascript" src="js/sample.js"></script>
    </head>
    <body>
        <h1>ブラウザーでフィルター処理</h1>
        <img src="asama.jpg" style="display: none"><br>
        <canvas id="myCanvas" width="300" height="169">canvasに対応したブラウザーで実行してください</canvas>
    </body>
</html>

【sample.js】


window.onload = function(){
    var _canvasW = 300;   // 横幅300ピクセル
    var _canvasH = 169;   // 縦幅169ピクセル
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imgObj = new Image(_canvasW, _canvasH);
    imgObj.src = "http://■■■■/●●●●/asama.jpg";
    context.drawImage(imgObj, 0, 0);
    // フィルター処理
    for(var y=0; y<_canvasH; y++){
        for(var x=0; x<_canvasW; x++){
            var imagePixelData = context.getImageData(x, y, 1, 1).data;   // ピクセル値を取得する
            var R = imagePixelData[0];
            var G = imagePixelData[1];
            var B = imagePixelData[2];
            R = R  * 2;
            if (R > 255) R = 255;
            G = Math.floor(G / 2);
            B = Math.floor(B / 2);
            var pixelImage = context.createImageData(1,1);
            pixelImage.data = [R, G, B, 255];
            context.putImageData(pixelImage, x, y);
        }
    }
}