Pdf.js with nodejs white page

[HusseinTaha]

Link to PDF file (or attach file here):

Configuration:

• Web browser and its version: Using node.js 3.8.3
• Operating system and its version: windows 10
• PDF.js version: 1.5.369 build f16b2d4
• Is an extension: pdfjs-dist

Steps to reproduce the problem:

1. require canvas
2. ....

What is the expected behavior? (add screenshot)
---canvas will exported as pngs
What went wrong? (add screenshot)
---canvas is white image
Link to a viewer (if hosted on a site other than mozilla.github.io/pdf.js or as Firefox/Chrome extension):

[HusseinTaha]

I use canvas for getting the canvas image from pdf.js
i have this code:
var PDFJS = require('pdfjs-dist');
var fs = require('fs');
var Canvas = require('canvas');

var data = new Uint8Array(fs.readFileSync('security.pdf'));
PDFJS.diableWorker = true;
PDFJS.getDocument(data).then(function (pdfDocument) {
console.log('Number of pages: ' + pdfDocument.numPages);

  pdfDocument.getPage(1).then(function (page) {
        var scale = 1.5;
        var viewport = page.getViewport(scale);
        //console.log(page);
        var canvas = new Canvas(viewport.width, viewport.height);
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        var ctx = canvas.getContext('2d');
        page.render({canvasContext: ctx, viewport: viewport}).then(function () {
            console.log("Finished rendering?");
            //var img = ctx.getImageData(0, 0, canvas.width, canvas.height);
            //console.log(img);
            var png = fs.createWriteStream('test.png');
            //var imgData = ctx.getImageData(0,0,canvas.width,canvas.height);
            // ctx.globalCompositeOperation = "destination-over";
            // ctx.fillStyle = "#ffffff";
            // ctx.fillRect(0,0,canvas.width,canvas.height);
            console.log(ctx);
            canvas.pngStream().pipe(png);
        }, function (err) {
            console.log("Got error: " + err.stack);
        });

    });

});

so here i got white images

[Snuffleupagus]

As mentioned in https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md (I'm quoting the relevant section below), you need to provide access to a working example.

If you are developing a custom solution, first check the examples at https://github.com/mozilla/pdf.js#learning and search existing issues. If this does not help, please prepare a short well-documented example that demonstrates the problem and make it accessible online on your website, JS Bin, GitHub, etc. before opening a new issue or contacting us on the IRC channel -- keep in mind that just code snippets won't help us troubleshoot the problem.

[Snuffleupagus]

var Canvas = require('canvas');

I noticed that you're attempting to use a node.js canvas implementation, which should explain the problems that you're experiencing since it's likely that there are differences between the canvas implementation in browsers (which is what PDF.js uses) and ones in node.js.
See e.g. the discussion in http://logs.glob.uno/?c=mozilla%23pdfjs&s=2+May+2016&e=2+May+2016#c49185 for more on this subject.

Since this doesn't seem to be an issue with PDF.js, but rather with a node.js module, I'm closing this as invalid.

[HusseinTaha]

Ok I did fix the part of canvas, and it workings good, but not for arabic text, arabic words are showed as squares. But I'm working on a nodejs tool to convert a pdf to list of png images.

[Matrixbirds]

@HusseinTaha I think its font problem. If u code r working on node-canvas, u should use node canvas font to solve this problem. U need to rewrite FrontLoader.bind, u can find the solution in below code. https://github.com/jviereck/node-pdfreader/blob/master/lib/pdf.js,

[fareshan]

@HusseinTaha How did you solve the canvas problem ?

[HusseinTaha]

Hello @fareshan ,
Hope you are doing well! :)
I really don't remember where i fixed it, but i changed the pdf.js and pdf.worker.js build.
also i added node-canvas to the project, and integrate with pdf.js
this is a working example, you can use directly, in case you need to build it again, you should have python, and c++ visual studio for the node-canvas.
Good luck :) and welcome.

[fareshan]

@HusseinTaha You are great. It works.
I did not know what to change in pdf.js and pdf.worker.js. And you did it.
Thanks

[HusseinTaha]

Welcome man, glad to hear that .

[yurydelendik]

FWIW, clean solution for npm's canvas will require mozCurrentTransform removal and refactoring of "scratch canvas" logic.