![require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages](https://cdn.sanity.io/images/cgdhsj6q/production/be8ab80c8efa5907bc341c6fefe9aa20d239d890-1600x1097.png?w=400&fit=max&auto=format)
Security News
require(esm) Backported to Node.js 20, Paving the Way for ESM-Only Packages
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
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.
NOTE - Currently in alpha version -
normal
and deep
) included to make compression optimal, as well as a fast
mode.Includes an optional patch for the canvas
element's toBlob()
which allows for all features of pngout.
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.
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.
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
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.
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).
See the issue tracker for details.
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
FAQs
This package is no longer supported and has been deprecated.
We found that pngout demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
require(esm) backported to Node.js 20, easing the transition to ESM-only packages and reducing complexity for developers as Node 18 nears end-of-life.
Security News
PyPI now supports iOS and Android wheels, making it easier for Python developers to distribute mobile packages.
Security News
Create React App is officially deprecated due to React 19 issues and lack of maintenance—developers should switch to Vite or other modern alternatives.