pdf.js: Cannot use the same canvas during multiple render() operations
Using latest pdfjs version (2.0.550) I get the following error:
Cannot use the same canvas during multiple render() operations. Use different canvas or ensure previous operations were cancelled or completed.
The code I am using for rendering is as follow:
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];
});
});
}
That part of the code is from annotation js project: https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js
As you can also see every pages hast it own canvas. So, I don’t know why I still get such error.
What is going wrong and where I need to look into?
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 16 (1 by maintainers)
Any updates on this issue ?
I got this problems when i use pdfjs in angular 8. hope can help someone:
public ngOnDestroy() { if (this._pdf) { this._pdf.destroy(); } if (this.renderTask) { this.renderTask.cancel(); } } in render function, you should get canvas element by: this.element.nativeElement.children[0] instead of query with dom document