# png-js This is a modified version of [png.js](https://github.com/react-pdf/png.js) that is intended to be used for palette swapping within the browser. **NOTE**: Only supports indexed PNGs for obvious reasons. All others will cause IndexedPNG to throw during construction. ## Usage The following shows the process of loading a PNG file and rendering it to a canvas with its palette data reversed. ``` import { IndexedPNG } from '@kettek/png-js/src' import { readFile } from 'fs' readFile("my_png.png", (err, data) => { if (err) throw err // Create an IndexedPNG object from our data. let png = new IndexedPNG(data) // Preemptively decode PNG data (optional). png.decode() // Convert our PNG data into an ImageData, usable by a Canvas. Passed options provide a reversed palette and a clipping. png.toImageData({ palette: png.decodePalette().reverse(), clip: { x: 16, y: 16, w: 32, h: 32 } }) .then(imageData => { // This presumes at least one canvas element exists on the page. document.getElementsByTagName('canvas')[0] .getContext('2d') .putImageData(imageData, 0, 0) }) .catch(err => { throw err }) }) ``` ## Types ### IndexedPNG IndexedPNG([Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer)) : processes PNG data but does not decode it. async decodePixels() : Decodes the PNG pixel data and returns it. decodePalette() : Decodes the PNG palette and returns it as a [Palette](#palette). async decode() : Decodes the palette and the pixel data of the PNG data passed into the constructor. Calls `decodePixels()` and `decodePalette()`. [ImageData](https://developer.mozilla.org/en-US/docs/Web/API/ImageData) async toImageData([ImageDataOptions](#imagedataoptions)) : Returns ImageData. Calls `toPNGData(options)`. [PNGData](#pngdata) async toPNGData([ImageDataOptions](#imagedataoptions)) : Returns PNGData. Calls `decode()` automatically if PNG has not been decoded. ### ImageDataOptions Object containing options to apply during `toImageData()`. | Property | Type | Description |----------|---------------------|--------------- | palette | [Palette](#palette) | Palette data to use for decoding. | clip | [Clip](#clip) | Clipping options to use for decoding. #### Palette A [Buffer](https://nodejs.org/api/buffer.html#buffer_class_buffer) or Array containing the palette RGBA palette data. ``` let palette = [ 255, 0 , 0 , 255, // Index 0 0 , 255, 0 , 255, // Index 1 0 , 0 , 255, 255, // Index 2 ... ] ``` #### Clip Options to clip pixel data. | Property | Type | Defaults | Description |----------|--------|--------------|------------- | x | Number | 0 | Starting X coordinate. | y | Number | 0 | Starting Y coordinate. | w | Number | width - x | Width of clip. | h | Number | height - y | Height of clip. ``` let clip = { x: 16, y: 16, w: 32, h: 32, } ``` ### PNGData Object containing the pixel data and row width. | Property | Type |----------|------------ | pixels | [Uint8ClampedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8ClampedArray) | RGBA pixel data. | width | Number | Width of each row of pixel data.