pdf.js 是否允许渲染页面的选定（矩形）部分而不是将整个页面渲染到画布？答案

【问题标题】：Does pdf.js allow rendering of a selected (rectangular) part of a page instead of rendering an entire page to a canvas?pdf.js 是否允许渲染页面的选定（矩形）部分而不是将整个页面渲染到画布？
【发布时间】：2022-10-19 23:50:11
【问题描述】：

做pdf.js只允许部分呈现 PDF 页面？更具体地说，是否可以告诉pdf.js从整个 PDF 页面中呈现选定的“像素矩形”？

假设分辨率为 144 dpi，典型的页面 (DIN A4) 大约有 144 dpi。 684（宽）乘 1190（高）像素。我想渲染（例如）一个矩形，如 [100, 100]（左上角坐标，以像素为单位）和 [400, 400]（右下角坐标，以像素为单位）。

一个典型的用例可能是一个带有几个手写笔记的扫描文档，我想单独显示和进一步处理这些笔记。

我确实理解“解决方法”可能是将整个页面保存为 jpg（或任何其他合适的位图格式）并应用一些剪辑功能。但这肯定是一种比选定渲染性能更低的方法。

pdfs.js使用viewport 对象（可能包含参数）进行渲染。该对象包含

height
width
offsetX
offsetY
rotation
scale
transform
viewBox (默认[0, 0, 宽度/比例, 高度/比例])

有人可能认为在其中操纵viewBox 可能会导致预期的结果，但我发现更改viewBox 参数根本没有任何作用。每次我应用 render 方法时都会呈现整个页面。

我可能做错了什么？做pdf.js提供所需的功能？如果是这样，我怎样才能让它工作？非常感谢！

这是一个非常简单的 React 组件，展示了我的方法（不起作用）：

import React, { useRef } from 'react';
import { pdfjs } from 'react-pdf';

pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.js';

function PdfTest() {
  // useRef hooks
  const myCanvas: React.RefObject<HTMLCanvasElement> = useRef(null);

  const test = () => {
    const loadDocument = pdfjs.getDocument('...');
    loadDocument.promise
      .then((pdf) => {
        return pdf.getPage(1);
      })
      .then((page) => {
        const viewport = page.getViewport({ scale: 2 });

        // Here I modify the viewport object on purpose
        viewport.viewBox = [100, 100, 400, 400];

        if (myCanvas.current) {
          const context = myCanvas.current.getContext('2d');
          if (context) {
            page.render({ canvasContext: context, viewport: viewport });
            myCanvas.current.height = viewport.height;
            myCanvas.current.width = viewport.width;
          }
        }
      });
  };

  // Render function
  return (
    <div>
      <button onClick={test}>Test!</button>
      <canvas ref={myCanvas} />
    </div>
  );
}

export default PdfTest;

【问题讨论】：

标签： pdf pdf.js

【解决方案1】：

我最初的想法也是修改页面Viewport 的viewBox。这不是正确的猜测（我希望你已经猜到了）。

要将页面的一部分投射到画布上，您真正需要做的是正确准备Viewport 的转换。所以它看起来或多或少像下面这样：

    const viewport = page.getViewport({ 
      scale: 2, 
      offsetX: -100 * scale, 
      offsetY: - 100 * scale 
    })

这会将您的框部分移动到画布坐标的开头。

接下来您可能想做的是使画布等于选定的矩形大小（在您的情况下是按比例缩放的 300x300），这解决了我的问题。

【讨论】：