How to rotate thumbnails to match custom page rotations?

[Ryan - PDFNet Developer]

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.

[Yizhou TANG]

Hi, we are having the same problem so I tried replace "appendThumbs" in the ReaderControl by your code, but now we have only empty square for thumbnails after changes.

Can you give some more instructions for resolve the problem?

在 2015年10月13日星期二 UTC+2下午11:46:44，Ryan - PDFNet Developer写道：

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, null, 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);
},

[Matt Parizeau]

The problem is that you need to pass 1 as the second parameter to loadCanvasAsync instead of null. I've updated the original post to reflect this.

Matt Parizeau

Software Developer

PDFTron Systems Inc.