HTML5 Web Viewer: Taking a snapshot of the current view

[Support]

Q:

 

I know that the canvas object allows you to save out an image of the current canvas view, but the way you guys have things set up is using multiple canvases (for annotations etc). Is there any way to basically save a snap shot of the current view, taking into account the annotation layer and the background PDF layer?

 

---------------

A:

 

What you could do is: create a new canvas, then copy/merge the main canvas and the annotations. Finally you can get snapshot of this single canvas.

 

To get a reference to the canvases...

You can use ReaderControls' getPageContainer method:

$('iframe').contents().find("#pageContainer"+ pageIndex);

 

Inside the page container are all the canvases and thumbnail images.

 

Alternative you can get the canvases directly like this:

 

$('iframe').contents().find("#canvas"+ pageIndex);

$('iframe').contents().find("#annotation"+ pageIndex);

 

(i.e. the main canvas have ids with its page index like such: canvas0, canvas1, ...

and similary with annotation0, annotation1...)

 

 

e.g.

var pc = me.getPageContainer(0);

var canvas = pc.find('#canvas0').get(0);

var annot = pc.find('#annotation0').get(0);

 

//ctx is canvas context of new canvas

ctx.drawImage(canvas, 0,0); 

ctx.drawImage(annot, 0,0);