PDFjs提取文件中的图片
PDFjs使用筆記-pdf文件中圖片提取
- PDF.js提取PDF文件中的圖片
- 需求
- 步驟
- 從PDFjs官網(wǎng)下載源碼
- 編譯環(huán)境搭建
- 修改代碼
- 編譯
PDF.js提取PDF文件中的圖片
需求
使用PDFjs庫(kù)在網(wǎng)頁(yè)中展示pdf文件,要求PDF文件中的插入的圖片可以拖拽出來(lái)。
步驟
從PDFjs官網(wǎng)下載源碼
下載地址:https://github.com/mozilla/pdf.js
編譯環(huán)境搭建
根據(jù)代碼中的[README.md]文件的的說(shuō)明搭建開(kāi)發(fā)環(huán)境(開(kāi)發(fā)工具我的用的是vscode)。
先要安裝node.js
再根據(jù)里面的提示操作
1.安裝gulp
$ npm install -g gulp-cli
2.安裝PDFjs依賴(lài)包
$ npm install
3.啟動(dòng)測(cè)試服務(wù)
$ gulp server
一切正常的話就可以通過(guò)下面的地址訪問(wèn)了
http://localhost:8888/web/viewer.html?file=test.pdf
修改代碼
pdf.js是使用canvas渲染的,所以我們需要在canvas渲染畫(huà)像的處理中,把畫(huà)像對(duì)象單獨(dú)提取出來(lái)。
研究canvas的代碼發(fā)現(xiàn)里面已經(jīng)預(yù)留了圖片提取的處理但是沒(méi)有實(shí)現(xiàn),我們只需要找一個(gè)展示層實(shí)現(xiàn)這個(gè)處理即可。
1.我們使用原來(lái)顯示文本的圖層加載提取出來(lái)的圖片
在創(chuàng)建canvas渲染類(lèi)的時(shí)候,把顯示文本的textLayer變量傳進(jìn)去。
修改文件pdf_page_view.js(源代碼這里是留了這個(gè)參數(shù)的,但是沒(méi)有傳參數(shù))
2.修改canvas.js處理,把處理中的畫(huà)像傳給展示層處理(修改已有的處理)
3.修改text_layer_builder.js文件增加圖片添加處理
編譯
通過(guò)下面這個(gè)命令就可以生成打包文件
$ gulp generic
生成文件在 ./build/generic 這個(gè)目錄下,整個(gè)目錄拿過(guò)來(lái)就可以使用了
./generic/web/viewer.html?file=target.pdf
好了,終于可以把PDF里面的畫(huà)像元素以<img>的形式顯示出來(lái),可以拖拽。
總結(jié)
以上是生活随笔為你收集整理的PDFjs提取文件中的图片的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: QQ云控引流 为您定制营销推广方案
- 下一篇: AcrelEMS企业微电网能效管理平台助