HTML5のcanvasで作る画像フィルター (5/6)

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

文●古籏一浩

ツイートする

共通で使えるピクセル処理関数を作る

　HTML5の仕様が決定していないので仕方がないのですが、ブラウザーによって処理を変更するのは面倒です。ピクセル単位での処理は同じプログラムでできると思っていましたが、実際にやってみると結構な手間がかかりました。OperaがFirefoxなど他のブラウザーと同じメソッドを実装すればプログラムは簡単になりますが、ピクセル単位で処理したい場合はsetPixel()、getPixel()の方が手軽ではないかと思います。

　そこで最後に、どのブラウザーでも使用できるgetPixel()／setPixel()メソッドを作成しましょう。getPixel()は、Operaの場合だけ処理を分岐し、もともと用意されているgetPixel()メソッドを使ってピクセル値を読み出します。ブラウザーがOperaかどうかは、windowオブジェクトのoperaプロパティの有無で判断できます。


if (window.opera) {　Operaの場合の処理　}

　Firefox／Safari／Google Chromeの場合はgetImageData()を利用してピクセル値を読み出します。ピクセル値の書き込みはOperaではsetPixel()、Firefox／Safari／Google ChromeはputImageData()を利用します。

　実際のプログラムはサンプル5にまとめました。ピクセル単位での処理なので表示までには多少時間がかかります。

どのブラウザーでも同じプログラムでフィルター処理ができる

●サンプル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 pixelData = getPixel(canvas, x, y, _canvasW, _canvasW);   // ピクセル値を取得する
            var R = pixelData.R;
            var G = pixelData.G;
            var B = pixelData.B;
            R = R  * 2;
            if (R > 255) R = 255;
            G = Math.floor(G / 2);
            B = Math.floor(B / 2);
            setPixel(canvas, x, y, R, G, B, 255, _canvasW, _canvasW);
        }
    }
}
// GetPixel
// 戻り値はオブジェクトのプロパティでR,G,B
function getPixel(srcCanvas, x, y, canvasW, canvasH){
    if (window.opera) {
        var gContext = srcCanvas.getContext("opera-2dgame");
        var rgbStr = gContext.getPixel(x, y); // ピクセル値を取得する
        var R = eval("0x"+rgbStr.substring(1,3));
        var G = eval("0x"+rgbStr.substring(3,5));
        var B = eval("0x"+rgbStr.substring(5,7));
        return {R:R, G:G, B:B};
    }
    var imagePixelData = srcCanvas.getContext("2d").getImageData(x, y, 1, 1).data;
    var R = imagePixelData[0];
    var G = imagePixelData[1];
    var B = imagePixelData[2];
    return {R:R, G:G, B:B};
}
// SetPixel
function setPixel(srcCanvas, x, y, R, G, B, A, canvasW, canvasH){
    if (window.opera) {
        var gContext = srcCanvas.getContext("opera-2dgame");
        var rgbaColor = "rgba("+R+","+G+","+B+","+A+")";
        gContext.setPixel(x,y, rgbaColor);
        return;
    }
    var context = srcCanvas.getContext("2d");
    var pixelImage = context.createImageData(1, 1);
    pixelImage.data[0] = R;
    pixelImage.data[1] = G;
    pixelImage.data[2] = B;
    pixelImage.data[3] = A;
    context.putImageData(pixelImage, x, y);
}