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.

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.

• javascript
• web
• browser
• png

• what server setup do you have? apache/php??? – Professor Abronsius Commented Jan 22, 2016 at 16:24
• 1 A custom C++ one. Does it matter for the question? I know how to embed the extra info in the png, I just don't know how to get at it from JS. – BuschnicK Commented Jan 23, 2016 at 17:53
• I ask because had it been the usual Apache with PHP setup that runs most of the web you'd have found you have access to some built-in functions within php for accessing meta data within images ( if you consider Exif data to be thus ) Javascript itself doesn't offer ( afaik ) any native means to do what you want. There are other C++ libraries out in the interwebs which you might be able to interface with ~ www.exiv2 ? – Professor Abronsius Commented Jan 23, 2016 at 23:31
• Yes, but neither PHP nor C++ help me at all on the client side, which is what this question is about. The server is a solved problem, but how can I extract the embedded meta information from the png image in the browser? – BuschnicK Commented Jan 25, 2016 at 8:36
• whether this github./exif-js/exif-js will help or not I don't know but might be worth investigating – Professor Abronsius Commented Jan 25, 2016 at 8:38

2 Answers 2

i had a similar task. I had to write physical dimensions and additional metadata to PNG files. I have found some solutions and bined 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);

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./wherever');
xhr.send();

Alternatively, write a little png parser in js (or pile 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 remend this if you can just use headers...