我在TypeScript中创建了一个UserScript，允许用户将特定的<canvas>下载为.png文件。这个<canvas>是一个装扮游戏中的服装。我希望在导出的.png中包含一个JSON blob，以便用户稍后可以导入这个.png并访问服装的数据。数据插入应该是非破坏性的（无隐写术）。如何在JavaScript的PNG文件中插入任意数据？
<canvas>
.png
pftdvrlh1#
老问题，但我想我会分享我的想法，以防有人遇到类似的问题。我相信保存画布本质上是通过base 64编码图像数据来工作的，所以我不认为会有一种方法来做你想要的事情。您可以将数据发送到服务器并在那里附加任何您想要的元数据。我相信PNG格式支持任意元数据。但是，您也可以使用透明像素的RGB通道以“非破坏性”的方式对数据进行编码（假设存在透明像素），因为它们是透明的，所以RGB值并不重要。如果您没有足够的空间，有几个选项：
此外，如果只使用非透明像素的最低有效位，则可以采用不会显著降低图像质量的方式对更多数据进行编码。还可以通过只接触棋盘/抖动图案中的像素来减少图像质量下降。
1条答案
按热度按时间pftdvrlh1#
老问题，但我想我会分享我的想法，以防有人遇到类似的问题。
我相信保存画布本质上是通过base 64编码图像数据来工作的，所以我不认为会有一种方法来做你想要的事情。
您可以将数据发送到服务器并在那里附加任何您想要的元数据。我相信PNG格式支持任意元数据。
但是，您也可以使用透明像素的RGB通道以“非破坏性”的方式对数据进行编码（假设存在透明像素），因为它们是透明的，所以RGB值并不重要。
如果您没有足够的空间，有几个选项：
此外，如果只使用非透明像素的最低有效位，则可以采用不会显著降低图像质量的方式对更多数据进行编码。还可以通过只接触棋盘/抖动图案中的像素来减少图像质量下降。