Enregistrer le canevas HTML5 en monochrome bmp

Question

J'ai un élément canevas HTML5 que je voudrais enregistrer sur le serveur en tant que bmp monochrome. J'ai vu des exemples en ligne de l'enregistrer en tant que bmp de couleur, mais en raison des restrictions de taille et de l'espace de couleurs mon application a besoin d'un petit bmp monochrome. Est-ce que quelqu'un sait d'une solution simple pour cela (ou que je vais devoir écrire une classe pour créer un fichier bmp à partir de zéro?)

Answer 1

J'ai trouvé une bonne solution en travaillant hors de cet exemple de code: rephrase.net/box/bitmap Le auteur m'a aidé à implémenter une fonction qui pourrait transformer un tableau de pixels en un bitmap monochrome. De là, j'ai été capable de prendre des données de canevas et de les parcourir et de les analyser en un tableau de pixels que je pourrais convertir en un bmp monochrome.

J'ai créé cette fonction pour faciliter la conversion des données de toile en fonction des valeurs alpha (puisque les données de toile est monochrome aussi dans mon application) à une matrice de pixels qui peut être utilisé par le script 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); 
} 

Et voici le code pour 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

C'est une solution partielle, car il n'a pas le convertir en bitmap mais un png. La première image que vous voyez est la toile, la seconde est l'image originale, et la troisième est les données de la toile mis dans une image.

si elle a être un bmp, vous pouvez essayer de vérifier cela pour changer les données à un bmp

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