將HTML5畫布另存爲單色bmp

Question

我有一個HTML5畫布元素，我想將其作爲單色bmp保存到服務器。我已經看到了將它保存爲彩色bmp的例子，但是由於尺寸和顏色空間的限制，我的應用程序需要它是一個小的單色bmp。有誰知道這是一個簡單的解決方案的（還是我將不得不寫一個類從頭創建一個bmp文件？）

Answer 1

我找到了一個很好的解決方案通過關閉這個示例代碼的工作：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); 
} 

Answer 2

Live Demo

這是一個部分解決方案，因爲它不將其轉換爲位圖，但是是一個PNG。您看到的第一張圖像是畫布，第二張是原始圖像，第三張是從畫布放入圖像的數據。

如果有是一個bmp，你可以嘗試檢查了這一點，對數據改變爲BMP

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