javascript - 在 WebWorker 中使用 pdf.js?
问题描述
我正在使用pdf.js从 pdf 文档生成图像。
这是我的代码
import { pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.js`
// GENERATE IMAGES
const loadingTask = pdfjs.getDocument(dataUrl);
const pdf = await loadingTask.promise;
const promises = Array.from(new Array(pdf.numPages)).map((_, index) => {
return new Promise((resolve, reject) => {
var canvas = document.createElement("canvas");
pdf.getPage(index + 1).then((page) => {
var vp = page.getViewport({ scale: 1 });
canvas.width = 595;
canvas.height = 842;
var scale = Math.min(canvas.width / vp.width, canvas.height / vp.height);
const canvasContext = canvas.getContext("2d");
if (!canvasContext) return reject("Can not get context");
const renderedPage = page.render({
canvasContext,
viewport: page.getViewport({ scale }),
});
return renderedPage.promise.then(() => {
const url = canvas.toDataURL("image/jpeg");
resolve(url);
});
});
});
});
它工作正常。但是在生成过程中,它阻塞了导致一些 UI 问题的主线程。
因此,我想将所有逻辑移至 Web Worker 以释放主线程。
但是在web worker中运行时,出现错误:
pdf.js:11210 Uncaught (in promise) 错误:设置假工人失败:“ webpack_require (...).ensure is not a function”。
它是从这个函数setupFakeWorkerGlobal抛出的
我的猜测是它无法加载workerSrc
,所以它必须fake worker
与抛出错误一起使用。:(
我会很感激任何帮助。
解决方案
推荐阅读
- jupyter-notebook - 安装 nbextensions 后 jupyter 根本不会运行
- regex - 通过正则表达式删除棘手的短语模式
- android - 将 unity3d 构建自动部署到许多 android 设备
- python - org-babel python 环境设置
- json - Angular 6 ngFor 在嵌套 JSON 上选择对象
- ruby-on-rails - 仅显示与 Ransack gem 的所有搜索条件匹配的结果
- javascript - 如何使用javascript作为客户端和python作为Web服务器在websocets之间进行通信
- linux - 如何在 Linux 上测量 CPU 使用率和内存百分比与时间的关系?
- typescript - 我们可以在 JavaScript 文件中内联编写声明,这样我们就不必编写额外的 .d.ts 文件了吗?
- mysql - 如何查找具有多个不同名称的项目