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 bro Angular 2+でPDFアノテーションを使用しているかどうかを知ることができますか?

そうは思わない。 すべての依存関係のリストは次のとおりです。
https://github.com/instructure/pdf-annotate.js/blob/master/package.json

同じ問題、これを修正する方法。

pdfjs-distのラッパーであるreact-pdf-jsでも同じエラーが発生します。

最新のpdfjsバージョン(2.0.550)を使用すると、次のエラーが発生します。

この問題が#9456の重複である可能性は十分にあります。その場合、PR#9853(バージョン2.0.550に含まれるのに間に合わなかった)によって修正されています。

私もそう言うでしょう。 これを閉じて、2.0の最終リリースが完了し、問題が解決しない場合はいつでも再開できます。

私は同じ問題に遭遇します。 ヘルプが必要です。

この問題に関する更新はありますか?

Angular 8でpdfjsを使用すると、この問題が発生しました。希望が誰かを助けることができます。

public ngOnDestroy(){
if(this._pdf){
this._pdf.destroy();
}
if(this.renderTask){
this.renderTask.cancel();
}
}
レンダリング関数では、 dom documentを使用したクエリの代わりに、 this.element.nativeElement.children [0]によってcanvas要素を取得する必要があります。

この問題に関する更新はありますか?

同じ問題が発生しています。単一のキャンバスを使用してドキュメントを表示し、ユーザーは複数のドキュメントの1つを選択して表示できます

同じ問題が発生しています。単一のキャンバスを使用してドキュメントを表示し、ユーザーは複数のドキュメントの1つを選択して表示できます

新しいpdfファイルをレンダリングする前に、renderpdfプロセスをキャンセルして破棄する必要があります

誰かが同じページをキャンセルして再レンダリングする適切な方法を説明できますか?

私が見た他の問題から、2つのレンダリングタスクを同時に実行するために同じキャンバスを使用するべきではありません。 そして、前のものが終了するのを待つか(私はやりたくない)、それをキャンセルする必要があります。

ただし、前のタスクでcancelを呼び出しても、ページが上下逆にレンダリングされることがあるという問題は解決されません。これは、同じキャンバスで2つのレンダリングタスクを実行している場合に発生する可能性があります。

@huannxdevのソリューションでは、PDFを破棄する必要もあります。 ただし、1つのページを再レンダリングするためだけにリロードする必要はありません。

このページは役に立ちましたか?
0 / 5 - 0 評価