Using pdf.js to render a JBIG2 image in a browser

Question

I'm trying to render a JBIG2 image in a browser. This script, which is part of pdf.js appears to do this: https://github.com/mozilla/pdf.js/blob/master/src/core/jbig2.js

Only it does not have instructions on its usage as it is usually executed as a dependency of pdf.js (for complete PDF rendering, which I don't want or need.)

Can anyone figure out how I would use this script to render a JBIG2 image on a web page?

Answer 1

As nobody has helped you out with this, let me at least share my progress on this problem:

<script src="arithmetic_decoder.js"></script>
<script src="util.js"></script>
<script src="jbig2.js"></script>
<script>
    var jbig2 = new Jbig2Image();
    httpRequest = new XMLHttpRequest();
    httpRequest.responseType = 'arraybuffer';
    httpRequest.onreadystatechange = function() {
        if (httpRequest.readyState === 4) {
            if (httpRequest.status === 200) {
                var data = jbig2.parseChunks([{
                    data:new Uint8Array(httpRequest.response),
                    start:0,
                    end:httpRequest.response.byteLength
                }]);
                for (var i = 0; i < data.length; i++)
                    data[i] ^= 0xFF;
                console.log(data);
            } else {
                alert('There was a problem with the request.');
            }
        }
    };
    httpRequest.open('GET', "sample.jbig2");
    httpRequest.send(); 
</script>

So, this makes all the relevant dependencies clear, it contains the way I believe the parseChunks function should be called (I am sure about the Uint8Array part in combination with the arraybuffer from the XMLHttpRequest, not sure whether I shouldn't first slice it up or anything like that). The array returned to data looks like some sort of pixel array, but lacking any information about width or height I am not sure how to continue. Additionally the sample .jbig2 file you provided gives a corruption error in STDU viewer (the only free app I could find to view .jbig2 files), so I couldn't check whether the image is mostly white (as the resulting data seems to suggest) nor drawing the result by hand seemed like a good idea as I didn't have any width or height. If you wish to draw it the way to go is of course a canvas element (ideally you should construct a pixeldataarray and then use putImageData ).

Now, let me outline a way for you to 'figure' out the rest of the solution. What would work best probably is forking pdf.js, adding logging, generating a pdf with just a single jbig2 image and then observing how exactly the above array gets drawn to a canvas (and how/where the dimensions are determined).

Answer 2

JBIG2 used in PDF spec are a subset of full JBIG2 specification (so called embedded profile). For example, in pdf you can have a jbig2 stream that can reference only a single shared symbol dictionary. The full spec does not have this restriction and it also defines a format to bring all pieces together (all of which is missing in pdfjs).

In summary, what you are looking for is technically possible (with some effort), but it is not simple.

Answer 3

Could you process it server side?

There's a good post on stackoverflow on using Java or tools

Print PDF that contains JBIG2 images