# webgl-png-compress

> Use WebGL for fast PNG quantization in the browser

Latest version **1.1.0** (published 2018-08-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install webgl-png-compress
pnpm add webgl-png-compress
yarn add webgl-png-compress
bun add webgl-png-compress
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2018-08-02 |
| First published | 2018-07-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Rob Taglang |
| Maintainers | lasalvavida |
| Keywords | webgl, png, compress |

## Links

- npm: https://www.npmjs.com/package/webgl-png-compress
- Repository: https://github.com/lasalvavida/webgl-png-compress
- Homepage: https://github.com/lasalvavida/webgl-png-compress#readme
- Issues: https://github.com/lasalvavida/webgl-png-compress/issues
- npm.io page: https://npm.io/package/webgl-png-compress

## Dependencies (1)

- [crc](https://npm.io/package/crc.md) ^3.5.0

## Alternatives

- [lodash.startswith](https://npm.io/package/lodash.startswith.md) — 769.7K weekly downloads
- [@tarojs/service](https://npm.io/package/@tarojs/service.md) — 33.9K weekly downloads
- [io.extendreality.tilia.indicators.spatialtargets.unity](https://npm.io/package/io.extendreality.tilia.indicators.spatialtargets.unity.md) — 131 weekly downloads
- [@rtarojs/taro](https://npm.io/package/@rtarojs/taro.md) — 90 weekly downloads
- [node-branch-io](https://npm.io/package/node-branch-io.md) — 50 weekly downloads

## Recent versions

- 1.1.0 (latest) — 2018-08-02
- 1.0.0 — 2018-07-26

## README

# webgl-png-compress
ES6 module for fast PNG quantization with WebGL

`npm install webgl-png-compress`

## How do I use it?
This module exposes three functions:

### Compress
```javascript
function compress (imageData, width, height, gl, n, iterations)
```

Use this generate a palette through iterative k-means.

`imageData` should be in raw format as extracted from a 2D canvas.

```javascript
const context = imageCanvas.getContext('2d')
context.drawImage(this.image, 0, 0)
const imageData = context.getImageData(0, 0, this.image.width, this.image.height)

```

`n` cluster centers are placed in the image at random and then the designated number of iterations of k-means are performed
to converge to an optimized palette.

Returns the generated palette.

### Condense Palette
```javascript
function condensePalette (palette, eps=0)
```

Use this to remove degenerate entries from the palette based the tolerence specified as `eps`.

Returns the reduced palette.

### Write PNG
```javascript
function writePNG (imageData, palette, width, height)
```

Creates a buffer containing a quantized PNG with a `PLTE` block from the original `imageData` with
[Floyd-Steinberg dithering](https://en.wikipedia.org/wiki/Floyd%E2%80%93Steinberg_dithering) applied.

Returns the buffer.

## How does it use WebGL?

Each pixel is treated as a vertex with a shader. The shader is used to map the pixel to the closest cluster center.
Rather than iteratively comparing each pixel against the cluster centers, it happens in parallel for all pixels
on your GPU.

It is recommended to downscale large images for palette generation to avoid running out of GPU memory.

---
_Source: https://npm.io/package/webgl-png-compress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._