将 HTML5 画布另存为单色 bmp

Question

我有一个 HTML5 canvas 元素，我想将其作为单色 bmp 保存到服务器。我在网上看到过将其保存为彩色 bmp 的示例，但由于大小和色彩空间限制，我的应用程序需要将其保存为小型单色 bmp。有谁知道这个问题的简单解决方案（或者我是否必须编写一个类来从头开始创建 bmp 文件？）

Answer 1

现场演示

这是一个部分解决方案，因为它不会转换它是位图而不是png。您看到的第一张图像是画布，第二张是原始图像，第三张是画布中的数据放入图像中。

如果它必须是bmp，您可以尝试检查此内容以将数据更改为bmp

http://devpro.it/code/216.html

Answer 2

我通过处理以下示例代码找到了一个很好的解决方案： rephrase.net/box/bitmap 作者提供了帮助我实现了一个可以将像素数组转换为单色位图的函数。从那里我能够获取画布数据并迭代它并将其解析为像素数组，我可以将其转换为单色 bmp。

我创建这个函数是为了方便将基于 alpha 值的画布数据（因为画布数据在我的应用程序中也是单色的）转换为可供 jsbmp 脚本使用的像素数组：

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);
}

下面是 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);
}