Convert an image to 12bit for the Nokia 6100 display

function convertImage(img) {
    var canvas = document.createElement("canvas");
    var ctx = canvas.getContext('2d');
    var w = canvas.width = img.width;
    var h = canvas.height = img.height;
    ctx.drawImage(img,0,0);
    var imgData = ctx.getImageData(0,0,w,h);
    console.log(imgData.width);

    var bitmap = [];

    // TODO, convert to 12 bit
    for (var i=0 ; i<(w*h*4) ; i+=8) // step 2 pixels at a time: R1G1B1R2G2B2
    {
        var r1 = Math.round(imgData.data[i] / 16);
        var g1 = Math.round(imgData.data[i+1] / 16);
        var b1 = Math.round(imgData.data[i+2] / 16);
        var r2 = Math.round(imgData.data[i+4] / 16);
        var g2 = Math.round(imgData.data[i+5] / 16);
        var b2 = Math.round(imgData.data[i+6] / 16);
        imgData.data[i]   = r1 * 16;
        imgData.data[i+1] = g1 * 16;
        imgData.data[i+2] = b1 * 16;
        imgData.data[i+4] = r2 * 16;
        imgData.data[i+5] = g2 * 16;
        imgData.data[i+6] = b2 * 16;

        var byte1 = (r1 << 4) | g1;
        var byte2 = (b1 << 4) | r2;
        var byte3 = (g2 << 4) | b2;
        bitmap.push(byte1);
        bitmap.push(byte2);
        bitmap.push(byte3);

    }
    ctx.putImageData(imgData, 0,0);
    $container.append(canvas);
    var array = "byte matthijs[] = { " + bitmap.join(",") + " } ;";

    console.log(array);
    var $textarea = $("<textarea>").val(array);
    $container.append($textarea);
    $textarea[0].focus();
}

var $container = $("body")
var img = new Image();
img.onload = function() {
    $container.append(img);
    convertImage(this);
}
img.src = "photo-128x128.jpeg";