2

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

Before - with canvas

After - having applied the aforementioned two steps

After - without canvas

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

Jamie Birch
  • 5,839
  • 1
  • 46
  • 60
  • Text in PDF is a trick subject -- if you don't care about images, use getTextContent (there is text-only example at the project repo) – async5 Apr 10 '17 at 22:45
  • Keeping the text as DOM elements on-page is important to me; as far as I know, `getTextContent()` only fetches the innerText. Am I wrong? – Jamie Birch Apr 10 '17 at 22:50
  • 1
    getTextContent() fetches innerText, positions and fallback font style. There is renderTextLayer function exposed via api https://github.com/mozilla/pdf.js/blob/master/src/display/text_layer.js#L52 to render DOM – async5 Apr 11 '17 at 13:06

1 Answers1

4

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

ingenuine
  • 179
  • 7
  • I'm sure OP wants images to be preserved. – async5 Apr 10 '17 at 22:44
  • Preserving images would certainly be ideal, but I don't know how feasible it might be (does HTML5 Canvas support selecting and hiding/editing objects based on object type? I doubt it). As I think there's no way to do that simply through tweaking the DOM, it'd have to be a question for someone who really knows their way around the PDF.js functionalities. I'll keep this question open for another day in case such an answer comes along, otherwise I'll be happy to accept this answer. – Jamie Birch Apr 10 '17 at 23:00
  • @async5 - adjusted the answer accordingly – ingenuine Apr 11 '17 at 10:55
  • A handsome solution; very useful idea in the edit, thank you! – Jamie Birch Apr 11 '17 at 16:06
  • Worth noting that `showText` & `paintChar` are now in `canvas.js` – TheDude Aug 23 '17 at 20:51