Question

I have an HTML5 canvas element which I would like to save to the server as a monochrome bmp. I have seen examples online of saving it as a color bmp, but because of size and colorspace restrictions my application has I need it to be a small monochrome bmp. Does anyone know of a simple solution for this (or am I going to have to write a class to create a bmp file from scratch?)

Answer 1

I found a good solution by working off of this example code: rephrase.net/box/bitmap The author helped me implement a function that could turn a pixel array into a monochrome bitmap. From there I was able to take canvas data and iterate through it and parse it into a pixel array that I could convert into a monochrome bmp.

I created this function to facilitate converting canvas data based on alpha values (since the canvas data is also monochrome in my application) to a pixel array which can be used by the jsbmp script:

function createBMP(canvas) {
    var context = canvas.getContext("2d");
    var width = canvas.width;
    var height = canvas.height;
    var imageData = context.getImageData(0, 0, width, height);
    var data = imageData.data;

    //create pixel array from canvas based on alpha
    var pixels = [];
    for (var i = data.length - 1; i > 0; i -= 4) {
        if (i > 0) {
            if (data[i] > 125) {
                pixels.push("000000");
            } else {
                pixels.push("ffffff");
            }
        }
    }

    //unmirror
    var pixarray = [];
    for (var i = height - 1; i > -1; i--) {
        var row = [];
        for (var j = 0; j < width; j++) {
            row.push(pixels[(i * width) + j]);
        }
        for (var j in row) {
            pixarray.push(row[j]);
        }
    }
    pixarray.reverse();

    return bmp_mono(width, height, pixarray);
}

And here is the code for bmp_mono:

/*
Create an uncompressed Windows bitmap (monochrome) given width, height and an
array of pixels.

Pixels should be in BMP order, i.e. starting at the bottom left, going up
one row at a time.
*/
function bmp_mono(width, height, pixarray, palette) {
var rowsize = Math.ceil(width / 8);
var rowpadding = 4 - (rowsize % 4);
if (typeof palette == 'undefined')
    palette = ['000000', 'ffffff'];

var j, pix, mod;
pixarray.reverse();
var pixels = [];
var b = 0;
for (var i=0; i<height; ++i) {
    row = [];
    for (j=0; j<width; ++j) {
        mod = j % 8;
        pix = pixarray.pop();
        if (parseInt(pix, 16) != 0) {
            b = b | Math.pow(2, 7-mod);
        }
        if (mod == 7 || j == width-1) {
            pixels.push(String.fromCharCode(b));
            b = 0;
        }
    }
    for (j=0; j<rowpadding; ++j) {
        pixels.push("\x00");
    }
}
return _bmp(width, height, palette, pixels.join(""), 1, 0);
}