https://github.com/zprodev/png.es

ECMAScript compliant lightweight PNG editor
https://github.com/zprodev/png.es

esmodules javascript png png-decoder png-encoder

Last synced: 10 days ago
JSON representation

ECMAScript compliant lightweight PNG editor

• Host: GitHub
• URL: https://github.com/zprodev/png.es
• Owner: zprodev
• License: mit
• Created: 2018-10-15T12:44:33.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2021-07-29T20:15:35.000Z (over 3 years ago)
• Last Synced: 2024-12-20T16:11:49.821Z (16 days ago)
• Topics: esmodules, javascript, png, png-decoder, png-encoder
• Language: TypeScript
• Homepage:
• Size: 233 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# png.es

[![npm](https://img.shields.io/npm/v/png.es.svg)](https://www.npmjs.com/package/png.es)

[![Build Size](https://badgen.net/bundlephobia/minzip/png.es)](https://bundlephobia.com/result?p=png.es)

[![Build Status](https://travis-ci.org/zprodev/png.es.svg?branch=master)](https://travis-ci.org/zprodev/png.es)

[![license](https://img.shields.io/github/license/zprodev/png.es.svg)](LICENSE)

ECMAScript compliant lightweight PNG editor

## Support

|Function|BitDepth|TrueColor|GrayScale|Alpha|IndexedColor|Interlace|

|:--|:--|:-:|:-:|:-:|:-:|:-:|

|parse|1, 4, 6, 8|o|o|o|o|x|

|pack|1, 4, 6, 8|o|o|o|x|x|

## Distribution

### npm

```

npm i png.es

```

### files

[for browser](https://github.com/zprodev/png.es/tree/master/dist/browser)

[for CommonJS](https://github.com/zprodev/png.es/tree/master/dist/cjs)

[for ESModules](https://github.com/zprodev/png.es/tree/master/dist/esm)

## Usage

### parse

```

import { parse } from 'png.es';

const pngObject = parse(rawData); // Input type is Uint8Array

```

### pack

```

import { PNG, pack, COLOR_TYPE } from 'png.es';

// 4px * 4px RGBA image

const pngObject = new PNG(4, 4, COLOR_TYPE.RGBA);

pngObject.setData([255, 255, ....]);

const uint8Array = pack(pngObject);

```

### edit

```

import { parse, pack } from 'png.es';

const pngObject = parse(rawData);

pngObject.setPixel(2, 2, [255, 0, 0, 255] ); // Set red to x2y2

const uint8Array = pack(pngObject);

```