在 PDF.js 中，如何隐藏 canvas 并以完全不透明的方式显示底层文本？

Question

当 PDF.js 将 PDF 处理为 HTML5 时，它会在包含文本的所有 <div> 元素上放置一个 <canvas>。此 canvas 是 PDF 的正确呈现，而下面的文本相当粗糙（但足以满足某些目的，例如搜索单词）。

使用 PDF.js demo page，我可以通过以下方式使底层文本可见：

正在删除 <canvas> 元素。
禁用 .textLayer class 上的 color: transparent 属性，它作用于基础文本。

...但是，文本保持低透明度，我找不到控制此效果的 CSS（见下文）：

之前 - canvas

之后 - 应用了上述两个步骤

有没有办法使用 JavaScript 手动将文本恢复为完全不透明？或者更好的是，是否有一种特殊的方式来调用 PDF.js 以便它仅显示基础文本，并完全丢弃 canvas （或禁用所有文本用法的 canvas ）？

Answer 1

嗯，重复你的步骤，我

已删除 .textLayer > div { color: transparent; }、
已添加.pdfViewer .canvasWrapper { display: none; }
最后更改了文本层的不透明度.textLayer { opacity: 1.0; }。

最后一个成功了。

要通过 JS 以编程方式执行此操作，您可以使用：

var mainCSS = document.styleSheets[0];
mainCSS.insertRule(".textLayer { opacity: 1.0; }", 1);
mainCSS.insertRule(".textLayer > div { color: initial !important; }", 1);
mainCSS.insertRule(".pdfViewer .canvasWrapper { display: none; }", 1);

color: initial后的!important用于防止应用原始CSS定义（color: transparent）。

编辑：

要防止文本绘制到 canvas，您可以禁用用于绘制文本的函数（即 fillText 和 strokeText）。

CanvasRenderingContext2D.prototype.strokeText = function () { };
CanvasRenderingContext2D.prototype.fillText = function () { };

这样您就不必修改 PDF.js 本身的代码。

如果您想保留 strokeText 和 fillText 的功能，您可能愿意调整 showText 和 paintChar 的功能（在 pdf.js / pdf.worker.js).

在 PDF.js 中，如何隐藏 canvas 并以完全不透明的方式显示底层文本？

In PDF.js, how do you hide the canvas and display the underlying text at full opacity?

html

javascript

css

html5-canvas

pdf.js

之前 - canvas

之后 - 应用了上述两个步骤