New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

pngout

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pngout

Enhanced PNG export for HTML5 Canvas

  • 0.6.5
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

pngout

Enhanced PNG export for HTML5 canvas. Obtain smaller and non-lossy PNG files directly with no external service required.

Uses pure JavaScript running directly in the browser (or via Node.js).

pngout gives you access to powerful and advanced parameters to tweak to reduce size, increase performance and improve memory usage.

pngout can optimize and save out smaller file sizes than the browser, supports cropping region and scale, custom compression levels, two heuristic models for compression analysis, various color modes, optionally remove the alpha channel pre-multiplied or not, define gamma, add copyright, software, timestamp and custom chunks, activate optional 24-bit lossy mode, tweak deflate parameters and more.

pngout support custom chunks insertion.

pngout PNG files are built from scratch giving full control.

pngout uses Promises but can fallback to standard callbacks

pngout can be used in Web Workers.

Features

NOTE - Currently in alpha version -

  • Conforms to the PNG encoder requirements, section 15.2.2
  • Low-level implementation with high-level API
  • Can produce smaller sized files than the browser's built-in method
  • Can export in various formats (24-bit color or grayscale with or without alpha channel)
  • Uses promises or callbacks, and is asynchronous and non-blocking
  • Auto-detects source format (removes alpha channel if not used, saves as grayscale if no colors)
  • Two heuristic models (normal and deep) included to make compression optimal, as well as a fast mode.
  • Compression ratio can be set manually (10 different levels)
  • Access to advanced deflate options for tweaking performance/memory
  • Can control scanline filter type manually (performance)
  • Supports crop-region on export
  • Support scale on export
  • Convert color to true grayscale format using industry standard REC-709 or REC-601
  • Can pre-multiply with custom color when alpha channel is removed
  • Quantize colors (7 levels) for RGB use. Suitable for flat colored graphics (diagrams, vectors etc.) and for increased compression.
  • Optionally embed timestamp information chunk
  • Optionally embed software information chunk
  • Optionally embed author information chunk
  • Optionally embed copyright information chunk
  • Optionally embed gamma information chunk
  • Can insert custom chunks (handles file format, CRC-32 and chunk header internally)
  • Use optional callback for progress and phase.
  • Can be used from a Web Worker (see tutorial section in docs/ and demo in www/ folder).
  • TODO: Indexed color palette support
  • TODO: png-animations

Includes an optional patch for the canvas element's toBlob() which allows for all features of pngout.

Trivia and tips

Can export result to four different formats: Blob, Object-URL, Data-URI or ArrayBuffer.

Automatically checks if the source data is grayscale (with tolerance for small variations) as well as if contains a non-opaque alpha and selects optimized matching output format. Can be manually overridden.

Can pre-multiply using any color so you can export transparent content on top of for example a white background instead of black.

You can define a crop region as well as scale when exporting.

Add informative chunks such as copyright, software used to produce the file, author name, timestamp and gamma information.

You can really squash the file size using deep heuristic mode, higher compression settings as well as optionally apply a lossy quantize pass for the lower bits. Combine this with auto mode to produce grayscale and none-alpha when this is optimal. And you can even tweak deflate low-level parameters.

Color to grayscale conversion uses standard luma conversion formulas to produce standard conversions. Also use grayscale if you only have black and white (or gray) colors in the canvas.

Things like photos doesn't have an alpha-channel so this can be removed automatically or manually to reduce file size.

Requirements

  • Requires ezlib deflate (included)

pngout can be used without Promises if you intend to target older browsers. Just provide callbacks as additional arguments instead (see docs) or use a Promise polyfill.

And as always, cross-origin resource sharing (CORS) must be fulfilled as with toDataURL(), toBlob() etc.

Install

pngout can be installed in various ways:

  • Bower: bower install pngout

  • NPM: npm install -g pngout

  • Git using HTTPS: git clone https://github.com/epistemex/pngout.git

  • Git using SSH: git clone git@github.com:epistemex/pngout.git

  • Download zip archive and extract.

  • pngout.min.js

Usage

pngout is static and asynchronous:

pngout(canvas, options).then(function(result) {
  var blob = result.blob;
  //...
});

The simplest use is to use the easy-mode option which has various pre-defined template options ("low", "normal", "good", "verygood", "super" and "extreme", the last mode uses quantize and is lossy):

pngout(canvas, {settings: "verygood"}).then(function(result) {
   //...
});

pngout comes with many options which allow tweaking and optimizing size:

var options = {
  settings: "normal",        // use template options for quick setup
  autoFormat: true,          // detects color format (alpha, color)
  format: "RGB",             // if no auto-detect, select format
  mask: "RGB",               // which component(s) to extract
  grayTolerance: 3,          // tolerance for auto-detecting color
  premultiply: true,         // when alpha channel is removed (see below)
  bgColor: {r:0, g:0, b:0},  // matte color if alpha channel is removed
  lumaMode: "709",           // if color is converted to grayscale
  gamma: 2.2,                // add gamma chunk
  quantize: 0,               // make lossy, shaves of lower bits
  fastFilter: 0,             // if "fast" mode, which filter to use
  mode: "deep",              // heuristic model
  compLevel: 7,              // compression level
  fragment: 250,             // block processing in ms
  blockDelay: 7,             // delay between each block
  x: 0,                      // optional crop region
  y: 0,
  width: 0,
  height: 0,
  scale: 1,                 // scale factor (1=100% or no scaling)
  author: "Joe Doe",		// add author text chunk
  copyright: "Joe Doe (c) 2016",
  software: "pngout",
  timestamp: true,          // insert time chunk
  minimal: false,           // remove non-required chunks if true
  resultType: "blob",       // final resulting format
  customChunks: [
    {name: "tEXt", data: "Creator\0A Custom Text Chunk."}
  ],
  onprogress: function(e) { /* e.progress, e.phase */ }
};

If you don't intend to support Promises you can use pngout with callbacks instead:

pngout(canvas, options [, callbackResolve [, callbackReject]]);

Note that you can't use both callbacks and promises though.

The toBlob() patch

Using the toBlob() patch (mime-type and option object must be provided):

canvas.toBlob(function(blob) { /*...*/ }, "image/png", options};

Options as with pngout (see docs for details).

Known Issues

  • When using a ImageData as a source suggest format, scale and crop are disabled.

See the issue tracker for details.

License

Released under MIT license. You may use this class in both commercial and non-commercial projects provided that full header (minified and developer versions) is included.

© Epistemex 2016

Epistemex

Keywords

FAQs

Package last updated on 09 Dec 2016

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