使用 javascript 插入 PNG 注释块 (iTXt)答案

【问题标题】：Insert PNG comment block (iTXt) using javascript使用 javascript 插入 PNG 注释块 (iTXt)
【发布时间】：2019-03-04 02:15:00
【问题描述】：

我想在 PNG 中插入 UTF-8 注释。上下文在现代浏览器中：导出 -canvas- 并在用户下载之前将一些元数据添加到 PNG 中，然后导入并读取元数据。

PNG specs for metadata, says about iTXt

我看到了一个good answer here on SO，其中包含实现文本块的所有步骤，但没有代码。

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

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

请参阅此working fiddle 播放导入 PNG 它将添加元数据并显示它！使用 tEXt 或 iTXt 块进行测试

在第 21 行附近，围绕创建块进行了一些测试

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 是否已损坏？文本

如果大家有理解的分享，欢迎交流

【问题讨论】：

标签： javascript png metadata

【解决方案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 混淆了？

【讨论】：