Searchable Image

This Web Component enables users to search for and select text within images.

By using this component, textual information embedded in an image can be exposed to the DOM, making it possible for users to perform text searches or copy text in much the same way as they would with normal text content.

Example: How to eat UDON ? UDON SERVED WITH DIPPING SAUCE Put all the condiments (ginger& shallot& sesame) in the site 2 Pick up a few strands of noodles and dip them in the s Dip tempura in the sauce,too. (2) ENJOY ! UDON SERVED IN DASHI SOUP Everything is already in the soup. You can dip tempura in the soup,too. ENJOY !

For more details and source code, please see the GitHub repository:
GitHub - hata6502/searchable-image

Installation

To use this Web Component, simply include the following script in your <head> section:

<script type="module" src="https://cdn.jsdelivr.net/npm/searchable-image@1.0.4/docs/index.js"></script>

Online OCR Tool

Terminology

Searchable Image: The overall mechanism provided by this Web Component for making text in images searchable.
OCR (Optical Character Recognition): A technology that recognizes text from images and converts it into machine-readable data.

Web Component Overview

The <s-img> element manages a single image along with any text elements that represent text regions within that image. Its key features include:

A structure similar to the standard <img> element for placing images.
Utilizing child elements (<s-text>, etc.) to define text regions, allowing text data to exist in the DOM and be searchable and copyable.

Element Definitions

`<s-img>` Element

The <s-img> element supports attributes like src and alt, and provides a slot for defining text regions within the image.

`<s-text>` Element

The <s-text> element specifies a text region within the image, along with the corresponding textual content. The following attributes are defined:

x: The left (x) coordinate of the text region in pixels.
y: The top (y) coordinate of the text region in pixels.
width: The width of the text region in pixels.
height: The height of the text region in pixels.

The actual text is placed inside the element as text content.

Below is a basic example of how to mark up an image with text elements:

<s-img src="example.jpg" alt="Sample Image">
  <span slot="texts">
    <s-text x="100" y="50" width="200" height="30">Sample Text</s-text>
    <!-- Add more <s-text> elements as needed -->
  </span>
</s-img>

Use Cases

This Web Component can be especially effective in the following situations:

Documentation pages that use screenshots of diagrams or tables
Text within these screenshots can also be included in searchable content.
Tutorial or guide pages relying heavily on screenshots
Even if UI labels or instructions are embedded in the image, users can quickly find the information they need through built-in text search.
Landing pages with many infographics
By placing images easily and enabling text search, it can greatly improve user convenience.