Pdf.js: Нельзя использовать один и тот же холст во время нескольких операций рендеринга().

Созданный на 28 авг. 2018  ·  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

Как вы можете видеть, у каждой страницы есть собственный холст. Итак, я не знаю, почему я все еще получаю такую ​​​​ошибку.

Что происходит не так и где мне нужно разобраться?

Самый полезный комментарий

Есть обновления по этому вопросу?

Все 13 Комментарий

@atnsm, братан, могу ли я узнать, используете ли вы PDF-аннотации в Angular 2+?

Не думаю. Вот список всех зависимостей:
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 будет готов, а проблема останется.

Я столкнулся с той же проблемой. Нужна помощь.

Есть обновления по этому вопросу?

У меня возникли эти проблемы, когда я использую pdfjs в angular 8. Надеюсь, кому-нибудь поможет:

публичный ngOnDestroy () {
если (это._pdf) {
this._pdf.destroy();
}
если (это.renderTask) {
this.renderTask.cancel();
}
}
в функции рендеринга вы должны получить элемент холста: this.element.nativeElement.children[0] вместо запроса с документом dom

Есть обновления по этому вопросу?

У меня та же проблема, я использую один холст для отображения документов, и пользователь может выбрать один из нескольких документов для отображения.

У меня та же проблема, я использую один холст для отображения документов, и пользователь может выбрать один из нескольких документов для отображения.

Вы должны отменить, а затем уничтожить процесс рендеринга PDF, прежде чем вы сможете визуализировать новый файл PDF.

Может ли кто-нибудь объяснить, как правильно отменить и повторно отобразить одну и ту же страницу?

Из других проблем, которые я видел, вы не должны использовать один и тот же холст для одновременного запуска двух задач рендеринга. И вам нужно либо дождаться завершения предыдущего (чего я не хочу делать), либо отменить его.

Но вызов cancel в предыдущей задаче по-прежнему не решает проблему, из-за которой иногда страница отображается вверх ногами, что предположительно происходит, если вы запускаете две задачи рендеринга на одном холсте.

Решение @huannxdev также требует, чтобы вы уничтожили PDF-файл. Но я не хочу перезагружать его только для повторного рендеринга одной страницы.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги