Pdf.js: No se puede usar el mismo lienzo durante múltiples operaciones de render()

Creado en 28 ago. 2018  ·  13Comentarios  ·  Fuente: mozilla/pdf.js

Al usar la última versión de pdfjs (2.0.550), aparece el siguiente error:

No se puede usar el mismo lienzo durante varias operaciones de render().

El código que estoy usando para renderizar es el siguiente:

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];
                    });
                });
            }

Esa parte del código es del proyecto js de anotación:
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js

Como también puede ver, cada página tiene su propio lienzo. Entonces, no sé por qué sigo recibiendo ese error.

¿Qué está fallando y dónde debo investigar?

1-other

Comentario más útil

¿Alguna actualización sobre este tema?

Todos 13 comentarios

@atnsm hermano, ¿puedo saber si está usando anotación en PDF en Angular 2+?

No me parece. Aquí está la lista de todas las dependencias:
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

Mismo problema, como solucionarlo.

Ver el mismo error con react-pdf-js que es un contenedor alrededor pdfjs-dist .

Al usar la última versión de pdfjs (2.0.550), aparece el siguiente error:

Es muy posible que este problema sea un duplicado del n.º 9456, en cuyo caso lo solucionó el PR n.º 9853 (que no llegó a tiempo para incluirse en la versión 2.0.550 ).

Yo también lo diría. Cerremos esto y siempre podemos volver a abrir si se realiza la versión final 2.0 y el problema persiste.

Me encuentro con el mismo problema. Se necesita ayuda.

¿Alguna actualización sobre este tema?

Tengo estos problemas cuando uso pdfjs en angular 8. Espero poder ayudar a alguien:

público ngOnDestroy () {
si (esto._pdf) {
esto._pdf.destroy();
}
if (esta.renderTask) {
this.renderTask.cancel();
}
}
en la función de renderizado, debe obtener el elemento canvas mediante: this.element.nativeElement.children[0] en lugar de consultar con el documento dom

¿Alguna actualización sobre este tema?

Tengo el mismo problema, uso un solo lienzo para mostrar los documentos y el usuario puede seleccionar uno de varios documentos para mostrar

Tengo el mismo problema, uso un solo lienzo para mostrar los documentos y el usuario puede seleccionar uno de varios documentos para mostrar

Debe cancelar y luego destruir el proceso de renderizado en pdf antes de poder renderizar un nuevo archivo pdf

¿Alguien podría explicar la forma correcta de cancelar y volver a renderizar la misma página?

Por otros problemas que he visto, no debe usar el mismo lienzo para ejecutar dos tareas de procesamiento a la vez. Y tienes que esperar a que termine el anterior (que no quiero) o cancelarlo.

Pero llamar a cancel en la tarea anterior aún no resuelve el problema en el que a veces una página se representa al revés, lo que supuestamente sucede si está ejecutando dos tareas de representación en el mismo lienzo.

La solución de @huannxdev también requiere que destruyas el pdf. Pero no quiero tener que volver a cargarlo solo para volver a renderizar una sola página.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

azetutu picture azetutu  ·  4Comentarios

timvandermeij picture timvandermeij  ·  4Comentarios

xingxiaoyiyio picture xingxiaoyiyio  ·  3Comentarios

zerr0s picture zerr0s  ·  3Comentarios

dmisdm picture dmisdm  ·  3Comentarios