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

• PDF.js提取PDF文件中的圖片
• • 需求
  • 步驟
  • • 從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>的形式顯示出來，可以拖拽。

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。