Skip to content

kyriosli/YAPD

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

13 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Yet Another PNG Decoder

Pure JavaScript implemented png decoder (as well as encoder) that supports modern browsers as well as Node.JS

View this demo

Supported PNG features:

  • PNG-8 1~256 colored platte mode with transparency
  • PNG-24 RGBA mode

Usage

In Browser:

<canvas></canvas>
<script src="src/zlib/zlib.js"></script>
<!-- load inflate.js only if you don't want inflate run in Worker -->
<script src="src/zlib/inflate.js"></script>
<script src="src/png.js"></script>
<script>
    PNG.load(image_url).then(function (png) {
        png.renderTo(document.querySelector('canvas'))
    })
</script>

In Node.JS:

var fs = require('fs')
require('yapd').load('rgba.png')

Encoder support

PNG encoder is added. See encoder

API reference

PNG.load(image_path)

Returns a promise of type PNGImage.

In web browsers, a fetch or XHR request is sent to get the content. In Node.JS, a local file is read.

PNG.load('rgba.png').then(function (png) {
    // png instanceof PNGImage
})

PNG.decode(buf: Buffer|ArrayBuffer|Uint8Array)

Decodes the png image file content.

var buf = ...
png.decode(buf).then(function (png) {
    // png instanceof PNGImage
})

class PNGImage

A png image decoded from buffer, contains several properties and methods:

  • width: image width, in pixel
  • height: image height, in pixel
  • bitDepth: bits of each channel at one pixel
  • colorMode: color mode indicator, one of grayscale rgb rgba platte and grayscale_alpha
  • data: array of channels in R,G,B,A.
  • renderTo(canvas): browser API, resizes the canvas to the size of the image and renders the image into an canvas

About

Yet Another (JavaScript) PNG Decoder

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published