PDF displays boxes and images but no font. pdf.js:549 Warning: Unimplemented operator paintImageMaskXObjectGroup

[namedoc]

Attach (recommended) or Link to PDF file here: Sensitive data.

Configuration:

• Web browser and its version: Chrome 81.0.4044.138
• Operating system and its version: WIN10-2018Ax64
• PDF.js version: "react-pdf": "^4.2.0", pdfjsVersion = '2.1.266';
• Is a browser extension:

Steps to reproduce the problem:
1.
2.

What is the expected behavior? (add screenshot) Expected behavior is to display the PDF content like normal. When I download the response and save it as a pdf I can open it with adobe and everything is normal and the pdf is displayed correctly.

What went wrong? (add screenshot) Screenshot added. The pdf only displays checkboxes, boxes, or images. No font/data is showing. I get this error in the console Warning: Unimplemented operator paintImageMaskXObjectGroup. This is only happening for select PDFs. Other PDFs work just fine.

I can not find anything helpful regarding that warning so I was hoping someone could provide more clarity on it.

Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

[Snuffleupagus]

Attach (recommended) or Link to PDF file here: Sensitive data.

Without a test-case, the issue is unfortunately not actionable/valid.

PDF.js version: "react-pdf": "^4.2.0", pdfjsVersion = '2.1.266';

Please note that React-PDF is a different project, which we cannot provide support for here.
Furthermore, the quoted PDF.js version is no longer supported, please find the latest releases at https://github.com/mozilla/pdf.js/releases

I get this error in the console Warning: Unimplemented operator paintImageMaskXObjectGroup.

That suggests that you're using the SVG-backend, which as mentioned in the Wiki is not officially supported; see https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#backends

[namedoc]

I appreciate the quick input. I will look into your feedback. Thanks!

[namedoc]

Are we able to verify if the operator paintImageMaskXObjectGroup is an implemented operator in pdf.js? I opened an issue on the react-pdf project and they said to test this in firefox which I did and it still didn't so they said there is nothing they can do until pdf.js implements the paintImageMaskXObjectGroup operator.

[Snuffleupagus]

Again, without a test-case there's nothing that anyone can do here!

Also, the particular error quoted here won't happen if you (as mentioned previously) use the default canvas back-end instead (or at least use a fully up-to-date version of the PDF.js library).

Edit: The fact that the React-PDF project apparently uses the officially unsupported SVG rendering back-end of the PDF.js library is a "bug" in that project; please note https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#backends

[timvandermeij]

The canvas back-end is indeed the only officially supported back-end, and that implements paintImageMaskXObjectGroup at:

pdf.js/src/display/canvas.js

Lines 2244 to 2284 in 9989879

	paintImageMaskXObjectGroup: function CanvasGraphics_paintImageMaskXObjectGroup(
	images
	) {
	if (!this.contentVisible) {
	return;
	}
	var ctx = this.ctx;
	var fillColor = this.current.fillColor;
	var isPatternFill = this.current.patternFill;
	for (var i = 0, ii = images.length; i < ii; i++) {
	var image = images[i];
	var width = image.width,
	height = image.height;
	var maskCanvas = this.cachedCanvases.getCanvas(
	"maskCanvas",
	width,
	height
	);
	var maskCtx = maskCanvas.context;
	maskCtx.save();
	putBinaryImageMask(maskCtx, image);
	maskCtx.globalCompositeOperation = "source-in";
	maskCtx.fillStyle = isPatternFill
	? fillColor.getPattern(maskCtx, this)
	: fillColor;
	maskCtx.fillRect(0, 0, width, height);
	maskCtx.restore();
	ctx.save();
	ctx.transform.apply(ctx, image.transform);
	ctx.scale(1, -1);
	ctx.drawImage(maskCanvas.canvas, 0, 0, width, height, 0, -1, 1, 1);
	ctx.restore();
	}
	},

The SVG back-end doesn't implement that operator yet, but as stated that back-end is experimental and not ready for production usage yet.

In order to move this issue forward, we can only do something here with a PDF file that triggers this error. This can be done in three ways: try to make a PDF file using the same tool without the sensitive data, strip the sensitive data out using a PDF editor, or provide another non-sensitive document that triggers this operator. Once there is a test case for us to work with, we can look at implementing it. It's important to understand that without a test case it's essentially a blind implementation which is guaranteed to lead to bugs (and is not accepted in general since we require test cases, preferably automated but otherwise manual at the very least).

[namedoc]

Thanks for your reply. I am working on getting a pdf that doesn't have any sensitive data that I can upload.

[Snuffleupagus]

The SVG back-end doesn't implement that operator yet,

Please note that the SVG back-end should not actually implement OPS.paintImageMaskXObjectGroup though, since that's an optimization that isn't supposed to be used when calling PDFPageProxy.getOperatorList (in the API).

There was a bug, in older PDF.js versions, whereby the canvas-specific optimizations were incorrectly applied to the SVG back-end as well. However, that's fixed in the latest PDF.js releases, see https://github.com/mozilla/pdf.js/releases; courtesy of PR #10784.

[namedoc]

I am attaching an example PDF. If you open it in Adobe you'll see what it should look like.
QTFRStmtsEmail- redacted.pdf

Screenshots of the difference:

[Snuffleupagus]

The file in #12181 (comment) works for me, when opening it with the latest PDF.js version; you can try it yourself here: https://github.com/mozilla/pdf.js#online-demo

Hence, once more, use the default canvas back-end and everything should just work!

[namedoc]

That is good to see. React-pdf is supposed to be using the default canvas by default and you have to opt in to use the SVG which I am not doing. I am going to take a closer look at the versions we are using again. Thanks!

[namedoc]

@Snuffleupagus it was indeed the rendering mode. I just found out there was a property being set to svg and I had no idea. It works like magic now. I appreciate all the help!

Why would someone want to change it from the default rendering mode to svg anyways?