Canvasを使って画像処理 - マイペースなプログラミング日記

JavaScriptでCanvasの画像データにアクセスできることを知ったので、試しにモノクロ画像を表示してみた。contextのgetImageDataを使っているのだが最初は配列の各要素にARGBが入ってるものだと思ってやって失敗。配列の各要素にR、G、B、Aが１つずつ入ってたのでビット演算を使うこともなく楽々取得。でも遅そうな気が...まぁ、とりあえず結果とソースコード

<!DOCTYPE html>
<html>
    <head>
        <title>楽しい画像処理</title>
        <meta charset="UTF-8"> 
        
        <script>
window.onload = function(){
    var image = new Image();
    image.src = "kamo.png";
    
    image.onload = function(){
        drawImage(image);
    }
}

function drawImage(image){
    var srcCanvas = document.getElementById("src");
    var srcContext = srcCanvas.getContext("2d");
    
    var dstCanvas = document.getElementById("dst");
    var dstContext = dstCanvas.getContext("2d");
    
    srcContext.drawImage(image, 0, 0, 320, 240);
    drawMonoImage(srcContext, dstContext);
}

function drawMonoImage(src, dst){
    var sImageData = src.getImageData(0, 0, 320, 240);
    var dImageData = dst.createImageData(320, 240);

    for(var i = 0; i < sImageData.data.length; i++){
        var r = sImageData.data[i * 4];
        var g = sImageData.data[i * 4 + 1];
        var b = sImageData.data[i * 4 + 2];

        var mono = Math.floor(0.299 * r + 0.587 * g + 0.114 * b);
        dImageData.data[i * 4] = mono;
        dImageData.data[i * 4 + 1] = mono;
        dImageData.data[i * 4 + 2] = mono;
        dImageData.data[i * 4 + 3] = 0xFF;
    }
    
    dst.putImageData(dImageData, 0 , 0);
}

        </script>
    </head>
    <body>
        <canvas id="src" width="320" height="240"></canvas>
        <canvas id="dst" width="320" height="240"></canvas>
    </body>
</html>