Split page up into tiles when printing

[Matt Parizeau]

Q:

The documents we load in WebViewer have large page sizes and we would like to split them up into four tiles when printing. Is this possible?

A:

You need to modify BaseReaderControl.js, look for the prepareDocument function and inside that the loadPageLoop function. Replace the code starting at var zoom = me.printFactor with the following code which will split up the page into 4 and have them all shown in the print dialog.

var zoom = me.printFactor * 4;

doc.loadCanvasAsync(pageNumber - 1, zoom, rotation, function(canvas) {
    var ctx = canvas.getContext('2d');

    // transform the canvas context so that annotations are drawn in the correct location
    var t = window.GetPageMatrix(zoom, annotationRotationOffset, pageInfo);
    ctx.setTransform(t.m_a, t.m_b, t.m_c, t.m_d, t.m_h, t.m_v);

    me.docViewer.getAnnotationManager().drawAnnotations(pageNumber, canvas);

    var subCanvasWidth = canvas.width / 2;
    var subCanvasHeight = canvas.height / 2;

    var subCount = 0;

    for (var i = 0; i < 2; ++i) {
        for (var j = 0; j < 2; ++j) {
            var subCanvas = document.createElement('canvas');
            subCanvas.width = subCanvasWidth;
            subCanvas.height = subCanvasHeight;
            var subCanvasCtx = subCanvas.getContext('2d');
            subCanvasCtx.drawImage(canvas, i * subCanvas.width, j * subCanvas.height, subCanvas.width, subCanvas.height, 0, 0, subCanvas.width, subCanvas.height);

            dataurl = subCanvas.toDataURL();
            (function(img) {
                img.attr('src', dataurl)
                .css({
                    'max-height': '100%',
                    'max-width': '100%'
                })
                .load(function() {
                    if (!me.preparingForPrint) {
                        return;
                    }
                    printDisplay.append(img);
                    me.fireEvent('printProgressChanged', [index + 1, pages.length]);
                    subCount++;
                    if (subCount < 4) {
                        return;
                    }

                    index++;
                    if (index < pages.length) {
                        loadPageLoop();
                    } else {
                        completeCallback(printDisplay);
                        window.utils.unsetCanvasMultiplier();
                        me.preparingForPrint = false;
                    }
                });
            })($('<img>'));

            if (isInline) {
                img.css('display', 'block');

                if (index > 0) {
                    img.css('page-break-after', 'always');
                }
            }
        }
    }
}, function() {}, 1);