Question

我有一个HTML5 canvas元素，我想将其作为单色bmp保存到服务器。我在网上看到了将它保存为彩色bmp的例子，但由于尺寸和颜色空间限制，我的应用程序已经需要它作为一个小的单色bmp。有没有人知道一个简单的解决方案（或者我将不得不编写一个类从头开始创建一个bmp文件？）

Answer 1

我通过处理这个示例代码找到了一个很好的解决方案：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);
}

Answer 2

<强> Live Demo

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

如果是bmp，你可以尝试检查这个以将数据更改为bmp

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

将HTML5画布保存为单色bmp

2 个答案: