### Decoding PNG and Converting to RGBA8 with UPNG.js

Source: https://github.com/photopea/upng.js/blob/master/README.md

This example illustrates the basic process of decoding a PNG file's ArrayBuffer using `UPNG.decode` and then converting the resulting image object's pixel data into the standard 8-bit RGBA format per channel using `UPNG.toRGBA8`. It shows how to access the first frame's RGBA data.

```JavaScript
var img  = UPNG.decode(buff);        // put ArrayBuffer of the PNG file into UPNG.decode
var rgba = UPNG.toRGBA8(img)[0];     // UPNG.toRGBA8 returns array of frames, size: width * height * 4 bytes.
```

--------------------------------

### Quantizing Image Data with UPNG.js

Source: https://github.com/photopea/upng.js/blob/master/README.md

This snippet demonstrates how to call the `UPNG.quantize` function. It takes image sample data (`data`) as an ArrayBuffer and a desired palette size (`psize`) as input. The function returns an object containing the remapped data (`abuf`), color indices (`inds`) if the palette size is small, and the generated palette (`plte`).

```JavaScript
var res  = UPNG.quantize(data, psize);
```

--------------------------------

### Encoding RGBA Data to PNG with UPNG.js

Source: https://github.com/photopea/upng.js/blob/master/README.md

This snippet demonstrates how to take raw RGBA pixel data, typically obtained from a canvas context or generated manually, and encode it into a PNG format using the `UPNG.encode` function. It shows how to prepare the data buffer and call the encoding function with image dimensions and color options.

```JavaScript
var dta = ctx.getImageData(0,0,200,300).data;  // ctx is Context2D of a Canvas
//  dta = new Uint8Array(200 * 300 * 4);       // or generate pixels manually
var png = UPNG.encode([dta.buffer], 200, 300, 0);   console.log(new Uint8Array(png));
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.