PDF.js で表示した PDF でクリックされたテキスト要素を判定

PDF.js で表示した PDF でクリックされたテキスト要素を判定する方法のメモ。

概要

「PDF.js を利用したシンプルな PDF ビューワ」の SimplePdfViewer にクリックイベントを設定し、クリック時に console.log() でテキスト要素の情報を出力します。

処理内容

• クリックイベントからクリックされた座標（event.x, event.y）を取得します。
• page.getTextContent() でページ内のテキスト要素を取得して、各要素について以下を行います。
  • PDF のテキスト要素の座標（item['transform'][4], [5]）と幅・高さ（item['width'], ['height'}）を取得。
  • PDF のテキスト要素を viewport.convertToViewportRectangle() で viewport の座標に変換。
  • イベントの座標と viewport の座標を比較して、クリックされたテキストを判定。　※PDF はページ左下が (0, 0) で、x軸は右向き、y軸は上向き

プログラム（改修部分）

SimplePdfViewer の全体はこちら。

  render_page(page_num) {
    this.page_num = page_num;

    this.pdf.getPage(page_num).then((page) => {
      this.viewport = page.getViewport({scale: this.scale});
      this.canvas.height = this.viewport.height;
      this.canvas.width = this.viewport.width;

      const render_context = {
        canvasContext: this.canvas_context,
        viewport: this.viewport
      };

      page.render(render_context);

      // クリックされたテキスト要素の情報を表示　★追加部分はここから
      this.canvas.addEventListener('click', (event) => {
        // クリックされた座標を取得
        const x = event.offsetX;
        const y = event.offsetY;
        console.log(`x: ${x}, y: ${y}`);

        // テキスト要素
        page.getTextContent().then((textContent) => {
          for (const item of textContent.items) {
            // PDF の座標
            const left = item['transform'][4];
            const top = item['transform'][5];
            const width = item['width'];
            const height = item['height'];
            const text = item['str'];

            // viewport での座標
            const rect = [left, top, left+width, top+height];
            const view_rect = this.viewport.convertToViewportRectangle(rect);
            const view_left = Math.min(view_rect[0], view_rect[2]);
            const view_top = Math.min(view_rect[1], view_rect[3]);
            const view_right = Math.max(view_rect[0], view_rect[2]);
            const view_bottom = Math.max(view_rect[1], view_rect[3]);

            if ((view_left <= x && x <= view_right)
              && (view_top <= y && y <= view_bottom)) {
                console.log(`l: ${left}, t: ${top}, w: ${width}, h: ${height}, text: ${text}`);
            }
          }
        });
      });
    });
  }

実行例

クリック時にカーソルの座標と、クリックされた PDF のテキスト要素の情報が console.log() で出力されます。

x: 94, y: 78
l: 85.08000150000001, t: 729.96004475, w: 52.69627125, h: 10.560375, text: あああああ

x: 78, y: 119
l: 85.08000150000001, t: 675.96004475, w: 52.69627125, h: 10.560375, text: いいいいい