在javascript中从HTML Canvas创建1位位图

Question

我需要从HTML5 Canvas中获取1位位图.

画布是黑白的.但是,我只能使用带有png/jpeg输出的toUrlData(),但找不到任何生成位图的方法(并将颜色深度更改为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格式.

您也可以使用此方法使用低级方法,使用此结果来打包位(每8个"位"需要打包到一个字节中,小端用于BMP格式).

可选择查看更简单的TrueVision TGA文件格式,或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的一些信息。