如何将 tExt 块附加到画布数据数组中并将其保存为 javascript 中的 png 文件？答案

【问题标题】：How can I append a tExt chunk into a canvas data array and save it as a png file in javascript?如何将 tExt 块附加到画布数据数组中并将其保存为 javascript 中的 png 文件？
【发布时间】：2017-11-13 08:14:33
【问题描述】：

我在画布中有一张图片。我想包含一些简单的文本元数据，而不需要安装额外的库。查看 toDataURL 的结果，这似乎可以通过从 toDataURL 结果解析 base64 数组并在 IDAT 块之前插入具有长度、类型、键：内容和 crc 字节的块。但是，我无法将 base64 数组与https://www.w3.org/TR/PNG-Structure.html 中描述的 png 结构相匹配。例如，前 8 个字节应该是带有小数的签名字节：137 80 78 71 13 10 26 10。但是 toDataURL 结果中的第一个 ASCii 字符（在 data:image/png; base64," 前缀之后）是iVBORw0. 这与预期的签名如何匹配？

我正在使用 javascript，并且转换是在客户端完成的。

谢谢！

【问题讨论】：

你得到的dataURI是二进制数据的base64版本。您必须先对其进行解码，甚至使用 canvas.toBlob 返回的 blob 中的 arrayBuffer，而不是使用 toDataURL
太棒了！非常感谢您的回复，@Kaiido！

标签： javascript arrays canvas png chunks

【解决方案1】：

感谢 Kaiido 上面的评论，我在这里使用 base64-binary.js 代码成功解码了 toDataURL 数组：http://blog.danguer.com/2011/10/24/base64-binary-decoding-in-javascript/。这是如何使用它的sn-p：

  pngLayer = layerToSave.canvas.toDataURL();
  var uintArray = Base64Binary.decode(pngLayer.replace(/data:image\/png;base64,/,''));
  console.log("signature:", uintArray.slice(0,8));
  console.log("chunk 1 length:", uintArray.slice(8,12));
  console.log("chunk 1 type:", uintArray.slice(12,18));

此 c 代码作为如何使用 png 结构的示例也很有帮助：https://github.com/gbenison/png-text-embed/blob/master/png-text-append.c

【讨论】：