在PDF.js中，如何隐藏画布并以完全不透明度显示基础文本？ [英] In PDF.js, how do you hide the canvas and display the underlying text at full opacity?

问题描述

当PDF.js将PDF处理为HTML5时，它会在所有< div> < canvas> $ c>包含文本的元素。此画布是PDF的正确渲染，而下面的文本非常粗糙（但对于某些目的而言足够，例如搜索单词）。

使用

之后 - 应用上述两个步骤

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

解决方案

好吧，重复你的步骤，我

• 删除 .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）; 
  

！重要 <$ c $之后c> color：initial 用于防止应用原始CSS定义（ color：transparent ）。

修改：

要防止将文字绘制到画布，您可以禁用用于绘制文本（即 fillText 和 strokeText ）。

  CanvasRenderingContext2D.prototype.strokeText = function（）{}; 
 CanvasRenderingContext2D.prototype.fillText = function（）{}; 
  

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

如果你想保留 strokeText 和 fillText 的功能，你可能会愿意调整函数 showText 和 paintChar （在pdf.js / pdf.worker.js中）。

When PDF.js processes a PDF to HTML5, it lays a <canvas> over all the <div> elements containing the text. This canvas is a proper render of the PDF, while the text underneath is quite rough (but sufficient for certain purposes such as searching for words).

Using the PDF.js demo page, I can make the underlying text visible by:

1. Deleting the <canvas> element.

2. Disabling the color: transparent property on the .textLayer class, which acts upon the underlying text.

... However, the text remains low-opacity, and I can't find the CSS that's controlling this effect (see below):

Before - with canvas

After - having applied the aforementioned two steps

Is there a way to manually restore the text back to full opacity using JavaScript? Or better yet, is there a special way to invoke PDF.js so that it presents just the underlying text, and discards the canvas entirely (or disables the canvas for all text usages)?

解决方案

Well, repeating your steps, I

• removed .textLayer > div { color: transparent; },
• added .pdfViewer .canvasWrapper { display: none; }
• and lastly changed the opacity of the text layer .textLayer { opacity: 1.0; }.

The last one did the trick.

To do this programmatically via JS, you could use:

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);

The !important after color: initial is used to prevent the original CSS definition (color: transparent) from being applied.

Edit:

To prevent that text is drawn to the canvas, you could disable the functions that are used to draw text (namely fillText and strokeText).

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

That way you will not have to modify the code in PDF.js itself.

If you want to preserve the functionality of strokeText and fillText you might be willing to adjust the functions showText and paintChar (within pdf.js / pdf.worker.js).

这篇关于在PDF.js中，如何隐藏画布并以完全不透明度显示基础文本？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！