カンバス白黒二階調化 習作

canvasの習作として画像の二階調化に挑戦してみました。

元画像

加工後

(function(win, doc) {

    "use strict";
    
    var $body   = doc.body,
        $img    = new Image,
        $canvas = doc.createElement("canvas"),
        ctx     = $canvas.getContext("2d"),
        imgData, data;
    
    var WIDTH = 300,
        HEIGHT = 300;
    
    $canvas.width  = WIDTH;
    $canvas.height = HEIGHT;
    $body.appendChild($canvas);
    
    $img.onload = function() {
        ctx.drawImage(this, 0, 0, WIDTH,  HEIGHT);
        
        imgData = ctx.getImageData(0, 0, WIDTH,  HEIGHT); // ImageDataを取得
        data    = imgData.data; // ピクセルデータにアクセス
        
        for (var i = 0; i < data.length; i += 4) {
            var ave = (data[i+0] + data[i+1] + data[i+2]) / 3; // RGBの平均値を算出
            
            data[i+0] = 
            data[i+1] = 
            data[i+2] = (ave > 255 / 4)  ?  255 : 0; // 1 / 4 より大きかった際に黒
            data[i+3] = 255; // 不透明
        }
        
        ctx.putImageData(imgData, 0, 0);
    }
    
    $img.src = "http://jsrun.it/assets/e/k/1/z/ek1zm.jpg";
    
})(this, document);