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

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

Canvas 是黑白的。
但是，我只能将toUrlData()与png / jpeg输出一起使用，但是找不到任何方法来生成位图(并将颜色深度更改为1位)。

对于这种类型的转换，有没有可用的解决方案？
还是可以编写位图图像的JavaScript库？

最佳答案

转换为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");

另请参阅 this answer ，以了解如何自己构建和编写BMP格式。
您还可以通过使用此方法的结果来打包位来将此方法用于低级方法(对于BMP格式，每8个“位”都需要打包为一个字节，低位字节序)。
(可选)查看更简单的TrueVision TGA file format或也允许您使用大端字节的TIFF file format(大多数TIFF格式可以由浏览器btw读取)。