Question

我在画布上有一个图像。我想包含一些简单的文本元数据，而无需安装额外的库。查看toDataURL的结果，这似乎可以通过从toDataURL结果解析base64数组并在IDAT块之前插入具有length，type，key：content和crc bytes的块。但是，我无法将base64数组与https://www.w3.org/TR/PNG-Structure.html中描述的png结构相匹配。例如，前8个字节应该是带小数的签名字节：137 80 78 71 13 10 26 10.但是toDataURL结果中的第一个ASCii字符（在数据之后：image / png; base64，＆＃34;前缀）是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块附加到画布数据数组中并将其保存为javascript中的png文件？

1 个答案: