Friday, July 31st, 2009
WPS: PostScript and PDF interpreter for HTML 5 canvas
It would be a pretty cool hack to implement a PostScript/PDF interpreter in JavaScript wouldn’t it? That is exactly what has been done with WPS.
The code takes PS and really groks it so:
- /n 10 def
- /w 25 def
- 0 0 n w mul dup .gbox
- 4 dict begin
- 0 1 n 1 sub {
- /i exch def
- /ii 1 1 n div i mul sub def
- 0 1 n 1 sub {
- /j exch def
- /jj 1 1 n div j mul sub def
- ii jj 0 setrgbcolor
- w j mul w i mul w w rectfill
- } for
- } for
- end
becomes:
And all in ~400 lines of code! Check out the examples….. just awesome!
4.3 rating from 39 votes
Knowing very little about the formats of PostScript or PDF, I have a question. Could this be used to take raw PDF data from the server and display it on page via canvas, therefore bypassing the need for any PDF plugin?
Well, their “Limitations and Known Issues” say:
* many PostScript operators are still to be implemented
* only small fraction of PDF operators has been implemented
* text drawing and font related functionality has not been implemented
so – no. For now, at least. But that would be a fun feature.
Very cool. The only problem with doing this in JavaScript (besides the facet that it’s slow) is that most PDF documents are compressed with the ZIP deflate algorithm. Since binary data cannot be manipulated with JavaScript, it would be hard to render the vast majority of PDF documents.
A better solution: use SVG. SVG can render the same things that PDF can (vector artwork, text, embedded images), but it is supported natively by a number of browsers (IE excluded of course!). There are also some tools that can convert PDF to SVG.
@devongovett Did I miss something ? SVG has nothing to do with this, and the canvas drawing methods are really easier to use in this kind of things.
As Javascript cannot access the user’s files, and that the JS code is provided by a server, this one can uncompress the PDF document easily before sending it to the client.
And canvas isn’t supported by IE, neither is SVG, but there are good solutions for Canvas (ExCanvas).
@devongovett:
Binary data CAN be manipulated with javascript in the browser. Speed isn’t as much of a concern when using the right browsers.
@fabienmenager:
IE8 does support base64 images, so that could be used as an embedded CANVAS to manipulate (though limited in its size currently).
Since most data won’t require pixel level manipulation, vector line drawing methods would be sufficient to implement most of this in current browsers.
i also want to concur that binary data cannot manipulated by javascript. you see, javascript is a programming language, and it consists of words, whereas binary data is just so-and-so many 0s and 1s. it is just numbers. and how could words affect numbers? it is not possible. words cannot change numbers, and with numbers, you cannot write a program.
if someone disagrees, pls go ahead and try to prove that ie is a browser. it is not.
@loveencounterflow:
i also want to concur that binary data cannot manipulated by javascript.
function load_binary_resource(url) {
var req = new XMLHttpRequest();
req.open(‘GET’, url, false);
//XHR binary charset opt by Marcus Granado 2006 [http://mgran.blogspot.com]
req.overrideMimeType(‘text/plain; charset=x-user-defined’);
req.send(null);
if (req.status != 200) return ”;
return req.responseText;
}
var filestream = load_binary_resource(url);
var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte (f7)
it is just numbers. and how could words affect numbers? it is not possible. words cannot change numbers, and with numbers, you cannot write a program.
if someone disagrees, pls go ahead and try to prove that ie is a browser. it is not.
I’m going to pretend that was a joke and you’re playing with semantics. It can be argued that there are both no words nor numbers but just electric charges running through memory locations and registers who’s flow is controlled though switches and gates. Regardless of the representation, it’s just plain wrong to claim you cannot write a program.
@fabienmenager You would need to convert your PDFs to SVGs ahead of time.
I would like to see the zip algorithm in javascript. In firefox at least, not sure about other browsers, you might be able to leverage the jar:url syntax and get firefox to do decompression for you.
@loveencounterflow: I have to agree, it’s almost impossible to understand their logic here. Why wouldn’t Javascript be able to manipulate binary data? I do it *all the time*, my lord… news flash – text data *is* binary data. all data is, in the end, binary. computers only understand binary! everything else is a translation.
I have already seen LZW ported to Javascript: http://zapper.hodgers.com/labs/?p=90
There are at least 10 different possible algorithms in zip compression (not just one), in addition to the “store” option, which does no compression at all. At least all of the 32-bit algorithms could be ported to Javascript. Honestly, if you just covered deflate you’d cover the majority of files. Deflate consists of LZ77 compression and huffman encoding. Both of these things have already been ported to javascript (just google them). So… yes, if you really had a need for it (and let’s be honest – anyone doing this for any legitmate purpose, I would really like to know why on earth … just, why …. would you want to do this – I already can’t believe the reasoning behind developing LZW in the first place) – it can be done.
@jove4015:
Wrong attribution, names are below comments.