PDFjs提取文件中的图片

PDF.js提取PDF文件中的图片

需求

使用PDFjs库在网页中展示pdf文件，要求PDF文件中的插入的图片可以拖拽出来。

步骤

从PDFjs官网下载源码

下载地址：https://github.com/mozilla/pdf.js

编译环境搭建

根据代码中的[README.md]文件的的说明搭建开发环境（开发工具我的用的是vscode）。
先要安装node.js
再根据里面的提示操作

1.安装gulp
$ npm install -g gulp-cli

2.安装PDFjs依赖包
$ npm install

3.启动测试服务
$ gulp server

一切正常的话就可以通过下面的地址访问了
http://localhost:8888/web/viewer.html?file=test.pdf

修改代码

pdf.js是使用canvas渲染的，所以我们需要在canvas渲染画像的处理中，把画像对象单独提取出来。
研究canvas的代码发现里面已经预留了图片提取的处理但是没有实现，我们只需要找一个展示层实现这个处理即可。
1.我们使用原来显示文本的图层加载提取出来的图片
在创建canvas渲染类的时候，把显示文本的textLayer变量传进去。
修改文件pdf_page_view.js（源代码这里是留了这个参数的，但是没有传参数）

2.修改canvas.js处理，把处理中的画像传给展示层处理（修改已有的处理）

3.修改text_layer_builder.js文件增加图片添加处理

编译

通过下面这个命令就可以生成打包文件
$ gulp generic
生成文件在 ./build/generic 这个目录下，整个目录拿过来就可以使用了
./generic/web/viewer.html?file=target.pdf

好了，终于可以把PDF里面的画像元素以<img>的形式显示出来，可以拖拽。