PNG.js 技术文档

1. 安装指南

浏览器使用

在HTML页面中，您只需要引入 png.js 和 zlib.js 文件即可。

Node.js 使用

通过npm安装模块：

sudo npm install png-js

2. 项目的使用说明

浏览器使用说明

在HTML页面中包含 png.js 和 zlib.js 文件，并创建一个canvas元素。通过调用 PNG.load 方法来加载图片。

<canvas></canvas>
<script src="zlib.js"></script>
<script src="png.js"></script>
<script>
    var canvas = document.getElementsByTagName('canvas')[0];
    PNG.load('some.png', canvas);
</script>

此代码段将加载名为 some.png 的图片并显示在canvas元素上。该浏览器版本的源代码位于 png.js 文件中，并且还支持加载和显示动画PNG图片。

Node.js 使用说明

在Node.js环境中，首先通过npm安装模块，然后通过require引入模块来解码PNG图片。

var PNG = require('png-js');
PNG.decode('some.png', function(pixels) {
    // pixels 是一个解码后的像素数据的一维数组（按照rgba顺序）
});

如果您想要同步加载PNG（但不解码像素），可以调用 PNG.load 方法。如果您已经拥有PNG数据的buffer，可以直接使用 new PNG(buffer)。在这两种情况下，您需要自己调用 png.decode 方法，该方法会通过回调传递解码后的像素数据。

如果您已经有一个buffer，并且想要将像素复制到这个buffer中，可以使用 copyToImageData 方法，并传入您的buffer和从 decodePixels 返回的解码像素。

3. 项目API使用文档

png.js 提供以下API接口：

• PNG.load(imagePath, canvas)：在浏览器中加载并显示PNG图片。
• PNG.decode(pngData, callback)：解码PNG数据，通过回调函数返回像素数据。
• new PNG(buffer)：通过buffer创建一个PNG对象。
• png.decode()：在Node.js中用于解码PNG对象。
• copyToImageData(buffer, decodedPixels)：将解码后的像素复制到指定的buffer中。

4. 项目安装方式

请参考上述“安装指南”部分，根据您的使用环境选择合适的安装方式。在浏览器中使用时，只需要引入相应的JavaScript文件；在Node.js环境中，则通过npm进行安装。