html2canvas实现网页局部存为图片和打印
1.html2canvas.js簡介
html2canvas.js具體來說是一個(gè)腳本或者js插件， 該腳本允許您直接在用戶瀏覽器上截取網(wǎng)頁或部分網(wǎng)頁的“內(nèi)容截圖”。該腳本是基于DOM進(jìn)行渲染的，所以只支持大部分的css特效，還有就是不支持跨域顯示資源或者顯示frame框架內(nèi)容等。局限還是挺大的，但是用于普通的頁面（dom）截圖真的是太方便了。
2. 引入html2canvas.js
用插件，當(dāng)然最便捷的就是使用CDN了。下面是各個(gè)版本html2canvas.js的CDN引入地址，點(diǎn)擊進(jìn)去即可獲得，如果不會引入的請留言。
https://www.bootcdn.cn/html2canvas/
如果想要直接下載插件的，請?jiān)L問如下鏈接。
http://html2canvas.hertzen.com/
鼠標(biāo)選中插件右鍵另存為就好了。不會本地引入的就請勿留言了。
3. 使用html2canvas截圖
最近有需要，做一個(gè)電子病歷截圖下載下來。
如下圖，紅色圈圈圈起來的部分是要下載的內(nèi)容。
截圖的內(nèi)容如下。
最主要的DOM結(jié)構(gòu)如下：
既然是基于DOM的，那么我們需要的就是需要截圖部分最外層的DOM。
先引入插件
然后是截圖
new html2canvas(document.getElementById('record'), {backgroundColor: "transparent", //png圖片透明allowTaint: true, // 顯示圖片useCORS: true //允許跨域}).then(canvas => {// canvas為轉(zhuǎn)換后的Canvas對象let oImg = new Image();oImg.src = canvas.toDataURL(); // 導(dǎo)出圖片$("img").attr("src",oImg.src);});這里我將img標(biāo)簽地址執(zhí)行了src屬性賦值為截圖地址，通過追蹤發(fā)現(xiàn)，src是base64編碼后的數(shù)據(jù)，
圖片src指向了如圖所示大的一大串字符。這一大串字符就是圖片通過base64編碼后的圖片數(shù)據(jù)。這里使用截圖就是用img標(biāo)簽將截圖顯示出來，由此可見，截圖效果還可以，這也是以為我截圖的內(nèi)容基本都是純dom結(jié)構(gòu)渲染的。
4.下載截圖
下載截圖相對于來說就簡單得多了
就是創(chuàng)建一個(gè)a標(biāo)簽，其href指向圖片地址，設(shè)置其download屬性值為你想要保存的圖片名字，這樣就可以了。建議圖片保存格式為png，至于為啥不是jpg，你自己去研究了。
如果這里無法下載的請留言。
5.局部打印
首先，如果是要打印html2canvas所截取下來的圖片，方案是新打開一個(gè)窗口，將圖片的src傳遞過去，并設(shè)置為body的背景圖片。然后調(diào)用window自帶的打印功能進(jìn)行打印。但是，這里打印的是圖片，所以如果是黑白印刷的話容易出現(xiàn)問題。
于是，采用第二種方案，將要打印部分dom提取出來，然后打開新的瀏覽器窗口，將提取出來的dom結(jié)構(gòu)寫入，然后再執(zhí)行打印操作。
執(zhí)行結(jié)果如下圖所示
這里之所以沒有背景色，是因?yàn)槲野驯尘吧腸ss提取出來了。值得注意的是，使用這種方法時(shí)，得將css寫在標(biāo)簽內(nèi)部，獨(dú)立出來的css是不能通過這種方法表現(xiàn)出來的。因?yàn)樵佾@取dom時(shí)無法獲取到其引用的css樣式。
如果大家有更好的方法解決網(wǎng)頁局部截圖的問題，希望能分享出來，我想用更好的東西。
總結(jié)
以上是生活随笔為你收集整理的html2canvas实现网页局部存为图片和打印的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 短视频素材怎么找？怎么做短视频运营？
- 下一篇： C语言迷宫如何实现多个关卡,c语言实现迷