https://github.com/frameright/image-display-control-metadata-parser

TypeScript Image Display Control metadata parsing library
https://github.com/frameright/image-display-control-metadata-parser

frameright image image-display-control image-manipulation iptc-metadata metadata metadata-extraction metadata-parser

Last synced: about 2 months ago
JSON representation

TypeScript Image Display Control metadata parsing library

• Host: GitHub
• URL: https://github.com/frameright/image-display-control-metadata-parser
• Owner: Frameright
• License: mit
• Created: 2023-04-12T13:30:33.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-10-14T08:36:35.000Z (3 months ago)
• Last Synced: 2024-10-20T04:40:22.173Z (2 months ago)
• Topics: frameright, image, image-display-control, image-manipulation, iptc-metadata, metadata, metadata-extraction, metadata-parser
• Language: TypeScript
• Homepage:
• Size: 11.8 MB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[](https://frameright.io)

[![npm version](https://img.shields.io/npm/v/@frameright/image-display-control-metadata-parser)](https://www.npmjs.com/package/@frameright/image-display-control-metadata-parser)

[![github actions](https://github.com/Frameright/image-display-control-metadata-parser/actions/workflows/main.yml/badge.svg)](https://github.com/Frameright/image-display-control-metadata-parser/actions/workflows/main.yml)

 

# Image Display Control metadata parsing library

> **➡️ See this document rendered at [docs.frameright.io/javascript](https://docs.frameright.io/javascript)**

An easy way to retrieve [Image Display Control](https://frameright.io) metadata

out of images. Made with :heart: by [Frameright](https://frameright.io). Power

to the pictures!

  :sparkles: [Live demo](https://webc.frameright.io)

  :bulb: [GitHub Discussions](https://github.com/Frameright/image-display-control-web-component/discussions)

> **NOTE**: this is a wrapper around

> [mattiasw/ExifReader](https://github.com/mattiasw/ExifReader) and

> [image-size](https://github.com/image-size/image-size). Many thanks to

> [mattiasw](https://github.com/mattiasw), [netroy](https://github.com/netroy),

> and other contributors!

## Table of Contents

- [Overview](#overview)

- [Usage](#usage)

  * [In a Node.js back-end](#in-a-nodejs-back-end)

  * [Directly in a browser](#directly-in-a-browser)

- [Image Display Control metadata](#image-display-control-metadata)

## Overview

The

[Image Display Control web component](https://github.com/Frameright/image-display-control-web-component)

extends the `` 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;`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit)

a.k.a. middle-cropping. Its syntax looks like:

```html



```

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

`

    

    

      async function documentLoaded() {

        const image = await fetch(

          'https://iptc.org/std/photometadata/examples/IPTC-PhotometadataRef-Std2021.1.jpg'

        );

        const buffer = await image.arrayBuffer();

        const parser = new ImageDisplayControl.Parser(buffer);

        const regions = parser.getIdcMetadata();

        console.log(JSON.stringify(regions, null, 2 /*indent*/));

      }