# @fitbit/pngjs 中文文档

规范地址：https://npmcn.com/package/%40fitbit/pngjs/

版本：3\.3\.3-fitbit\.4
npm 元数据更新时间：2022-04-05T11:03:52.967Z
中文译文更新时间：2026-11-14T20:35:33.820Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fitbit/pngjs
原文对照：https://npmcn.com/package/%40fitbit/pngjs/?lang=original
项目主页：https://github.com/lukeapage/pngjs
源码仓库：https://github.com/lukeapage/pngjs2

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：137 kB，27 个文件
- 模块格式：CommonJS
- TypeScript 类型：未声明
- Node.js 要求：\>=4\.0\.0
- 运行依赖：0 个
- 首次发布：2018-08-22T22:08:10.570Z
- 最新版本发布：2018-08-27T10:31:17.256Z
- 近 30 天下载量：3365（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：5（近 12 个月 0 个）

## 中文简介

PNG 编码器/解码器在纯 JS 中,支持任意位大小并Interlace,async并同步与全测试套件.

## 安装

```sh
npm install @fitbit/pngjs
```

也可以使用：`pnpm add @fitbit/pngjs`、`yarn add @fitbit/pngjs`、`bun add @fitbit/pngjs`

## README

[![Build Status](https://travis-ci.org/lukeapage/pngjs.svg?branch=master)](https://travis-ci.org/lukeapage/pngjs) [![Build status](https://ci.appveyor.com/api/projects/status/tb8418jql1trkntd/branch/master?svg=true)](https://ci.appveyor.com/project/lukeapage/pngjs2/branch/master) [![Coverage Status](https://coveralls.io/repos/lukeapage/pngjs2/badge.svg?branch=master&service=github)](https://coveralls.io/github/lukeapage/pngjs2?branch=master) [![npm version](https://badge.fury.io/js/pngjs.svg)](http://badge.fury.io/js/pngjs)

# 弹簧

[![Greenkeeper badge](https://badges.greenkeeper.io/lukeapage/pngjs.svg)](https://greenkeeper.io/) 没有依赖性的Node.js的简单PNG编码器/解码器.

根据原件 [弹簧](https://github.com/niegowski/node-pngjs) 与后面的增强.

-   支持读取 1,2,4 & 16 位文件
-   支持读取间隔文件
-   支持读取 `tTRNS` 透明颜色
-   支持写入颜色类型 0 (grayscale),颜色类型 2 (RGB),颜色类型 4 (grayscale alpha)和颜色类型 6 (RGBA)
-   同步接口以及同步
-   API 兼容 pngjs 和 节点- pngjs

已知缺乏支持:

-   扩展 PNG 例如动画
-   以颜色类型 3 (索引颜色) 写入

# 目录

-   [所需资源](https://npmcn.com/package/%40fitbit/pngjs/#readme-requirements)
-   [比较表](https://npmcn.com/package/%40fitbit/pngjs/#readme-comparison-table)
-   [测试](https://npmcn.com/package/%40fitbit/pngjs/#readme-tests)
-   [安装](https://npmcn.com/package/%40fitbit/pngjs/#readme-installation)
-   [浏览器](https://npmcn.com/package/%40fitbit/pngjs/#readme-browserify)
-   [示例](https://npmcn.com/package/%40fitbit/pngjs/#readme-example)
-   [自动同步 API](https://npmcn.com/package/%40fitbit/pngjs/#readme-async-api)
-   [同步 API](https://npmcn.com/package/%40fitbit/pngjs/#readme-sync-api)
-   [更改日志](https://npmcn.com/package/%40fitbit/pngjs/#readme-changelog)

# 所需资源

-   节点.js v4(用更老的v2.3.0表示0.10/0.12/iojs支持)

# 比较表

| 名称 | 伪造来源 | 同步 | 自动同步 | 16 位点 | 1/2/4 位数 | 间隔 | 伽玛 | 编码 | 已测试 |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| 弹簧 |  | 对 | 对 | 对 | 对 | 对 | 对 | 对 | 对 |
| 节点-png | 弹簧 | 没有 | 对 | 没有 | 没有 | 没有 | 隐藏 | 对 | 手动 |
| png 编码器 | 弹簧 | 没有 | 对 | 对 | 没有 | 没有 | 隐藏 | 对 | 手动 |
| pngparse 磁盘 |  | 没有 | 对 | 没有 | 对 | 没有 | 没有 | 没有 | 对 |
| pngparse 同步 | pngparse 磁盘 | 对 | 没有 | 没有 | 对 | 没有 | 没有 | 没有 | 对 |
| png-sync (英语) |  | 没有 | 对 | 没有 | 没有 | 没有 | 没有 | 对 | 对 |
| 弹出 |  | 没有 | 对 | 没有 | 没有 | 没有 | 没有 | 没有 | 没有 |

原生 C++ 节点解码器 :

-   树
-   png- sync (上面的同步版本)
-   像素 - png
-   缩写

# 测试

测试使用 [PNG 套间](http://www.schaik.com/pngsuite/)。我们把每个文件读入 pngjs , 以标准 8bit 颜色、 同步和同步输出, 然后将原始文件与新保存的图像进行比较 .

要运行测试, 获取 repo( 测试不通过 npm 分发) 并安装 `npm i`运行 `npm test`。 。 。 .

唯一没有转换的是伽玛校正——这是因为多家销售商会以不同方式进行伽玛校正,因此测试在不同浏览器上会有不同的结果.

此外,在PhantomJS中,我们对16位图像使用相容性为3,因为PhantomJS似乎对下缩放16位图像有不符合的规则.

# 安装

```
$ npm install pngjs  --save
```

# 浏览器

使用 [浏览器](https://npmcn.com/package/%40fitbit/pngjs/browserify.org) 以构建一个可以运行客户端的库:

```
$ browserify lib/png.js --standalone png > bundle.js
```

那么,根据你的模块系统,你也可以 `require('bundle.js')` 或者如果你没有使用模块加载器 你可以使用普通的老式 `<script src="bundle.js"></script>` 标签和库将在 `window.PNG` 或者说 `PNG`。 。 。 .

# 示例

```js
var fs = require('fs'),
    PNG = require('pngjs').PNG;

fs.createReadStream('in.png')
    .pipe(new PNG({
        filterType: 4
    }))
    .on('parsed', function() {

        for (var y = 0; y < this.height; y++) {
            for (var x = 0; x < this.width; x++) {
                var idx = (this.width * y + x) << 2;

                // invert color
                this.data[idx] = 255 - this.data[idx];
                this.data[idx+1] = 255 - this.data[idx+1];
                this.data[idx+2] = 255 - this.data[idx+2];

                // and reduce opacity
                this.data[idx+3] = this.data[idx+3] >> 1;
            }
        }

        this.pack().pipe(fs.createWriteStream('out.png'));
    });
```

更多实例见 `examples` 文件夹.

# 自动同步 API

由于输入任意颜色类型都被接受(grayscale,rgb,调色板,灰度有α,rgb有α),但每个样本有8位(channel)是唯一被支持的比特深度. 不支持连接模式 .

## 类别:巴布亚新几内亚

`PNG` 可读和可写 `Stream`。 。 。 .

### 选项

-   `width` - 用这个 `height` 如果您想要从零开始创建 png
-   `height` - 如上所述
-   `checkCRC` - 解析器是否应当严格处理源流中的校验和(默认: `true`(中文(简体) )
-   `deflateChunkSize` - 用于缩小数据块的块大小,应为2个功率,且不得少于256个和32\*1024个(默认:32克B)
-   `deflateLevel` - 降压压缩级( 默认: 9)
-   `deflateStrategy` - 降压压缩策略(默认:3)
-   `deflateFactory` - 降压流工厂(默认: `zlib.createDeflate`(中文(简体) )
-   `filterType` - 扫描行的 png 过滤方法( 默认 : - 1- 自动, 接受数字 0-4)
-   `colorType` - 输出颜色 Type - 见常数。 0=灰度,无相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相相 默认当前为 6, 但在未来可能会计算出最佳模式 .
-   `inputColorType` - 输入颜色Type - 见常数。 默认为 6 (RGBA)
-   `bitDepth` - 输出的比特深度, 8或16比特。 输入数据预计将有这一比特深度. 系统内侧度中预计有16位数据(默认:8)
-   `inputHasAlpha` - 输入位图是否每个像素有4个字节(rgb和alpha)或3个(rgb - no alpha) .
-   `bgColor` - 含有红色、绿色和蓝色值在0至255之间的物体 如果不包括α,则用于包装PNG(默认:255,255,255)

### 事件“ 元数据”

`function(metadata) { }` 图像头已解析,元数据包含此信息:

-   `width` 图像大小, 像素
-   `height` 图像大小, 像素
-   `palette` 图像被淡化
-   `color` 图像不是灰度
-   `alpha` 图像包含 alpha 通道
-   `interlace` 图像是相接的

### 事件:"被隔离"

`function(data) { }` 输入图像已完全解析, `data` 完成并准备进行修改.

### 事件:"错误"

`function(error) { }`

### png.parse(数据,\[召回\])

解析 PNG 文件数据 。 可能会 `String` 或者说 `Buffer`。也可以将数据流到PNG实例中.

可选 `callback` 曾经被调用 `error` 或者说 `parsed`。召回会得到 两个论点 `(err, data)`。 。 。 .

回返 `this` 用于方法链.

#### 示例

```js
new PNG({ filterType:4 }).parse( imageData, function(error, data)
{
    console.log(error, data)
});
```

### png.pack () (中文(简体) )

开始将数据转换为 PNG 文件流 .

回返 `this` 用于方法链.

### png.bitblt (dst, sx, sy, w, h, dx, dy) (英语)

用于图像操作的帮助器,从当前(即源)图像复制一个像素矩形(`sx`, (中文(简体) ), `sy`, (中文(简体) ), `w`, (中文(简体) ), `h`改为: `dst` 图像( 在 `dx`, (中文(简体) ), `dy`) (中文(简体) ).

回返 `this` 用于方法链.

例如,以下代码复制了左上方的 100x50 px of `in.png` 写到dst并写到 `out.png`数字 :

```js
var dst = new PNG({width: 100, height: 50});
fs.createReadStream('in.png')
    .pipe(new PNG())
    .on('parsed', function() {
        this.bitblt(dst, 0, 0, 100, 50, 0, 0);
        dst.pack().pipe(fs.createWriteStream('out.png'));
    });
```

### 属性: 调整Gamma ()

获取数据并调整数据以被伽玛校正的帮助者. 请注意, 它不百分之百可靠, 并且颜色透明, 因为这需要知道位图的背景颜色 .

在针对PNG套房的测试中,它将所有8位和下方图像的铬比作100%. 在IE上有些分歧.

以下示例读取一个文件,将伽玛(将伽玛设置为0)调整并再写出,有效去除图像中的任何伽玛校正.

```js
fs.createReadStream('in.png')
    .pipe(new PNG())
    .on('parsed', function() {
        this.adjustGamma();
        this.pack().pipe(fs.createWriteStream('out.png'));
    });
```

### 属性: 宽度

图像以像素显示的宽度

### 属性:高度

像素图像的高度

### 属性:数据

图像像素数据的缓冲. 每个像素由4个字节组成:R,G,B,A(不透明).

### 属性:γ

图像的伽玛( 如果未指定则为 0)

## 包装一个 PNG并去除α( RGBA to RGB)

从图像中去除α通道时,需要有一个背景颜色才能正确 将每个像素的透明度转换为适当的RGB值。 默认情况下, pngjs 会平地 在白色背景下的图像。 您可以在选项中覆盖此选项 :

```js
var fs = require('fs'),
    PNG = require('pngjs').PNG;

fs.createReadStream('in.png')
    .pipe(new PNG({
        colorType: 2,
        bgColor: {
            red: 0,
            green: 255,
            blue: 0
        }
    }))
    .on('parsed', function() {
        this.pack().pipe(fs.createWriteStream('out.png'));
    });
```

# 同步 API

## PNG. sync (英语)

### PNG.sync.read(缓冲)

取出缓冲器并返回 PNG 图像 。 图像上的属性包括元数据和 `data` 根据上文Aync API.

```
var data = fs.readFileSync('in.png');
var png = PNG.sync.read(data);
```

### PNG. sync.write (png) (英语)

取 PNG 图像并返回缓冲器 。 图像上的属性包括元数据和 `data` 根据上文Aync API.

```
var data = fs.readFileSync('in.png');
var png = PNG.sync.read(data);
var options = { colorType: 6 };
var buffer = PNG.sync.write(png, options);
fs.writeFileSync('out.png', buffer);
```

### PNG. adjust Gamma( src) (英语)

调整同步图像的伽马。 参见Aync调整Gamma.

```
var data = fs.readFileSync('in.png');
var png = PNG.sync.read(data);
PNG.adjustGamma(png);
```

# 更改日志

### 3.3.3 - 2018年4月19日 (中文(简体) )

-   节点9的真正修复

### 3.3.2-2013年02月16日 (中文(简体) )

-   修复节点9

### 3.3.1 - 2017年11月15日 (中文(简体) )

-   错误修正和去除 es6

### 3.3.0 (单位:千美元)

-   添加写入 16 比特 通道和支持灰度输入

### 2017年4月30日至4月3日,日内瓦

-   支持编码 8- 位灰度图像

### 2017年4月30日至4月3日,日内瓦

-   支持使用 zlib 块的 png ,这些块在有效数据后会变形

### 3.0.1 - 16/02/2017 (中文(简体) )

-   修复单个像素平方英寸

### 3.0.0 - 03/08/2016 (中文(简体) )

-   放弃对 v4 和 iojs 下的节点的支持 。 用旧的、不支持的或补丁的节点版本使用 Pin to 2.3.0.

### 2.3.0 - 2016年4月22日 (中文(简体) )

-   支持节点0.10中的同步

### 2.2.0 - 2015年12月4日 (中文(简体) )

-   添加同步写入 api
-   修正新文件示例
-   正确的比较表

### 2.1.0 - 2015年10月28日 (中文(简体) )

-   将软件包重命名为 pngjs
-   添加“ bg 颜色” 选项

### 2015年10月2.0-08日 (中文(简体) )

-   要读取的校正
-   _断开更改_ - png原型上的bitblt 现在不需要一个未使用,不必要的src第一次论证

### 1.2.0 - 2015年9月13日 (中文(简体) )

-   支持过色 Type 写入 PNG 的并写入不包含 alpha 信息的位图

### 1.1.0 -- -- 2015年9月7日

-   支持通过解压厂进行控制压缩

### 1.02 - 2015年8月22日 (中文(简体) )

-   曝光所有 PNG 创建信息

### 1.0.1 - 2015年8月21日 (中文(简体) )

-   修复非正方形相间文件

### 1.0.0 - 2015年8月8日 (中文(简体) )

-   更多测试
-   来源已嵌入
-   可维护性重构
-   async API - 正在读取的例外发送警告
-   文档改进 - 同步 api 现在已记录, 调整 Gamma 已记录
-   打破更改 - 伽玛块已写入 。 之前读过之后的文字会破坏伽马信息 现在它一直存在.

### 0.03 - 2015年8月3日 (中文(简体) )

-   处理修正出错
-   忽略较小 npm 脚印的文件

### 0.02 - 2015年8月2日 (中文(简体) )

-   连接的臭虫修复, 支持透明颜色

### 0.01 - 2015年8月2日 (中文(简体) )

-   初出品,见pngjs 关于更古老的变换日志.

# 许可证

(麻省理工学院的执照)

特此免费准许任何人获得副本 ,用于处理 在软件中不受限制,包括不受限制的权利 使用、复制、修改、合并、出版、分发、分许可证和/或出售 软件的复制件,并允许该软件所针对的人 满足下列条件:

上述版权通知和本许可通知应列入 软件的所有副本或大部分.

软件是提供的"AS IS", 没有任何的恐惧, EXPRESS OR ,包括但不限制于雇佣军的保障, 特别目的和非目的的证明。 绝对不会 B. 任何索赔、索赔或其他索赔的索赔人或 责任,在契约、契约或其他行为中,产生于, 或与溶剂或溶剂的使用或 软件.

## 常见问题

### @fitbit/pngjs 是什么？

PNG 编码器/解码器在纯 JS 中,支持任意位大小并Interlace,async并同步与全测试套件\.

### 如何安装 @fitbit/pngjs？

在项目目录运行 npm install @fitbit/pngjs，或使用 pnpm add / yarn add / bun add。

### @fitbit/pngjs 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fitbit\_\_pngjs 是否存在。

### @fitbit/pngjs 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @fitbit/pngjs 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=4\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @fitbit/pngjs 可以商用吗？

@fitbit/pngjs 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fitbit/pngjs 的下载量有多少？

根据 npm 官方下载统计，@fitbit/pngjs 在 2026/10/15 – 2026/11/13 这 30 天内被下载 3,365 次，日均约 112 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fitbit/pngjs 还在维护吗？

最新版本 3\.3\.3-fitbit\.4 发布于 2018/08/27（8 年前）；至今共发布 5 个版本，其中过去 12 个月发布了 0 个；首次发布于 2018/08/23。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。

