diff --git a/canvas_proxy.js b/canvas_proxy.js index 610cdcdba..c7234d9c9 100644 --- a/canvas_proxy.js +++ b/canvas_proxy.js @@ -19,6 +19,38 @@ ImageCanvasProxy.prototype.getCanvas = function() { return this; } +var JpegStreamProxyCounter = 0; +// WebWorker Proxy for JpegStream. +var JpegStreamProxy = (function() { + function constructor(bytes, dict) { + this.id = JpegStreamProxyCounter++; + this.dict = dict; + + // create DOM image. + postMessage("jpeg_stream"); + postMessage({ + id: this.id, + str: bytesToString(bytes) + }); + + // var img = new Image(); + // img.src = "data:image/jpeg;base64," + window.btoa(bytesToString(bytes)); + // this.domImage = img; + } + + constructor.prototype = { + getImage: function() { + return this; + // return this.domImage; + }, + getChar: function() { + error("internal error: getChar is not valid on JpegStream"); + } + }; + + return constructor; +})(); + function CanvasProxy(width, height) { var stack = this.$stack = []; @@ -72,9 +104,11 @@ 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]]); + this.drawImage = function(image, x, y, width, height, sx, sy, swidth, sheight) { + if (image instanceof ImageCanvasProxy) { + stack.push(["$drawCanvas", [image.imgData, x, y, image.width, image.height]]); + } else if(image instanceof JpegStreamProxy) { + stack.push(["$drawImage", [image.id, x, y, sx, sy, swidth, sheight]]) } else { throw "unkown type to drawImage"; } @@ -139,9 +173,7 @@ function CanvasProxy(width, height) { } CanvasProxy.prototype.flush = function() { - // postMessage("log"); - // postMessage(JSON.stringify([this.$stack.length])); postMessage("canvas_proxy_stack"); - postMessage(JSON.stringify(this.$stack)); + postMessage(this.$stack); this.$stack.length = 0; } diff --git a/viewer_worker.html b/viewer_worker.html index ced71679e..fd436db75 100644 --- a/viewer_worker.html +++ b/viewer_worker.html @@ -13,6 +13,7 @@ function toc(msg) { } var myWorker = new Worker('worker.js'); +var images = {}; var currentX = 0; var currentXStack = []; @@ -47,6 +48,15 @@ var special = { var imgData = ctx.getImageData(0, 0, width, height); imgData.data = data; ctx.putImageData(imgData, x, y); + }, + + "$drawImage": function(id, x, y, sx, sy, swidth, sheight) { + var image = images[id]; + if (!image) { + throw "Image not found"; + } + ctx.drawImage(image, x, y, image.width, image.height, + sx, sy, swidth, sheight); } } @@ -70,6 +80,7 @@ const CANVAS_PROXY_STACK = 1; const LOG = 2; const FONT = 3; const PDF_NUM_PAGE = 4; +const JPEG_STREAM = 5; var onMessageState = WAIT; var fontStr = null; @@ -96,11 +107,21 @@ myWorker.onmessage = function(event) { case "font": onMessageState = FONT; return; + case "jpeg_stream": + onMessageState = JPEG_STREAM; + return; default: throw "unkown state: " + data } break; + case JPEG_STREAM: + var img = new Image(); + img.src = "data:image/jpeg;base64," + window.btoa(data.str); + images[data.id] = img; + console.log("got image", data.id) + break; + case PDF_NUM_PAGE: console.log(data); maxPages = parseInt(data); @@ -133,7 +154,7 @@ myWorker.onmessage = function(event) { break; case CANVAS_PROXY_STACK: - var stack = JSON.parse(data); + var stack = data; gStack = stack; console.log("canvas stack size", stack.length) @@ -188,7 +209,7 @@ function nextPage() { } function prevPage() { - if (currentPage == 0) return; + if (currentPage == 1) return; currentPage--; showPage(currentPage); } diff --git a/worker.js b/worker.js index dcb87a811..6294007b6 100644 --- a/worker.js +++ b/worker.js @@ -15,6 +15,9 @@ importScripts("pdf.js"); importScripts("fonts.js"); importScripts("glyphlist.js") +// Use the JpegStreamProxy proxy. +JpegStream = JpegStreamProxy; + // var array = new Uint8Array(2); // array[0] = 1; // array[1] = 300;