PNG Header

png-header.js retrieves the width and height of a PNG file in JavaScript. Besides the image dimensions, the function also retrieves basic color information.

A similar JavaScript function is available to read the header of JPEG files.

Test it

Usage

// From Uint8Array
// uint8Array must contain at least 29 bytes of the PNG file,
// starting at byte 0.
var pngHeader = readPngHeader(uint8Array);
if (pngHeader) {
    console.log('The width is ' + pngHeader.width +
           ' and the height is ' + pngHeader.height + ' pixels.');
} else {
    console.log('This is not a PNG image.');
}

// From a Blob or File object
// This function only reads the first 29 bytes of the file,
// and is therefore very efficient.
readPngHeaderFromFile(file, onReady);

function onReady(pngHeader) {
    // ...
}

// Available information
pngHeader.width
pngHeader.height
pngHeader.bitDepth
pngHeader.colorType
pngHeader.compressionMethod
pngHeader.filterMethod
pngHeader.interlaceMethod

// Color type enumeration
PngColorTypes.Grayscale
PngColorTypes.RGB
PngColorTypes.Palette
PngColorTypes.GrayscaleAlpha
PngColorTypes.RGBA

Questions, Suggestions and Bug Reports

Please direct questions, suggestions, and bug reports to Thomas Lochmatter.