PDFjs使用筆記-pdf文件中圖片提取

• PDF.js提取PDF文件中的圖片
• • 需求
  • 步驟
  • • 從PDFjs官網(wǎng)下載源碼
    • 編譯環(huán)境搭建
    • 修改代碼
  • 編譯

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

需求

使用PDFjs庫在網(wǎng)頁中展示pdf文件，要求PDF文件中的插入的圖片可以拖拽出來。

步驟

從PDFjs官網(wǎng)下載源碼

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

編譯環(huán)境搭建

根據(jù)代碼中的[README.md]文件的的說明搭建開發(fā)環(huán)境（開發(fā)工具我的用的是vscode）。
先要安裝node.js
再根據(jù)里面的提示操作

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

2.安裝PDFjs依賴包
$ npm install

3.啟動(dòng)測試服務(wù)
$ gulp server

一切正常的話就可以通過下面的地址訪問了
http://localhost:8888/web/viewer.html?file=test.pdf

修改代碼

pdf.js是使用canvas渲染的，所以我們需要在canvas渲染畫像的處理中，把畫像對象單獨(dú)提取出來。
研究canvas的代碼發(fā)現(xiàn)里面已經(jīng)預(yù)留了圖片提取的處理但是沒有實(shí)現(xiàn)，我們只需要找一個(gè)展示層實(shí)現(xiàn)這個(gè)處理即可。
1.我們使用原來顯示文本的圖層加載提取出來的圖片
在創(chuàng)建canvas渲染類的時(shí)候，把顯示文本的textLayer變量傳進(jìn)去。
修改文件pdf_page_view.js（源代碼這里是留了這個(gè)參數(shù)的，但是沒有傳參數(shù)）

2.修改canvas.js處理，把處理中的畫像傳給展示層處理（修改已有的處理）

3.修改text_layer_builder.js文件增加圖片添加處理

編譯

通過下面這個(gè)命令就可以生成打包文件
$ gulp generic
生成文件在 ./build/generic 這個(gè)目錄下，整個(gè)目錄拿過來就可以使用了
./generic/web/viewer.html?file=target.pdf

好了，終于可以把PDF里面的畫像元素以<img>的形式顯示出來，可以拖拽。

總結(jié)

以上是生活随笔為你收集整理的PDFjs提取文件中的图片的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。