画像上のテキストにもマーカーを引くオーバーレイ技術
annoを使うと、画像のなかにあるテキストにもマーカーを引ける。
画像は、以下のように幅広い形式のテキストを扱える。
スクリーンショット
ドキュメント
スライド
本
写真
手書きノート
レシート
看板
画像上のテキストにマーカーを引くための、主要技術は以下のとおりである。
OCR (光学文字認識)
画像内のテキストと座標を抽出する。
画像上のテキストにもマーカーを引くオーバーレイ技術は、画像に透明なテキストのDOMを重ねる技術である。
画像内のテキストを選択しているようなUIを表現できる。
以下のように、
position: absolute; のspan要素を配置している。htmlCopied!
<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に含めて、テキストコピーするときに改行を含めている。