Q: We have modified WebViewer so that pages can be rotated individually. Now I would like to know, how do I get the page thubmnails to match the rotation of pages in the document?
A:
First
you want to replace loadThumbnailAsync, with loadCanvasAsync, with the
proper rotation, and then call drawAnnotations on the resulting canvas.
Example of this can be found in the same file, in startPrintJob function.
Here is code that should work
appendThumbs : function(visibleThumbs) {
var me = this;
if(me.viewerRendering) {
// we don't want to slow down the main viewer so wait until it is done
return;
}
var doc = me.docViewer.getDocument(),
am = me.docViewer.getAnnotationManager();
var loadNext = function(i) {
if(i >= visibleThumbs.length)
return;
var pageIndex = visibleThumbs[i];
var pageNum = pageIndex + 1;
doc.loadCanvasAsync(pageIndex, 1, me.docViewer.getRotation(pageNum), function(canvas) {
am.drawAnnotations(pageNum, canvas);
var dataUrl = canvas.toDataURL();
$('<img>')
.attr('src', dataUrl)
.css({
'max-width' : '100%',
'max-height' : '100%'
}).load(function() {
me.receivedThumb(this, pageIndex);
});
loadNext(i + 1);
}, function() {
}, 1);
};
loadNext(0);
},
Then
there is extra work keeping it in sync with changes, so to handle that
you can listen for rotationUpdated and annotationChanged events and
re-run canvas generation routine.