Get working for not real images

canvas_proxy.js

@@ -1,3 +1,24 @@
+var ImageCanvasProxyCounter = 0;
+function ImageCanvasProxy(width, height) {
+    this.id = ImageCanvasProxyCounter++;
+    this.width = width;
+    this.height = height;
+
+    // Using `Uint8ClampedArray` seems to be the type of ImageData - at least
+    // Firebug tells me so.
+    this.imgData = {
+        data: Uint8ClampedArray(width * height * 4)
+    };
+}
+
+ImageCanvasProxy.prototype.putImageData = function(imgData) {
+    // this.ctx.putImageData(imgData, 0, 0);
+}
+
+ImageCanvasProxy.prototype.getCanvas = function() {
+    return this;
+}
+
 function CanvasProxy(width, height) {
     var stack = this.$stack = [];
 
@@ -51,6 +72,14 @@ function CanvasProxy(width, height) {
         "$showText"
     ];
 
+    this.drawImage = function(canvas, x, y) {
+        if (canvas instanceof ImageCanvasProxy) {
+            stack.push(["$drawCanvas", [canvas.imgData, x, y, canvas.width, canvas.height]]);
+        } else {
+            throw "unkown type to drawImage";
+        }
+    }
+
     function buildFuncCall(name) {
         return function() {
             // console.log("funcCall", name)

viewer_worker.html

@@ -4,11 +4,6 @@
 <script>
 var myWorker = new Worker('worker.js');
 
-// var array = new Uint8Array(2);
-// array[0] = 1;
-// array[1] = 300;
-//
-
 var currentX = 0;
 var currentXStack = [];
 var special = {
@@ -34,6 +29,16 @@ var special = {
         this.translate(currentX, -1 * y);
         this.fillText(text, 0, 0);
         currentX += this.measureText(text).width;
+    },
+
+    "$drawCanvas": function(data, x, y, width, height) {
+        // Ugly: getImageData is called here only to get an object of the right
+        // shape - we are not interessted in the data, as we set it the line
+        // afterwards to something custome.
+        // Can we do better here?
+        var imgData = ctx.getImageData(0, 0, width, height);
+        imgData.data = data;
+        ctx.putImageData(imgData, x, y);
     }
 }
 

worker.js

@@ -41,6 +41,7 @@ var canvas = new CanvasProxy(1224, 1584);
 log("test");
 
 var pageInterval;
+
 onmessage = function(event) {
     var data = event.data;
     var pdfDocument = new PDFDoc(new Stream(data));
@@ -48,48 +49,16 @@ onmessage = function(event) {
 
     tic();
     // Let's try to render the first page...
-    var page = pdfDocument.getPage(8);
+    var page = pdfDocument.getPage(2);
 
     // page.compile will collect all fonts for us, once we have loaded them
     // we can trigger the actual page rendering with page.display
     var fonts = [];
 
-    var gfx = new CanvasGraphics(canvas);
+    var gfx = new CanvasGraphics(canvas, ImageCanvasProxy);
     page.compile(gfx, fonts);
     toc("compiled page");
 
-    //
-    var fontsReady = true;
-    // Inspect fonts and translate the missing one
-    var count = fonts.length;
-    for (var i = 0; i < count; i++) {
-      var font = fonts[i];
-      if (Fonts[font.name]) {
-        fontsReady = fontsReady && !Fonts[font.name].loading;
-        continue;
-      }
-
-      new Font(font.name, font.file, font.properties);
-      fontsReady = false;
-    }
-
-    // function delayLoadFont() {
-    //   for (var i = 0; i < count; i++) {
-    //     if (Fonts[font.name].loading)
-    //       return;
-    //   }
-    //   clearInterval(pageInterval);
-    //   page.display(gfx);
-    //
-    //   log("flush");
-    //   canvas.flush();
-    // };
-
-    // if (fontsReady) {
-    //   delayLoadFont();
-    // } else {
-    //   pageInterval = setInterval(delayLoadFont, 10);
-    // }
 
     page.display(gfx);
     canvas.flush();