PDFjs提取文件中的图片
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提取文件中的图片的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: QQ云控引流 为您定制营销推广方案
- 下一篇: AcrelEMS企业微电网能效管理平台助