使用 JavaScript 插入 PNG 注释块（iTXt）

Question

我想在PNG中插入一个UTF-8注释。上下文是在现代浏览器中：导出 - 画布 - 并在用户下载之前将一些元数据添加到PNG中，稍后导入它并读取元数据。 PNG元数据规范，关于iTXt的说明 我在SO上看到了一个好的答案，介绍了所有实现tEXt块的步骤，但没有代码。

我发现了一个简单的nodejs库node-png-metadata来管理PNG元数据。

使用这些资源，我成功地进行了一些技巧，比如插入一个块并读取它，但似乎它不是有效的iTXt块（tEXt块也是如此），因为像pngchunks或pnginfo这样的工具无法理解它。

请查看此工作的fiddle以导入PNG并添加元数据并显示它！使用tEXt或iTXt块进行测试。

Near line 21 some tests around creation of the chunk

var txt = {
  sample: '@à$'
};

var newchunk = metadata.createChunk("tEXt", "Comment"+String.fromCharCode(0x00)+"heremycommentl"); // works but not conform
var newchunk = metadata.createChunk("TEXt", "Comment"+String.fromCharCode(0x00)+"heremycommentl"); // result invalid png
var newchunk = metadata.createChunk("iTXt", "Source"+String.fromCharCode(0x00)+"00fr"+String.fromCharCode(0x00)+"Source"+String.fromCharCode(0x00)+""+JSON.stringify(txt));// works but not conform

如果块类型名称的第一个字符是大写字母，那么生成的PNG文件可能会损坏？TEXt

如果您有任何理解可以分享，欢迎您。

- brouillon

Answer 1

块名称区分大小写，tEXt是块的名称，TEXt不是。由于第一个字母大写，使得该块变得关键，因此没有PNG工具能够理解该图像，因为现在有一个未知的关键块。

iTXt是损坏的，因为压缩标志和方法是直接存储的，而不是作为数字的ASCII表示。将其更改为：

metadata.createChunk("iTXt", "Source"+String.fromCharCode(0x00)+String.fromCharCode(0x00)+String.fromCharCode(0x00)+"fr"+String.fromCharCode(0x00)+"Source"+String.fromCharCode(0x00)+""+JSON.stringify(txt));

让它工作。

metadata.createChunk("tEXt", "Comment"+String.fromCharCode(0x00)+"heremycommentl") 不会导致 pnginfo 任何问题，也许你把这个错误与 iTXt 的错误混淆了？

- smitop