Pdf.js: Impossible d'utiliser le même canevas lors de plusieurs opérations render()

Créé le 28 août 2018  ·  13Commentaires  ·  Source: mozilla/pdf.js

En utilisant la dernière version de pdfjs (2.0.550), j'obtiens l'erreur suivante :

Impossible d'utiliser le même canevas pendant plusieurs opérations render().

Le code que j'utilise pour le rendu est le suivant:

function renderPage(pageNumber, renderOptions) {
                var documentId = renderOptions.documentId;
                var pdfDocument = renderOptions.pdfDocument;
                var scale = renderOptions.scale;
                var rotate = renderOptions.rotate;
                // Load the page and annotations
                return Promise.all([pdfDocument.getPage(pageNumber), _PDFJSAnnotate2.default.getAnnotations(documentId, pageNumber)]).then(function (_ref) {
                    var _ref2 = _slicedToArray(_ref, 2);
                    var pdfPage = _ref2[0];
                    var annotations = _ref2[1];
                    var page = document.getElementById('pageContainer' + pageNumber);
                    var svg = page.querySelector('.annotationLayer');
                    var canvas = page.querySelector('.canvasWrapper canvas');
                    var canvasContext = canvas.getContext('2d', {alpha: false});
                    var viewport = pdfPage.getViewport(scale, rotate);
                    var transform = scalePage(pageNumber, viewport, canvasContext);
                    var renderContext = {
                        canvasContext: canvasContext,
                        viewport: viewport,
                        transform: transform
                    };
                    // Render the page
                    return Promise.all([pdfPage.render(renderContext), _PDFJSAnnotate2.default.render(svg, viewport, annotations)]).then(function () {
                        // Text content is needed for a11y, but is also necessary for creating
                        // highlight and strikeout annotations which require selecting text.
                        return pdfPage.getTextContent({normalizeWhitespace: true}).then(function (textContent) {
                            return new Promise(function (resolve, reject) {// Render text layer for a11y of text content
                                var textLayer = page.querySelector('.textLayer');
                                var textLayerFactory = new pdfjsViewer.DefaultTextLayerFactory();
                                var textLayerBuilder = textLayerFactory.createTextLayerBuilder(textLayer, pageNumber - 1, viewport);
                                textLayerBuilder.setTextContent(textContent);
                                textLayerBuilder.render();// Enable a11y for annotations
                                // Timeout is needed to wait for `textLayerBuilder.render`
                                setTimeout(function () {
                                    try {
                                        (0, _renderScreenReaderHints2.default)(annotations.annotations);
                                        resolve();
                                    } catch (e) {
                                        reject(e);
                                    }
                                });
                            });
                        });
                    }).then(function () {// Indicate that the page was loaded
                        page.setAttribute('data-loaded', 'true');
                        return[pdfPage, annotations];
                    });
                });
            }

Cette partie du code provient du projet annotation js :
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js

Comme vous pouvez également le voir, chaque page a sa propre toile. Donc, je ne sais pas pourquoi je reçois toujours une telle erreur.

Qu'est-ce qui ne va pas et où dois-je me pencher?

1-other

Commentaire le plus utile

Des mises à jour sur ce problème ?

Tous les 13 commentaires

@atnsm bro puis-je savoir si vous utilisez PDF-annotate dans Angular 2+ ?

Je ne pense pas. Voici la liste de toutes les dépendances :
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

Même problème, comment y remédier.

Voir la même erreur avec le react-pdf-js qui est un wrapper autour pdfjs-dist .

En utilisant la dernière version de pdfjs (2.0.550), j'obtiens l'erreur suivante :

Il est tout à fait possible que ce problème soit un doublon de #9456, auquel cas il a été corrigé par PR #9853 (qui n'a pas atterri à temps pour être inclus dans la version 2.0.550 ).

Je le dirais aussi. Fermons cela et nous pourrons toujours rouvrir si la version finale 2.0 est terminée et que le problème persiste.

Je rencontre le même problème. Besoin d'aide.

Des mises à jour sur ce problème ?

J'ai eu ce problème lorsque j'utilise pdfjs dans angular 8. Hope peut aider quelqu'un:

public ngOnDestroy() {
si (ceci._pdf) {
this._pdf.destroy();
}
si (this.renderTask) {
this.renderTask.cancel();
}
}
dans la fonction de rendu, vous devriez obtenir l'élément canvas par : this.element.nativeElement.children[0] au lieu de requête avec le document dom

Des mises à jour sur ce problème ?

J'ai le même problème, en utilisant une seule toile pour afficher les documents et l'utilisateur peut sélectionner l'un des multiples documents à afficher

J'ai le même problème, en utilisant une seule toile pour afficher les documents et l'utilisateur peut sélectionner l'un des multiples documents à afficher

Vous devez annuler puis détruire le processus de rendu pdf avant de pouvoir rendre un nouveau fichier pdf

Quelqu'un pourrait-il expliquer la bonne façon d'annuler et de restituer la même page?

D'après d'autres problèmes que j'ai vus, vous ne devriez pas utiliser le même canevas pour exécuter deux tâches de rendu à la fois. Et vous devez soit attendre que le précédent se termine (ce que je ne veux pas faire) soit l'annuler.

Mais appeler cancel sur la tâche précédente ne résout toujours pas le problème où parfois une page est rendue à l'envers, ce qui se produit soi-disant si vous exécutez deux tâches de rendu sur le même canevas.

La solution de @huannxdev vous oblige également à détruire le pdf. Mais je ne veux pas avoir à le recharger juste pour restituer une seule page.

Cette page vous a été utile?
0 / 5 - 0 notes