Friday, July 31st, 2009

WPS: PostScript and PDF interpreter for HTML 5 canvas

Category: Canvas, Showcase

<>p>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:

javascript
< view plain text >
  1. /n 10 def
  2. /w 25 def
  3.  
  4. 0 0 n w mul dup .gbox
  5.  
  6. 4 dict begin
  7.   0 1 n 1 sub {
  8.     /i exch def
  9.     /ii 1 1 n div i mul sub def
  10.     0 1 n 1 sub {
  11.       /j exch def
  12.       /jj 1 1 n div j mul sub def
  13.       ii jj 0 setrgbcolor
  14.       w j mul w i mul w w rectfill
  15.     } for
  16.   } for
  17. end

becomes:

And all in ~400 lines of code! Check out the examples….. just awesome!

Related Content:

Posted by Dion Almaer at 12:09 am
11 Comments

++++-
4.3 rating from 38 votes

11 Comments »

Comments feed TrackBack URI

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?

Comment by jamiethompson — July 31, 2009

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.

Comment by jx12345 — July 31, 2009

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.

Comment by devongovett — July 31, 2009

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

Comment by fabienmenager — July 31, 2009

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

Comment by TNO — July 31, 2009

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.

Comment by loveencounterflow — August 1, 2009

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

Comment by TNO — August 2, 2009

@fabienmenager You would need to convert your PDFs to SVGs ahead of time.

Comment by devongovett — August 2, 2009

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.

Comment by JonathanLeech — August 3, 2009

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

Comment by jove4015 — August 5, 2009

@jove4015:
Wrong attribution, names are below comments.

Comment by TNO — August 6, 2009

Leave a comment

You must be logged in to post a comment.