Pdf.js: WebワーカーでPDF.jsキャンバスレンダリングを実行する

作成日 2018年11月29日 · 4コメント · ソース: mozilla/pdf.js

構成：

Chrome 71
オペレーティングシステムとそのバージョン：任意
PDF.jsバージョン：2.0.943
ブラウザ拡張機能です：いいえ

問題を再現する手順：

次のようなWebワーカーを作成します。

function onmessage () {
  const pdfDocument = await pdfjs.getDocument('/some-hard-coded.pdf')
  const page = await pdfDocument.getPage(1)
  const viewport = pdfPage.getViewport(1)
  const width = 250
  const height = viewport.height * (width / viewport.width)
  const canvas = new OffscreenCanvas(width, height)
  const canvasContext = canvas.getContext('2d', { alpha: false })
  return page.render({ canvasContext, viewport })
})

たとえばw = new Worker('sample-pdf.js');これを呼び出します

期待される動作は何ですか？（スクリーンショットを追加）

PDFはOffscreenCanvasレンダリングされます

何が悪かったのか？（スクリーンショットを追加）

ReferenceError：ドキュメントが定義されていません
GenericFontLoader.insertRule（pdf.js：10154）で
GenericFontLoader.bind（pdf.js：10205）で
WorkerTransportで。（pdf.js：9177）
LoopbackPort.MessageHandler._onComObjOnMessage（pdf.js：12833）で
LoopbackPortで。（pdf.js：8681）
Array.forEachで（）

つまり、これは失敗しています：

styleElement = this.styleElement = document.createElement（ 'style'）;

問題は、DOMがないことです。 PDF.jsにはノードの例があるため、問題はドキュメントの1つである可能性があります。または、問題が深く潜んでいる可能性があります。いずれにせよ、ここにいくつかの明白なガイドラインがある場合に備えて、私はそれを報告したいと思いました。

1-core

ソース

brianmhunt

👍8

最も参考になるコメント

Webワーカー内でpdf.jsをどのように使用しますか？

これでインポートしました。

// Worker.ts
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`;

pdfjs.getDocument(...) => errors

ただし、 getDocumentを使用する場合。エラーを返します

Uncaught（in promise）エラー：偽のワーカーの設定に失敗しました： "__ webpack_require __（...）。ensure is not a function"

tandat2209 2020年04月24日

👍3

全てのコメント4件

（本質的に）問題＃10039の複製のように見えます。ほとんどの場合、 OffscreenCanvasをすぐにサポートするには、かなりの量のリファクタリングが必要になります。

Snuffleupagus 2018年11月29日

ありがとう。 @Snuffleupagus私はその問題を見たので、それをリンクする必要がありました。問題は、次の意味で同一ではありません。

OffscreenCanvasはメインスレッドで使用できます（つまり、その使用はWebワーカーに限定されません）。
WebワーカーはOffscreenCanvasを使用する必要はありません（つまり、OffscreenCanvas以外のCanvasポリフィルが機能する可能性があります）。
PDF.jsがWebワーカーで抱えている問題は、OffscreenCanvasが機能していることだけではない可能性があります。

言い換えると、 OffscreenCanvasサポートは、たまたまCanvasElement代わりになる可能性のある別の問題ですが、それだけではこの問題を解決するには不十分な場合があります。

brianmhunt 2018年11月29日

https://github.com/mozilla/pdf.js/blob/master/examples/node/pdf2png/pdf2png.js （ノードの例）を見ると、 canvasFactoryを作成する必要があるようです。、それも。そうするとどうなりますか？

jsoo1 2019年05月08日