PDF.js-viewerのテキスト埋め込み処理のしくみ
pdf.jsのvieweroのテキスト描画及び埋め込み処理の仕組み
調査の目的
gyazoにテキストを埋め込んで表示するTamperMonkeyUserScriptを作りたい
Gyazo OCRはテキストの位置情報を持っている
これをgyazoの画像上にspanとして描画したい
同様の処理はpdf.jsのviewerが行っているはずなので、この実装を調べて移植する
描画処理
テキスト埋め込み
div.textLayer中に<span>でテキストが埋め込まれている
<div class="textLayer" style="width: calc(var(--scale-factor) * 595.276px); height: calc(var(--scale-factor) * 841.89px);" data-main-rotation="0">...</div>
--scale-factorはhtmlで指定される
ページサイズと同じ大きさの領域div.textLayerを作り、その中で文字の位置を%で相対指定している
https://gyazo.com/e4512ff7e1429c2139347763ec5b932e
これらの<span>はTextLayerBuilder.textDivsに格納されている
spanなのになぜ名前はtextDivsになっているのだろうかtakker.icon
該当ソース
./src/display/text_layer.js
renderTextLayerでtextDivsの中身を作っている
TextLayerRenderTask._processItemsが<span>の構築を担っている
https://github.com/mozilla/pdf.js/blob/f66cbb0b5e3793a698afe898c55f6563c447e3bd/src/display/text_layer.js#L193 で位置を指定している
#2023-02-13 16:24:31