画像上のテキストにもマーカーを引くオーバーレイ技術

画像は、以下のように幅広い形式のテキストを扱える。

スクリーンショット

ドキュメント

スライド

本

写真

レシート

看板

画像上のテキストにマーカーを引くための、主要技術は以下のとおりである。

画像内のテキストと座標を抽出する。

テキストオーバーレイ

画像内のテキストを選択しているようなUIを表現できる。

code: html

<div

style="position: absolute; user-select: text; left: 91.1198px; top: 126.667px"

<span

style="

position: absolute;

color: transparent;

cursor: auto;

overflow: hidden;

white-space: pre;

writing-mode: vertical-rl;

left: 337.449px;

top: 109.729px;

line-height: 10.2184px;

font-size: 10.2184px;

letter-spacing: -3.64792px;

"

24時間

</span>

<span

style="

position: absolute;

color: transparent;

cursor: auto;

overflow: hidden;

white-space: pre;

writing-mode: vertical-rl;

left: 339.761px;

top: 123.719px;

line-height: 10.9482px;

font-size: 10.9482px;

letter-spacing: -5.03168px;

"

サウナ&amp;

</span>

<br style="visibility: hidden" />

<span

style="

position: absolute;

color: transparent;

cursor: auto;

overflow: hidden;

white-space: pre;

writing-mode: vertical-rl;

left: 341.585px;

top: 139.168px;

line-height: 14.5977px;

font-size: 14.5977px;

letter-spacing: -9.45041px;

"

カプセルホテル

</span>

<br style="visibility: hidden" />

...

</div>

あらゆる画像にオーバーレイするため、以下のように作り込んでいる。

横書きと縦書きの両方に対応している。

OCRで得られる矩形の座標データをもとに、矩形が横長か縦長かを判定している。

テキスト選択しやすくするため、テキストを見た目より大きめに補正している。

スマホのような画面が小さいデバイスにて、指でタップしながらテキスト選択することを想定している。

br要素をオーバーレイのDOMに含めて、テキストコピーするときに改行を含めている。