Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

upng-js

Package Overview
Dependencies
Maintainers
2
Versions
4
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

upng-js

Small, fast and advanced PNG / APNG encoder and decoder

  • 2.1.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
2
Created
Source

UPNG.js

A small, fast and advanced PNG / APNG encoder and decoder. It is the main PNG engine for Photopea image editor.

Download and include the UPNG.js file in your code, or get it from NPM:

npm install upng-js

Encoder

UPNG.js supports APNG and the interface expects "frames". Regular PNG is just a single-frame animation (single-item array).

UPNG.encode(imgs, w, h, cnum, [dels])
  • imgs: array of frames. A frame is an ArrayBuffer containing the pixel data (RGBA, 8 bits per channel)
  • w, h : width and height of the image
  • cnum: number of colors in the result; 0: all colors (lossless PNG)
  • dels: array of delays for each frame (only when 2 or more frames)
  • returns an ArrayBuffer with binary data of a PNG file

UPNG.js can do a lossy minification of PNG files, similar to TinyPNG and other tools. It performs color quantization using the k-means algorithm.

Lossy compression is allowed by the last parameter cnum. Set it to zero for a lossless compression, or write the number of allowed colors in the image. Smaller values produce smaller files. Or just use 0 for lossless / 256 for lossy.

Decoder

Supports all color types (including Grayscale and Palettes), all channel depths (1, 2, 4, 8, 16), interlaced images etc. Opens PNGs which other libraries can not open (tested with PngSuite).

UPNG.decode(buffer)
  • buffer: ArrayBuffer containing the PNG file
  • returns an image object with following properties:
    • width: the width of the image
    • height: the height of the image
    • depth: number of bits per channel
    • ctype: color type of the file (Truecolor, Grayscale, Palette ...)
    • frames: additional info about frames (frame delays etc.)
    • tabs: additional chunks of the PNG file
    • data: pixel data of the image

PNG files may have a various number of channels and a various color depth. The interpretation of data depends on the current color type and color depth (see the PNG specification).

UPNG.toRGBA8(img)
  • img: PNG image object (returned by UPNG.decode())
  • returns an array of frames. A frame is ArrayBuffer of the image in RGBA format, 8 bits per channel.

Example

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.

PNG format uses the Inflate algorithm. Right now, UPNG.js calls Pako.js for the Inflate and Deflate method.

Keywords

FAQs

Package last updated on 12 Dec 2017

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc