Сохранить HTML5 холст как монохромный BMP - PullRequest
Новая
       10

Сохранить HTML5 холст как монохромный BMP

2 голосов
/ 09 августа 2011

У меня есть холст HTML5, который я хотел бы сохранить на сервере в виде монохромного BMP.Я видел в Интернете примеры сохранения его в виде цветного BMP, но из-за ограничений по размеру и цветовому пространству мое приложение должно быть маленьким монохромным BMP.Кто-нибудь знает простое решение для этого (или мне придется написать класс для создания файла bmp с нуля?)

Ответы [ 2 ]

2 голосов
/ 12 августа 2011

Я нашел хорошее решение, отработав этот пример кода: rephrase.net / box / bitmap Автор помог мне реализовать функцию, которая могла бы превратить массив пикселей в монохромное растровое изображение.Оттуда я смог взять данные холста, выполнить итерацию по ним и проанализировать их в массив пикселей, который я мог преобразовать в монохромный BMP.

Я создал эту функцию, чтобы облегчить преобразование данных холста на основе альфа-значений (так какданные холста в моем приложении также монохромные) в массив пикселей, который может использоваться сценарием 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);
}
1 голос
/ 09 августа 2011

Демо-версия

Это частичное решение, поскольку оно не преобразует его в растровое изображение, а в PNG. Первое изображение, которое вы видите, - это холст, второе - исходное изображение, а третье - данные из холста, вставленные в изображение.

если имеет в качестве bmp, вы можете попробовать проверить это для изменения данных в bmp

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

...