Pdf.js: 在多个 render() 操作期间不能使用相同的画布

创建于 2018-08-28  ·  13评论  ·  资料来源: mozilla/pdf.js

使用最新的 pdfjs 版本(2.0.550)我收到以下错误:

在多个 render() 操作期间不能使用相同的画布。

我用于渲染的代码如下:

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

那部分代码来自注释js项目:
https://github.com/instructure/pdf-annotate.js/blob/master/docs/index.js

正如您还可以看到每个页面都有自己的画布。 所以,我不知道为什么我仍然会收到这样的错误。

出了什么问题以及我需要调查的地方?

1-other

最有用的评论

关于这个问题的任何更新?

所有13条评论

@atnsm兄弟我可以知道您是否在 Angular 2+ 中使用 PDF-annotate 吗?

我不这么认为。 以下是所有依赖项的列表:
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

同样的问题,如何解决。

看到与react-pdf-js相同的错误,它是pdfjs-dist的包装器。

使用最新的 pdfjs 版本(2.0.550)我收到以下错误:

这个问题很可能是 #9456 的重复,在这种情况下,它已由 PR #9853 修复(它没有及时包含在版本2.0.550中)。

我也会这么说。 让我们关闭它,如果最终的 2.0 版本完成并且问题仍然存在,我们总是可以重新打开。

我遇到了同样的问题。 需要帮助。

关于这个问题的任何更新?

当我在 angular 8 中使用 pdfjs 时遇到了这个问题。希望可以帮助某人:

公共 ngOnDestroy() {
如果(this._pdf){
this._pdf.destroy();
}
如果(this.renderTask){
this.renderTask.cancel();
}
}
在渲染函数中,您应该通过以下方式获取画布元素: this.element.nativeElement.children[0] ,而不是使用dom 文档查询

关于这个问题的任何更新?

我遇到了同样的问题,使用单个画布显示文档,用户可以选择多个文档之一来显示

我遇到了同样的问题,使用单个画布显示文档,用户可以选择多个文档之一来显示

您应该先取消然后销毁渲染 pdf 进程,然后才能渲染新的 pdf 文件

有人可以解释取消和重新呈现同一页面的正确方法吗?

从我看到的其他问题来看,您不应该使用同一个画布同时运行两个渲染任务。 而且您必须等待前一个完成(我不想这样做)或取消它。

但是在上一个任务上调用cancel仍然不能解决有时页面被颠倒呈现的问题,如果您在同一个画布上运行两个呈现任务,就会发生这种情况。

@huannxdev的解决方案还要求您销毁 pdf。 但我不想仅仅为了重新渲染一个页面而重新加载它。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

hp011235 picture hp011235  ·  4评论

smit-modi picture smit-modi  ·  3评论

jigskpatel picture jigskpatel  ·  3评论

SehyunPark picture SehyunPark  ·  3评论

zerr0s picture zerr0s  ·  3评论