在JavaScript中從HTML畫布創建1位位圖

Question

我需要從HTML5畫布中獲取1位位圖。

畫布是黑白的。 但是，我只能將toUrlData（）與png / jpeg輸出一起使用，但是找不到任何方法來生成位圖（並將顏色深度更改為1位）。

對於這種類型的轉換，有沒有可用的解決方案？ 還是可以編寫位圖圖像的JavaScript庫？

Answer 1

轉換為1位

Canvas沒有內置的機制可以保存1位圖像。 Canvas是32位（24位顏色，8位Alpha），這將要求標准使用通用算法來降低圖像質量（這很可能導致您無法從中保存GIF文件，而只能保存支持24位的格式）位或更多）。

為此，您需要進入低級並使用Typed Arrays建立自己的文件格式。

如果1位文件格式不是絕對要求，即您希望圖像看起來像1位，則您可以自己轉換內容。

您可以使用此方法通過將RGB轉換為亮度值並將圖像轉換為“ 1位”，並使用閾值確定其應為“開”還是“關”：

 var ctx = c.getContext("2d"), img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0, c.width, c.height); // Main code var idata = ctx.getImageData(0, 0, c.width, c.height), buffer = idata.data, len = buffer.length, threshold = 127, i, luma; for (i = 0; i < len; i += 4) { // get approx. luma value from RGB luma = buffer[i] * 0.3 + buffer[i + 1] * 0.59 + buffer[i + 2] * 0.11; // test against some threshold luma = luma < threshold ? 0 : 255; // write result back to all components buffer[i] = luma; buffer[i + 1] = luma; buffer[i + 2] = luma; } // update canvas with the resulting bitmap data ctx.putImageData(idata, 0, 0); }; img.crossOrigin = ""; img.src = "//i.imgur.com/BrNTgRFl.jpg"; 

 <canvas id=c width=500 height=400></canvas> 

要將其保存為BMP文件（雖然不是所有瀏覽器都支持的24位）：

var bmp = canvas.toDataURL("image/bmp");

另請參閱此答案，以了解如何自己構建和編寫BMP格式。

您還可以通過使用此方法的結果來打包位來將此方法與低級方法一起使用（對於BMP格式，每8個“位”都需要打包為一個字節，低位字節序）。

（可選）查看更簡單的TrueVision TGA文件格式 ，或者也可以使用big-endian字節的TIFF文件格式 （大多數TIFF格式可以由瀏覽器讀取）。

Answer 2

您可以使用FileSaver.js之類的庫。 然后按照BMP文件格式規范手動寫出位圖文件。

您將對結果數據執行以下操作：

function saveData() {
    var arrayBuffer = new ArrayBuffer(data.length);
    var dataView = new DataView(arrayBuffer);
    for(var i = 0; i < data.length; i ++) {
        dataView.setUint8(i, data.charCodeAt(i));
    }
    var blob = new Blob([dataView], {type: "application/octet-stream"});
    saveAs(blob, "test.bmp");
}

如果您要這樣做，可能需要在ArrayBuffer和DataView上查找一些信息。