將HTML5畫布另存爲單色bmp

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

來源

2011-08-09 Mark Brouch

打賭你一個不錯的JPG或PNG圖片會比你的單色位圖，甚至更小的... – Blindy

一定是因爲我所使用的文件的單色BMP。 –

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

來源

2011-08-11 21:38:07

你叫什麼'bmp_mono'函數？ – fresskoma

與jsbmp中的bmp_rgb函數相同，但單色bmp除外。 –

是的，但它的來源在哪裏？如果缺少一個完整的功能，這不是一個好的答案，你不覺得嗎？ :) – fresskoma