在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");

另请参阅 this answer ，了解如何自行构建和编写BMP格式。

您也可以使用此方法使用低级方法，使用此结果打包位（每8位“需要打包到一个字节，小端用于BMP格式）。” p>

可选择查看更简单的TrueVision TGA file format或TIFF file format，它也允许您使用大端字节（大多数TIFF格式都可以被浏览器读取。）

Answer 2

您可以使用FileSaver.js之类的库。并按照BMP File Format specification手动写出位图文件。

你会用结果数据做这样的事情：

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上查找一些信息。