How to read png meta data from JavaScript?

Question

My custom server embeds meta data about an image in the PNG meta data fields. The image is loaded via a regular img tag. I'd like to access the meta data from JavaScript - any way to achieve this?

If not, what are the alternatives for serving additional information for an image? The images are generated on the fly and are relatively expensive to produce, so I'd like to serve the meta data and the image data in a single round trip to the server.

Answer 1

i had a similar task. I had to write physical dimensions and additional metadata to PNG files. I have found some solutions and combined it into one small library. png-metadata

it could read PNG metadata from NodeJS Buffers, and create a new Buffers with new metadata.

Here how you can read PNG metadata in the Browser:

        function loadFileAsBlob(url){
            return new Promise((resolve, reject) => {
                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.responseType = 'blob';
                xhr.onload = function(e) {
                    if (this.status === 200) {
                        resolve(this.response);
                        // myBlob is now the blob that the object URL pointed to.
                    }else{
                        reject(this.response);
                    }
                };
                xhr.send();
            })
        };

        const blob = await loadFileAsBlob('1000ppcm.png');
        metadata = readMetadataB(blob);

Answer 2

A couple of solutions I can think of:

Pass the metadata as headers, use XMLHttpRequest to load the image and display it by converting the raw bytes to a data uri, as talked about here . Looks roughly like this:

var xhr = new XMLHttpRequest();
xhr.responseType = 'blob';
xhr.onload = function() {
    var metadata = xhr.getResponseHeader("my-custom-header");
    image.src = window.URL.createObjectURL(xhr.response);
}
xhr.open('GET', 'http://whatever.com/wherever');
xhr.send();

Alternatively, write a little png parser in js (or compile libpng to javascript using something like emscripten ), and do basically the same thing as above.

It probably wouldn't be too hard to write actually; since you don't care about the image data, you'd just have to write the chunk-traversing code. Read up on how chunks are laid out here , and figure out what chunk type you're storing the metadata in. Still, don't really recommend this if you can just use headers...