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?
@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.
Comentario más útil
¿Alguna actualización sobre este tema?