如何将 tExt 块附加到 canvas 数据数组并将其另存为 javascript 中的 png 文件？

Question

我在 canvas 中有一张图片。我想包含一些简单的文本元数据，而无需安装额外的库。查看 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 字符（在数据之后：image/png；base64，"前缀) 是 iVBORw0。它如何匹配预期的签名？

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

谢谢！

Answer 1

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

  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

如何将 tExt 块附加到 canvas 数据数组并将其另存为 javascript 中的 png 文件？

How can I append a tExt chunk into a canvas data array and save it as a png file in javascript?

javascript

arrays

png

canvas

chunks