Pdf.js: immediate render() after cancel()

Created on 7 Feb 2018  路  4Comments  路  Source: mozilla/pdf.js

Configuration:

  • Web browser and its version: Google Chrome 64, FireFox 58
  • Operating system and its version: Win7
  • PDF.js version: 2.0.334
  • Is a browser extension: No

Steps to reproduce the problem:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
</head>
<body>
    <canvas id="canvas" style="width:50em"></canvas>
    <script type="text/javascript">

var canvasContext = document.getElementById('canvas').getContext('2d');

PDFJS.getDocument('//cdn.mozilla.net/pdfjs/tracemonkey.pdf')
.then(function(pdf) {

    return pdf.getPage(1);
})
.then(function(page) {

    var renderTask = null;

    function renderPage() {

        if ( renderTask !== null ) {

            renderTask.cancel();
            return;
        }

        var viewport = page.getViewport(1, 0);

        renderTask = page.render({
            canvasContext: canvasContext,
            viewport: viewport,
        });

        renderTask.then(function () {

            renderTask = null;
        })
        .catch(function(err) {

            renderTask = null;
            if ( err.name === 'RenderingCancelledException' ) {

                renderPage();
                return;
            }

            console.log('Page render error', err);
        });
    }

    renderPage();
    renderPage();

})

    </script>
</body>
</html>

What went wrong?
The following error appear when the second renderPage() is called:
Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.

In InternalRenderTask_cancel() function, canvasInRendering.delete(this._canvas) is called before RenderingCancelledException is send, then in initializeGraphics(), canvasInRendering.has(this._canvas) should be false ??

1-other
Source
picture FranckFreiburger
👍2

Most helpful comment

Any updates here?

picture markhalonen on 14 Mar 2018
👍7

All 4 comments

As asked for in both https://github.com/mozilla/pdf.js/blob/master/.github/ISSUE_TEMPLATE.md and https://github.com/mozilla/pdf.js/blob/master/.github/CONTRIBUTING.md, can you please provide a complete (and runnable) example rather than just code snippets?

Edit: Also, please keep in mind that cancel is an asynchronous operation: https://github.com/mozilla/pdf.js/blob/43f1f96b101c1fa8a7b839659a2e505275a82e42/src/display/api.js#L2187-L2194

Snuffleupagus picture Snuffleupagus on 7 Feb 2018

Sorry, here is the runnable example: https://jsfiddle.net/b6wbh8q2/~~ https://jsfiddle.net/b6wbh8q2/9/

Also, please keep in mind that cancel is an asynchronous operation

I asynchronously wait for the end of the cancel operation using the render() promise rejection:

 .catch(function(err) {
            renderTask = null;
            if ( err.name === 'RenderingCancelledException' ) {
                renderPage();
                ...
FranckFreiburger picture FranckFreiburger on 7 Feb 2018

Any updates on this?

andreasvirkus picture andreasvirkus on 15 Feb 2018

Any updates here?

markhalonen picture markhalonen on 14 Mar 2018
👍7
Was this page helpful?
0 / 5 - 0 ratings

Related issues

smit-modi picture smit-modi  路  3Comments
THausherr picture THausherr  路  3Comments
dmisdm picture dmisdm  路  3Comments
PeterNerlich picture PeterNerlich  路  3Comments
anggikolo11 picture anggikolo11  路  3Comments