yapd
v1.0.0
Published
Pure JavaScript PNG decoder/encoder
Downloads
2
Readme
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
andgrayscale_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