@plurid/text-select-image-html v0.1.1

HTML Specialized Element for displaying an image and allowing for the selection of the text the image contains.

• Concept
  • Current State
  • Proposal
• Demo
• Technology
• Usage
  • Setup
  • HTML image-text-select Element

Concept

Current State

An image is displayed in the browser using the <img> tag. The <img> HTML Element has an attribute, src, which indicates the location of the image to be displayed.

Proposal

The HTML Element <text-select-image> has a src attribute which indicates the location of the image, but can also have a text attribute which contains a machine-generated JavaScript object detailing the text content and the text characteristics (position, size, and more).

The text content can be obtained through machine analysis or can be provided by the user through the interface.

Demo

Select the text from the image.

Edit the text as admin.

Technology

The image is analysed and established if it contains text. If it does, the location of the text (x, y coordinates) is registered and over the image is placed a transparent div, containing exactly the text from the image. The text from the image appears like it is truly selectable.

Usage

Setup

Add the text-select-image-html script to the application (or install with npm).

npm install text-select-image-html

Use the <text-select-image> HTML Element, passing in the src and text attributes.

Pass the control attribute to display the controls for the texts.

In order to detect the changes made to the text, listen for the textselectimage event on the document

document.addEventListener('textselectimage', (event: CustomEvent) => {
    console.log('UPDATED', event.detail)
});

HTML text-select-image Element