node-libpng

<!doctype html> <html class="default no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>node-libpng</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/main.css"> </head> <body> <header> <div class="tsd-page-toolbar"> <div class="container"> <div class="table-wrap"> <div class="table-cell" id="tsd-search" data-index="assets/js/search.js" data-base="."> <div class="field"> <label for="tsd-search-field" class="tsd-widget search no-caption">Search</label> <input id="tsd-search-field" type="text" /> </div> <ul class="results"> <li class="state loading">Preparing search index...</li> <li class="state failure">The search index is not available</li> </ul> <a href="index.html" class="title">node-libpng</a> </div> <div class="table-cell" id="tsd-widgets"> <div id="tsd-filter"> <a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a> <div class="tsd-filter-group"> <div class="tsd-select" id="tsd-filter-visibility"> All <ul class="tsd-select-list"> <li data-value="public">Public</li> <li data-value="protected">Public/Protected</li> <li data-value="private" class="selected">All</li> </ul> </div> <input type="checkbox" id="tsd-filter-inherited" checked /> <label class="tsd-widget" for="tsd-filter-inherited">Inherited</label> <input type="checkbox" id="tsd-filter-externals" checked /> <label class="tsd-widget" for="tsd-filter-externals">Externals</label> <input type="checkbox" id="tsd-filter-only-exported" /> <label class="tsd-widget" for="tsd-filter-only-exported">Only exported</label> </div> </div> <a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a> </div> </div> </div> </div> <div class="tsd-page-title"> <div class="container"> <ul class="tsd-breadcrumb"> <li> <a href="globals.html">Globals</a> </li> </ul> <h1> node-libpng</h1> </div> </div> </header> <div class="container container-main"> <div class="row"> <div class="col-8 col-content"> <div class="tsd-panel tsd-typography"> <h1 id="node-libpng">node-libpng</h1> <a href="https://www.npmjs.com/package/node-libpng"><img src="https://img.shields.io/npm/v/node-libpng.svg" alt="npm"></a> <a href="https://travis-ci.org/Prior99/node-libpng"><img src="https://travis-ci.org/Prior99/node-libpng.svg?branch=master" alt="Build Status"></a> <a href="https://ci.appveyor.com/project/Prior99/node-libpng/branch/master"><img src="https://ci.appveyor.com/api/projects/status/1dbpcj210jlyv0e1/branch/master?svg=true" alt="Build status"></a> <a href="https://coveralls.io/github/Prior99/node-libpng?branch=master"><img src="https://coveralls.io/repos/github/Prior99/node-libpng/badge.svg?branch=master" alt="Coverage Status"></a> Unofficial bindings for node to libpng. Please also refer to the <a href="https://prior99.github.io/node-libpng/docs/index.html">Documentation</a>. <h2 id="table-of-contents">Table of contents</h2> <ul> <li><a href="#node-libpng">node-libpng</a><ul> <li><a href="#table-of-contents">Table of contents</a></li> <li><a href="#supported-environments">Supported environments</a></li> <li><a href="#usage">Usage</a><ul> <li><a href="#reading-decoding">Reading (Decoding)</a><ul> <li><a href="#reading-png-files-using-promises">Reading PNG files using Promises</a></li> <li><a href="#reading-png-files-using-a-callback">Reading PNG files using a callback</a></li> <li><a href="#reading-png-files-synchroneously">Reading PNG files synchroneously</a></li> <li><a href="#decoding-a-buffer">Decoding a buffer</a><ul> <li><a href="#writing-encoding">Writing (Encoding)</a></li> </ul> </li> <li><a href="#writing-png-files-using-promises">Writing PNG files using Promises</a></li> <li><a href="#writing-png-files-using-a-callback">Writing PNG files using a callback</a></li> <li><a href="#writing-png-files-synchroneously">Writing PNG files synchroneously</a></li> <li><a href="#encoding-into-a-buffer">Encoding into a Buffer</a><ul> <li><a href="#accessing-the-pixels">Accessing the pixels</a></li> </ul> </li> <li><a href="#accessing-in-the-images-color-format">Accessing in the image's color format</a></li> <li><a href="#accessing-in-rgba-format">Accessing in rgba format</a><ul> <li><a href="#modifying-the-image">Modifying the image</a></li> </ul> </li> <li><a href="#cropping">Cropping</a></li> <li><a href="#resizing-the-canvas">Resizing the canvas</a></li> <li><a href="#copying-an-image-into-another-image">Copying an image into another image</a></li> <li><a href="#filling-an-area-with-a-specified-color">Filling an area with a specified color</a></li> <li><a href="#setting-a-single-pixel">Setting a single pixel</a></li> </ul> </li> </ul> </li> <li><a href="#benchmark">Benchmark</a><ul> <li><a href="#read-access-decoding">Read access (Decoding)</a></li> <li><a href="#write-access-encoding">Write access (Encoding)</a></li> <li><a href="#pixel-access">Pixel access</a></li> </ul> </li> <li><a href="#contributing">Contributing</a><ul> <li><a href="#generating-the-libpng-config">Generating the libpng config</a></li> </ul> </li> <li><a href="#contributors">Contributors</a></li> </ul> </li> </ul> <h2 id="supported-environments">Supported environments</h2> This is a native Addon to NodeJS which delivers prebuilt binaries. Only some environments are supported: <table> <thead> <tr> <th>Node Version</th> <th>Windows 64-Bit</th> <th>Windows 32-Bit</th> <th>Linux 64-Bit</th> <th>Linux 32-Bit</th> <th>OSX</th> </tr> </thead> <tbody> <tr> <td>Earlier</td> <td>✗</td> <td>✗</td> <td>✗</td> <td>✗</td> <td>✗</td> </tr> <tr> <td>Node 6 (Abi 48)</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✗</td> <td>✓</td> </tr> <tr> <td>Node 7 (Abi 51)</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✗</td> <td>✓</td> </tr> <tr> <td>Node 8 (Abi 57)</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✗</td> <td>✓</td> </tr> <tr> <td>Node 9 (Abi 59)</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✗</td> <td>✓</td> </tr> <tr> <td>Node 10 (Abi 64)</td> <td>✓</td> <td>✓</td> <td>✓</td> <td>✗</td> <td>✓</td> </tr> </tbody> </table> <h2 id="usage">Usage</h2> <h3 id="reading-decoding-">Reading (Decoding)</h3> Multiple ways of reading and decoding PNG encoded images exist: <ul> <li><a href="https://prior99.github.io/node-libpng/docs/globals.html#readpngfile">readPngFile</a> Reads a PNG file and returns a <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html">PngImage</a> instance with the decoded data.<ul> <li>The function can take an optional argument for using a node-style callback API. <a href="#reading-png-files-using-a-callback">Example</a></li> <li>The function will return a Promise when not providing a callback. <a href="#reading-png-files-using-promises">Example</a></li> </ul> </li> <li><a href="https://prior99.github.io/node-libpng/docs/globals.html#readpngfilesync">readPngFileSync</a> Will read a PNG file synchroneously and return a <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html">PngImage</a> instance with the decoded image. <a href="#reading-png-files-synchroneously">Example</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/globals.html#decode">decode</a> Will decode a Buffer of raw PNG file data and return a <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html">PngImage</a> instance. <a href="#decoding-a-buffer">Example</a></li> </ul> <h4 id="reading-png-files-using-promises">Reading PNG files using Promises</h4> In order to use the Promise-based API, simply omit the third argument. <pre><code class="lang-typescript">import { readPngFile } from "node-libpng"; async function readMyFile() { const image = await readPngFile("path/to/image.png"); console.log(`Reading was successful. The dimensions of the image are ${image.width}x${image.height}.`); } </code></pre> If an error occured while reading the file or decoding the buffer, the Promise which <code>writePngFile</code> returns will reject with the error. <h4 id="reading-png-files-using-a-callback">Reading PNG files using a callback</h4> In order to use the callback-based API, simply provide a callback as the third argument. <pre><code class="lang-typescript">import { readPngFile } from "node-libpng"; function readMyFile() { readPngFile("path/to/image.png", (error, image) => { if (error !== null) { // TODO: Check what `error` contains. } console.log(`Reading was successful. The dimensions of the image are ${image.width}x${image.height}.`); }); } </code></pre> If an error occured while reading the file or decoding the buffer, it will be passed as the first argument to the callback. Otherwise <code>null</code> will be passed. The <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html">PngImage</a> instance will be passed as the second argument. If an error occured, it will be <code>undefined</code>. <h4 id="reading-png-files-synchroneously">Reading PNG files synchroneously</h4> It is possible to read the image from the disk in a blocking way, using Node's <code>readFileSync</code>: <pre><code class="lang-typescript">import { readPngFileSync } from "node-libpng"; function readMyFile() { const image = readPngFileSync("path/to/image.png"); console.log(`Reading was successful. The dimensions of the image are ${image.width}x${image.height}.`); } </code></pre> If an error occured while reading the file or decoding the buffer, it will be <code>throw</code>n. <h4 id="decoding-a-buffer">Decoding a buffer</h4> Buffers can be decoded directly into a <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html">PngImage</a> instance: <pre><code class="lang-typescript">import { decode } from "node-libpng"; function decodeMyBuffer() { const buffer = ...; // Some buffer containing the raw PNG file's data. const image = decode(buffer); console.log(`Decoding was successful. The dimensions of the image are ${image.width}x${image.height}.`); } </code></pre> If an error occured while decoding the buffer, it will be <code>throw</code>n. The decoding happens synchroneously. <h3 id="writing-encoding-">Writing (Encoding)</h3> Multiple ways for encoding and writing raw image data exist: <ul> <li><a href="https://prior99.github.io/node-libpng/docs/globals.html#writepngfile">writePngFile</a> Writes the raw data into a PNG file using Promises or a callback.<ul> <li>The function can take an optional argument for using a node-style callback API. <a href="#writing-png-files-using-a-callback">Example</a></li> <li>The function will return a Promise when not providing a callback. <a href="#writing-png-files-using-promises">Example</a></li> </ul> </li> <li><a href="https://prior99.github.io/node-libpng/docs/globals.html#writepngfilesync">writePngFileSync</a> Writes the raw data into a PNG file synchroneously. <a href="#writing-png-files-synchroneously">Example</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/globals.html#encode">encode</a> Encodes the raw data into a Buffer containing the PNG file's data. <a href="#encoding-into-a-buffer">Example</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html">PngImage</a> contains methods for encoding and writing modified image data:<ul> <li><a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#encode">PngImage.encode</a> The same as calling the free function <a href="">encode</a> with <code>PngImage.data</code>.</li> <li><a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#write">PngImage.write</a> The same as calling the free function <a href="">writePngFile</a> with <code>PngImage.data</code>.</li> <li><a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#writesync">PngImage.writeSync</a> The same as calling the free function <a href="">writePngFileSync</a> with <code>PngImage.data</code>.</li> </ul> </li> </ul> <h4 id="writing-png-files-using-promises">Writing PNG files using Promises</h4> In order to use the Promise-based API, simply omit the 4th argument. <pre><code class="lang-typescript">import { writePngFile } from "node-libpng"; async function writeMyFile() { // Let's write a 100x60 pixel PNG file. const imageData = Buffer.alloc(100 * 60 * 3); // TODO: Manipulate the image data somehow. const options = { width: 100, height: 60 }; await writePngFile("path/to/image.png", imageData, options); console.log("File successfully written."); } </code></pre> In this example, a 100x60 pixel image will be encoded and written to disk. Based on the length of the buffer and the provided dimensions the presence of an alpha channel will be automatically calculated. It is possible to omit either <code>width</code> or <code>height</code> from the options. If an error occured while writing the file or encoding the buffer, the Promise which <code>writePngFile</code> returns will reject with the error. <h4 id="writing-png-files-using-a-callback">Writing PNG files using a callback</h4> In order to use the callback-based API, provide a callback as the 4th argument. <pre><code class="lang-typescript">import { writePngFile } from "node-libpng"; function writeMyFile() { // Let's write a 100x60 pixel PNG file. const imageData = Buffer.alloc(100 * 60 * 3); // TODO: Manipulate the image data somehow. const options = { width: 100, height: 60 }; await writePngFile("path/to/image.png", imageData, options, (error) => { if (error !== null) { // TODO: Check what `error` contains. } console.log("File successfully written."); }); } </code></pre> In this example, a 100x60 pixel image will be encoded and written to disk. Based on the length of the buffer and the provided dimensions the presence of an alpha channel will be automatically calculated. It is possible to omit either <code>width</code> or <code>height</code> from the options. If an error occured while writing the file or encoding the buffer, it will be passed as the first and only argument in the callback. Otherwise <code>null</code> will be passed. <h4 id="writing-png-files-synchroneously">Writing PNG files synchroneously</h4> It is possible to write the image to disk in a blocking way, using Node's <code>writeFileSync</code>: <pre><code class="lang-typescript">import { writePngFileSync } from "node-libpng"; function writeMyFile() { // Let's write a 100x60 pixel PNG file. const imageData = Buffer.alloc(100 * 60 * 3); // TODO: Manipulate the image data somehow. const options = { width: 100, height: 60 }; writePngFileSync("path/to/image.png", imageData, options); console.log("File successfully written."); } </code></pre> In this example, a 100x60 pixel image will be encoded and written to disk. Based on the length of the buffer and the provided dimensions the presence of an alpha channel will be automatically calculated. It is possible to omit either <code>width</code> or <code>height</code> from the options. If an error occured while writing the file or encoding the buffer, it will be <code>throw</code>n. <h4 id="encoding-into-a-buffer">Encoding into a Buffer</h4> Buffers can be encoded directly from a buffer containing the raw pixel data: <pre><code class="lang-typescript">import { encode } from "node-libpng"; function encodeMyBuffer() { const buffer = ...; // Some buffer containing the raw pixel data. const options = { width: 100, height: 100 }; const encodedPngData = encode(buffer); // The Buffer `encodedPngData` now contains the raw PNG-encoded data. console.log("File successfully encoded."); } </code></pre> Based on the length of the buffer and the provided dimensions the presence of an alpha channel will be automatically calculated. If an error occured while encoding the buffer, it will be <code>throw</code>n. The encoding happens synchroneously. <h3 id="accessing-the-pixels">Accessing the pixels</h3> PNG specifies five different types of colors: <ul> <li><a href="https://prior99.github.io/node-libpng/docs/enums/colortype.html#gray_scale">Gray Scale</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/enums/colortype.html#gray_scale_alpha">Gray Scale with Alpha channel</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/enums/colortype.html#palette">Palette (Indexed)</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/enums/colortype.html#rgb">RGB</a></li> <li><a href="https://prior99.github.io/node-libpng/docs/enums/colortype.html#rgba">RGB with Alpha channel</a></li> </ul> In the <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#data">PngImage.data</a> buffer the colors are stored the way they were encoded in the PNG image. This library provides utilities for accessing the pixels in both the native format as well as rgba format. <h4 id="accessing-in-the-image-s-color-format">Accessing in the image's color format</h4> In order to retrieve the color in the image's native format at a given position <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#at">PngImage.at</a> can be used. <h5 id="example-for-a-gray-scale-image">Example for a gray scale image</h5> <pre><code class="lang-typescript">import { readPngFileSync } from "node-libpng"; const image = readPngFileSync("path/to/grayscale-image.png"); const color = image.at(10, 10); const colorType = image.colorType; // Will log: "The color type of the image is gray-scale. Pixel at 10,10 is of color 168." console.log(`The color type of the image is ${colorType}. Pixel at 10,10 is of color ${color.join(", ")}.`); </code></pre> <h5 id="example-for-a-rgb-image-">Example for a rgb image:</h5> <pre><code class="lang-typescript">const image = readPngFileSync("path/to/rgb-image.png"); const color = image.at(10, 10); const colorType = image.colorType; // Will log: "The color type of the image is rgb. Pixel at 10,10 is of color 100, 150, 200." console.log(`The color type of the image is ${colorType}. Pixel at 10,10 is of color ${color.join(", ")}.`); </code></pre> Dealing with all of these different color formats can be quite irritating. A set of conversion utilities as for example a utility for converting any color format to rgba (<a href="https://prior99.github.io/node-libpng/docs/globals.html#converttorgba">convertToRGBA</a>) exist. <a href="#accessing-in-rgba-format">It is also possible to do this automatically</a>. <h4 id="accessing-in-rgba-format">Accessing in rgba format</h4> A method for retrieving the automatically converted color exists: <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#rgbaat">PngImage.rgbaAt</a>. It will convert any color into rgba format. Unlike <a href="https://www.npmjs.com/package/pngjs#pngjs">other implementations</a>, all color formats are supported. <pre><code class="lang-typescript">const image = readPngFileSync("path/to/any-color-format-image.png"); const color = image.rgbaAt(10, 10); const colorType = image.colorType; // Will log: "The color type of the image is palette. Pixel at 10,10 is of color 100, 150, 200, 255." console.log(`The color type of the image is ${colorType}. Pixel at 10,10 is of color ${color.join(", ")}.`); </code></pre> <h3 id="modifying-the-image">Modifying the image</h3> Several basic utilities for modifying an image exist. <h4 id="cropping">Cropping</h4> A simple utility for cropping an image to a sub-rectangle exists: <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#crop">PngImage.crop</a>. It's a simplified version of <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#resizecanvas">PngImage.resizeCanvas</a>. It will reduce the image in-place to the specified rectangle: <pre><code class="lang-typescript">import { readPngFileSync, rect } from "node-libpng"; const image = readPngFileSync("path/to/image.png"); image.crop(rect(10, 10, 100, 100)); // Will log: "New dimensions: 100x100". console.log(`New dimensions: ${image.width}x${image.height}.`); </code></pre> <h4 id="resizing-the-canvas">Resizing the canvas</h4> Use <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#resizecanvas">PngImage.resizeCanvas</a> for advanced cropping operations. Take a look at <a href="https://prior99.github.io/node-libpng/docs/interfaces/resizecanvasarguments.html">ResizeCanvasArguments</a>. It takes a configuration object which makes it possible to provide: <ul> <li>An offset to the top left (a padding).</li> <li>A fill color for uncovered regions.</li> <li>A subrectangle of the image to use.</li> <li>The new dimensions for the image.</li> </ul> In the following example, a 10 pixel margin is applied to the top and to the left and a 50x50 pixel area is copied from the image at offset 20,20. The image is resized to 100x100, so a 40 pixel margin will exist to the right and to the bottom. The background is filled in red: <pre><code class="lang-typescript">import { readPngFileSync, rect, xy, colorRGB } from "node-libpng"; const image = readPngFileSync("path/to/image.png"); image.resizeCanvas({ offset: xy(10, 10), clip: rect(20, 20, 50, 50), dimensions: xy(100, 100), fillColor: colorRGB(255, 0, 0), }); // Will log: "New dimensions: 100x100". console.log(`New dimensions: ${image.width}x${image.height}.`); </code></pre> <h4 id="copying-an-image-into-another-image">Copying an image into another image</h4> Use <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#copyfrom">PngImage.copyFrom</a> to copy an area of one image into another one: <pre><code class="lang-typescript">import { readPngFileSync, xy, rect } from "node-libpng"; const source = readPngFileSync("path/to/source-image.png"); const target = readPngFileSync("path/to/target-image.png"); target.copyFrom(source, xy(10, 10), rect(100, 100, 50, 50)); </code></pre> The above example will copy a 50x50 rectangle from the source image at position 100,100 to the target image at position 10,10. The offset and the subrectangle can be omitted to copy the whole source image to the top left corner of the target image. <h4 id="filling-an-area-with-a-specified-color">Filling an area with a specified color</h4> Use <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#fill">PngImage.fill</a> to fill an area with a specified color: <pre><code class="lang-typescript">import { readPngFileSync, colorRGB, rect } from "node-libpng"; const image = readPngFileSync("path/to/source-image.png"); // Change a 100x100 pixel area at offset 10,10 to red: image.fill(colorRGB(255, 0, 0), rect(10, 10, 100, 100)); </code></pre> <h4 id="setting-a-single-pixel">Setting a single pixel</h4> With <a href="https://prior99.github.io/node-libpng/docs/classes/pngimage.html#set">PngImage.set</a> an individual pixel's color can be changed: <pre><code class="lang-typescript">import { readPngFileSync, colorRGB, xy } from "node-libpng"; const image = readPngFileSync("path/to/source-image.png"); // Change the pixel at 10,10 to red: image.set(colorRGB(255, 0, 0), xy(10, 10)); </code></pre> <h2 id="benchmark">Benchmark</h2> As it is a native addon, node-libpng is much faster than libraries like <a href="https://www.npmjs.com/package/pngjs">pngjs</a>: <h3 id="read-access-decoding-">Read access (Decoding)</h3> The chart below shows the comparison of decoding an image between <a href="https://www.npmjs.com/package/pngjs">pngjs</a> (sync api) and node-libpng. The time to fully decode a 4096x4096 image is measured (Higher is better). <img src="images/benchmark-read.png" alt="read benchmark"> (The x-axis scale shows the amount of fully decoded images per second.) <h3 id="write-access-encoding-">Write access (Encoding)</h3> The chart below shows the comparison of encoding an image between <a href="https://www.npmjs.com/package/pngjs">pngjs</a> (sync api) and node-libpng. The time to fully encode a 4096x4096 image is measured (Higher is better). <img src="images/benchmark-encode.png" alt="access benchmark"> (The x-axis scale shows the amount of fully encoded images per second.) <h3 id="pixel-access">Pixel Access</h3> The chart below shows the comparison of accessing all pixels in a decoded image between <a href="https://www.npmjs.com/package/pngjs">pngjs</a> and node-libpng. The time to fully access every pixel in the raw data is measured (Higher is better). <img src="images/benchmark-access.png" alt="access benchmark"> (The x-axis scale shows the amount of fully accessed images per second.) <h2 id="contributing">Contributing</h2> Yarn is used instead of npm, so make sure it is installed, probably: <code>npm install -g yarn</code>. Generally, it should be enough to just run: <pre><code>make </code></pre>which will install all node dependencies, compile the dependencies and C++ code, compile typescript, execute all test, lint the sources and build the docs. <h3 id="generating-the-libpng-config">Generating the libpng config</h3> Libpng requires an OS specific configuration headerfile <code>pnglibconf.h</code>. This can be generated by executing: <pre><code>git submodule update --init --recursive cd deps/libpng mkdir build cd build cmake .. make cp pnglibconf.h ../../config/linux/ </code></pre><h2 id="contributors">Contributors</h2> <ul> <li>Frederick Gnodtke</li> </ul> </div> </div> <div class="col-4 col-menu menu-sticky-wrap menu-highlight"> <nav class="tsd-navigation primary"> <ul> <li class="globals "> <a href="globals.html">Globals</a> </li> </ul> </nav> <nav class="tsd-navigation secondary menu-sticky"> <ul class="before-current"> <li class=" tsd-kind-enum"> <a href="enums/colortype.html" class="tsd-kind-icon">ColorType</a> </li> <li class=" tsd-kind-enum"> <a href="enums/interlacetype.html" class="tsd-kind-icon">InterlaceType</a> </li> <li class=" tsd-kind-class"> <a href="classes/pngimage.html" class="tsd-kind-icon">PngImage</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/encodeoptions.html" class="tsd-kind-icon">EncodeOptions</a> </li> <li class=" tsd-kind-interface"> <a href="interfaces/resizecanvasarguments.html" class="tsd-kind-icon">ResizeCanvasArguments</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colorany" class="tsd-kind-icon">ColorAny</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colorgrayscale" class="tsd-kind-icon">ColorGrayScale</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colorgrayscalealpha" class="tsd-kind-icon">ColorGrayScaleAlpha</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colornoalpha" class="tsd-kind-icon">ColorNoAlpha</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colorpalette" class="tsd-kind-icon">ColorPalette</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colorrgb" class="tsd-kind-icon">ColorRGB</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#colorrgba" class="tsd-kind-icon">ColorRGBA</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#palette" class="tsd-kind-icon">Palette</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#readpngfilecallback" class="tsd-kind-icon">ReadPngFileCallback</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#rect" class="tsd-kind-icon">Rect</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#writepngfilecallback" class="tsd-kind-icon">WritePngFileCallback</a> </li> <li class=" tsd-kind-type-alias"> <a href="globals.html#xy" class="tsd-kind-icon">XY</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#__native_pngimage" class="tsd-kind-icon">__native_PngImage</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#__native_copy" class="tsd-kind-icon">__native_copy</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#__native_encode" class="tsd-kind-icon">__native_encode</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#__native_fill" class="tsd-kind-icon">__native_fill</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#__native_ispng" class="tsd-kind-icon">__native_isPng</a> </li> <li class=" tsd-kind-variable"> <a href="globals.html#__native_resize" class="tsd-kind-icon">__native_resize</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#colorgrayscale" class="tsd-kind-icon">colorGrayScale</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#colorgrayscalealpha" class="tsd-kind-icon">colorGrayScaleAlpha</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#colorpalette" class="tsd-kind-icon">colorPalette</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#colorrgb" class="tsd-kind-icon">colorRGB</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#colorrgba" class="tsd-kind-icon">colorRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#colortypetocolorchecker" class="tsd-kind-icon">colorTypeToColorChecker</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#convertgrayscalealphatorgba" class="tsd-kind-icon">convertGrayScaleAlphaToRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#convertgrayscaletorgba" class="tsd-kind-icon">convertGrayScaleToRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#convertnativebackgroundcolor" class="tsd-kind-icon">convertNativeBackgroundColor</a> </li> <li class=" tsd-kind-function tsd-is-not-exported"> <a href="globals.html#convertnativepalette" class="tsd-kind-icon">convertNativePalette</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#convertnativetime" class="tsd-kind-icon">convertNativeTime</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#convertpalettetorgba" class="tsd-kind-icon">convertPaletteToRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#convertrgbtorgba" class="tsd-kind-icon">convertRGBToRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#converttorgba" class="tsd-kind-icon">convertToRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#decode" class="tsd-kind-icon">decode</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#defaultbackgroundcolor" class="tsd-kind-icon">defaultBackgroundColor</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#encode" class="tsd-kind-icon">encode</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#expecteverypixel" class="tsd-kind-icon">expectEveryPixel</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#expectredbluegradient" class="tsd-kind-icon">expectRedBlueGradient</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#iscolorgrayscale" class="tsd-kind-icon">isColorGrayScale</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#iscolorgrayscalealpha" class="tsd-kind-icon">isColorGrayScaleAlpha</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#iscolorpalette" class="tsd-kind-icon">isColorPalette</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#iscolorrgb" class="tsd-kind-icon">isColorRGB</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#iscolorrgba" class="tsd-kind-icon">isColorRGBA</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#ispng" class="tsd-kind-icon">isPng</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#isrect" class="tsd-kind-icon">isRect</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#isxy" class="tsd-kind-icon">isXY</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#readpngfile" class="tsd-kind-icon">readPngFile</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#readpngfilesync" class="tsd-kind-icon">readPngFileSync</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#rect" class="tsd-kind-icon">rect</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#writepngfile" class="tsd-kind-icon">writePngFile</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#writepngfilesync" class="tsd-kind-icon">writePngFileSync</a> </li> <li class=" tsd-kind-function"> <a href="globals.html#xy" class="tsd-kind-icon">xy</a> </li> </ul> </nav> </div> </div> </div> <footer class="with-border-bottom"> <div class="container"> <h2>Legend</h2> <div class="tsd-legend-group"> <ul class="tsd-legend"> <li class="tsd-kind-module">Module</li> <li class="tsd-kind-object-literal">Object literal</li> <li class="tsd-kind-variable">Variable</li> <li class="tsd-kind-function">Function</li> <li class="tsd-kind-function tsd-has-type-parameter">Function with type parameter</li> <li class="tsd-kind-index-signature">Index signature</li> <li class="tsd-kind-type-alias">Type alias</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-enum">Enumeration</li> <li class="tsd-kind-enum-member">Enumeration member</li> <li class="tsd-kind-property tsd-parent-kind-enum">Property</li> <li class="tsd-kind-method tsd-parent-kind-enum">Method</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-interface">Interface</li> <li class="tsd-kind-interface tsd-has-type-parameter">Interface with type parameter</li> <li class="tsd-kind-constructor tsd-parent-kind-interface">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-interface">Property</li> <li class="tsd-kind-method tsd-parent-kind-interface">Method</li> <li class="tsd-kind-index-signature tsd-parent-kind-interface">Index signature</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-class">Class</li> <li class="tsd-kind-class tsd-has-type-parameter">Class with type parameter</li> <li class="tsd-kind-constructor tsd-parent-kind-class">Constructor</li> <li class="tsd-kind-property tsd-parent-kind-class">Property</li> <li class="tsd-kind-method tsd-parent-kind-class">Method</li> <li class="tsd-kind-accessor tsd-parent-kind-class">Accessor</li> <li class="tsd-kind-index-signature tsd-parent-kind-class">Index signature</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-constructor tsd-parent-kind-class tsd-is-inherited">Inherited constructor</li> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-inherited">Inherited property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-inherited">Inherited method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-inherited">Inherited accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-protected">Protected property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-protected">Protected method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-protected">Protected accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-private">Private property</li> <li class="tsd-kind-method tsd-parent-kind-class tsd-is-private">Private method</li> <li class="tsd-kind-accessor tsd-parent-kind-class tsd-is-private">Private accessor</li> </ul> <ul class="tsd-legend"> <li class="tsd-kind-property tsd-parent-kind-class tsd-is-static">Static property</li> <li class="tsd-kind-call-signature tsd-parent-kind-class tsd-is-static">Static method</li> </ul> </div> </div> </footer> <div class="container tsd-generator"> Generated using <a href="http://typedoc.org/" target="_blank">TypeDoc</a> </div> <div class="overlay"></div> <script src="assets/js/main.js"></script> <script>if (location.protocol == 'file:') document.write('<script src="assets/js/search.js"><' + '/script>');</script> </body> </html>