An image file (e.g. JPEG, PNG) contains metadata, i.e. information about the image, e.g. which camera model was used or when the picture has been taken. This information is usually stored at the beginning of the file. Three main formats, or bags of metadata, can coexist in a file and the information they contain partly overlap:
The IPTC IIM format (often just called IPTC format) and the Exif format represent sets of key-value pairs, whereas the newer XMP format is an XML representation of a more complex RDF graph. The XMP Specification Part 3 specifies how the XMP metadata are to be serialized and stored in each image file format (e.g. JPEG, PNG).
The IPTC council has defined a standard for storing Image Regions in XMP. Image Regions are useful for describing specific areas of the image (e.g. objects, people) or for indicating how the image should be cropped or rotated to best fit a given container. The Frameright app can be used to define such Image Regions and insert them in the metadata of a picture.
This tutorial shows how to read the Image Region metadata of an image with Node.js. This is especially useful if you want to access image metadata from within a backend application implemented using the Node.js. You can also use a bundler (e.g. Webpack or Rollup) to run what is demonstrated in this tutorial from inside a browser, which is useful if you want to access image metadata from within the frontend part of your application.
Let’s install Node and NPM. On Ubuntu 22.04 for example these tools can be installed with:
These tools are also available on macOS and Windows. The rest of this tutorial assumes you are running a bash terminal.
The IPTC Photo Metadata Standard 2021.1 Reference Image file contains several recently-defined XMP metadata items including Image Regions. Let’s download it with:
Let’s pull the library inside our project with:
Let’s start first by extracting and dumping all the XMP metadata. Let’s create a Node script:
We can now make it executable and run it with:
Let’s now adapt our script to only parse the Image Regions:
Running the script now gives us (simplified output):
Going one step further, as a Node.js back-end developer, you now probably want to pass the image regions you have parsed on the back-end to a component on the front-end, like the Image Display Control Web Component, which takes the metadata as a JSON-formatted string.
Let’s adapt our script to produce such a string:
Running the script now gives us:
Which is exactly the format accepted by the web component:
In this tutorial we have learned how to read the Image Region XMP metadata of an image with Node.js by pulling and using a third-party library.