@frameright/image-display-control-metadata-parser

 

Image Display Control metadata parsing library

An easy way to retrieve Image Display Control metadata out of images. Made with :heart: by Frameright. Power to the pictures!

NOTE: this is a wrapper around mattiasw/ExifReader and image-size. Many thanks to mattiasw, netroy, and other contributors!

Table of Contents

• Overview
• Usage
• Image Display Control metadata
• Changelog

Overview

The Image Display Control web component extends the <img> tag with the ability to accept a list of image regions, and to zoom in on the best one for the current element size, thus achieving better results than object-fit: cover; a.k.a. middle-cropping. Its syntax looks like:

<img
  is="image-display-control"
  src="https://images.pexels.com/photos/3625715/pexels-photo-3625715.jpeg"
  width="200"
  height="200"
  data-image-regions='[{
    "id": "oneanimal",
    "names": ["One animal"],
    "shape": "rectangle",
    "unit": "relative",
    "x": "0.217",
    "y": "0.708",
    "width": "0.239",
    "height": "0.1467"
  }, {
    "id": "threeanimals",
    "names": ["Three animals"],
    "shape": "rectangle",
    "unit": "relative",
    "x": "0.245",
    "y": "0.725",
    "width": "0.419",
    "height": "0.121"
  }]'
/>

Typically this list of image regions come from the metadata of the image file itself, is retrieved by the back-end, and is placed in the front-end's <img data-image-regions=" attribute.

This is where this library comes into play: it allows your Node.js back-end to easily retrieve this metadata.

Usage

#!/usr/bin/env node
// ./myscript.mjs

import { promises as fs } from 'fs';

// npm install @frameright/image-display-control-metadata-parser
import { Parser } from '@frameright/image-display-control-metadata-parser';

// Get it from https://iptc.org/std/photometadata/examples/IPTC-PhotometadataRef-Std2021.1.jpg
const buffer = await fs.readFile('IPTC-PhotometadataRef-Std2021.1.jpg');

const parser = new Parser(buffer);
console.log(parser.getIdcMetadata());

This has been validated with JPEG, PNG, and WebP images.

  :scroll: Reference

  :wrench: Contributing

Image Display Control metadata

Nowadays an image file (e.g. JPEG, PNG) can contain this type of image regions in their metadata according to the IPTC standard. Photographers, or anyone else, can use the Frameright app to define and store image regions in the metadata of their pictures.

Changelog

1.0.2 (2023-04-21):

• Add missing Buffer class to the browser build.

1.0.1 (2023-04-21):

• Remove dangling imports to Node.js built-in modules (e.g. fs) from the browser build.

1.0.0 (2023-04-21):

• Build image-display-control-metadata-parser-standalone.min.js to be served by a CDN and used in the browser.

0.1.0 (2023-04-19):

• Initial version.