PNG文件格式是一种常见的图片格式，它可以存储很多元数据，如作者、创建时间、相机型号等信息。在前端开发中，需要获取PNG图片的元数据信息来进行相应的操作，那么就需要使用到npm包 png-metadata。本文将为大家介绍如何使用这个npm包。
安装
在使用npm包之前，需要先安装它。在终端中运行以下命令进行安装：
npm install png-metadata --save
使用方法
安装完成后，就可以在JavaScript代码中引入png-metadata包了：
const pngMetadata = require('png-metadata');读取PNG的元数据
在引入包后，即可使用png-metadata提供的API对PNG文件进行读取元数据的操作。例如读取PNG文件的摄像头型号信息：
-- -------------------- ---- ------- ----- -- - -------------- ----- ----------- - ------------------------ ----- -------- - ------------------- ----- ------- - -------------------------- ----- -------- - --------------------- -----------------------------
以上代码中，首先使用fs模块读取文件数据，再将数据传递给pngMetadata方法进行解析，最后打印出图片的摄像头型号信息。其中，metadata是一个对象，包含了PNG文件中的所有元数据信息。
写入PNG的元数据
除了读取PNG文件，我们也可以使用png-metadata来写入PNG的元数据信息。例如，写入图片的作者、日期信息：
-- -------------------- ---- ------- ----- -- - -------------- ----- ----------- - ------------------------ ----- -------- - ------------------- ----- ------- - -------------------------- ----- -------- - --------------------- --------------- - ----- ------ ------------- - --- --------------------- -------------------------- --------------------------- -----------
以上代码中，首先使用pngMetadata方法读取PNG文件的元数据，然后将需要写入的信息(作者和日期)添加到metadata对象中，最后使用pngMetadata.encode方法将元数据信息重新编码，并将编码后的信息写入到PNG文件中。
删除PNG的元数据
删除PNG文件的元数据也很简单，只需要将metadata对象的对应属性置为null即可：
-- -------------------- ---- ------- ----- -- - -------------- ----- ----------- - ------------------------ ----- -------- - ------------------- ----- ------- - -------------------------- ----- -------- - --------------------- --------------- - ----- -------------------------- --------------------------- -----------
以上代码中，只需要将metadata对象的author属性置为null，然后使用pngMetadata.encode方法重新编码并写入PNG文件即可。
示例代码
下面是一个完整的示例代码，读取图片的所有元数据信息并打印出来：
-- -------------------- ---- ------- ----- -- - -------------- ----- ----------- - ------------------------ ----- -------- - ------------------- ----- ------- - -------------------------- ----- -------- - --------------------- ----------------------
总结
本文介绍了npm包png-metadata的使用方法，包括读取、写入和删除PNG文件的元数据信息。通过学习本文，开发者可以在前端开发中更轻松地处理PNG图片的元数据信息，为自己的应用程序提供更多有用的信息。但需要注意，修改PNG文件的元数据信息可能会影响文件的完整性，使用时需要谨慎。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57735