webgl-png-compress v1.1.0
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
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.
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
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
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 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.