画像上のテキストにもマーカーを引くオーバーレイ技術
annoを使うと、画像のなかにあるテキストにもマーカーを引ける。 画像は、以下のように幅広い形式のテキストを扱える。
スクリーンショット
ドキュメント
スライド
本
写真
レシート
看板
画像上のテキストにマーカーを引くための、主要技術は以下のとおりである。
画像内のテキストと座標を抽出する。
テキストオーバーレイ
画像内のテキストを選択しているようなUIを表現できる。
https://gyazo.com/846945b156dcd09c950b9a0c81bafd9fhttps://gyazo.com/c69d643661307bc22aa1343a912f1ee1
以下のように、position: absolute;のspan要素を配置している。
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;
"
サウナ&
</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で得られる矩形の座標データをもとに、矩形が横長か縦長かを判定している。
CSSのwriting-modeをhorizontal-tb(横書き) またはvertical-rl(縦書き) にセットする。 テキスト選択しやすくするため、テキストを見た目より大きめに補正している。
スマホのような画面が小さいデバイスにて、指でタップしながらテキスト選択することを想定している。
br要素をオーバーレイのDOMに含めて、テキストコピーするときに改行を含めている。