一、關(guān)于html2canvas
介紹
html2canvas網(wǎng)址為：https://html2canvas.hertzen.com/documentation
腳本遍歷加載頁(yè)面的DOM元素的信息，然后將其用于構(gòu)建頁(yè)面的表示形式。換句話(huà)說(shuō)，它實(shí)際上并不截取頁(yè)面的屏幕截圖，而是根據(jù)它從DOM讀取的屬性來(lái)構(gòu)建頁(yè)面的表示形式。
結(jié)果，它只能正確呈現(xiàn)它理解的屬性，這意味著有許多CSS屬性無(wú)效，受支持的CSS。
局限性
腳本使用的所有圖片都必須位于相同的來(lái)源， 以便它無(wú)需代理即可讀取它們。同樣，如果canvas 頁(yè)面上還有其他元素被跨域內(nèi)容污染，它們將變臟并且無(wú)法被html2canvas讀取。
瀏覽器兼容性
二、需求場(chǎng)景
業(yè)務(wù)需要前端頁(yè)面內(nèi)容生成特定的海報(bào)圖片，然后分享到第三方供人瀏覽和傳播。
三、在vue項(xiàng)目中的使用
1. 安裝html2canvas
npm install --save html2canvas
2. 按需引入
在需要使用的頁(yè)面中先引入html2canvas
import html2canvas from 'html2canvas'
3.在template模板中
配置要截圖的內(nèi)容，在截屏容器（最外層的元素）設(shè)置屬性ref="imageTofile"，把要合成圖片的內(nèi)容都放進(jìn)這個(gè)元素內(nèi)部中。
<template>
<!-- 把要截圖的元素放在一個(gè)元素里,設(shè)置一個(gè)ref -->
<section class="image_tofile" ref="imageTofile">
<!-- 元素內(nèi)部放置要合成圖片的內(nèi)容 -->
<img class="poster-img" :src="personalBill" alt="">
<p class="poster-text">注意元素的樣式，有些樣式不能被截屏</p>
<p class="poster-text">不要用背景圖片，用img標(biāo)簽防止截圖模糊</p>
</section>
</template>
4.在js中的配置
toImage方法實(shí)現(xiàn)html中的元素轉(zhuǎn)換成圖片,得到為base64格式的圖片。
methods: {
// 頁(yè)面元素轉(zhuǎn)圖片
toImage() {
// 第一個(gè)參數(shù)是需要生成截圖的元素,第二個(gè)是自己需要配置的參數(shù),寬高等
return html2canvas(this.$refs.imageTofile, {
backgroundColor: null, // 背景顏色
dpi: 192, // 將分辨率提高到特定的dpi,默認(rèn)值為96
scale: 2, // 用于渲染的比例尺。默認(rèn)為瀏覽器設(shè)備像素比率。默認(rèn)值是1，手機(jī)端設(shè)置成2
useCORS:true, // 是否嘗試使用CORS從服務(wù)器加載圖像
}).then((canvas) => {
this.posterUrl = canvas.toDataURL('image/png')
})
},
},
這時(shí)得到的圖片是個(gè)base64格式的字符，根據(jù)業(yè)務(wù)場(chǎng)景的需要進(jìn)行后續(xù)的處理就可以了。
四、使用中遇到的問(wèn)題
1.截圖不全
(1)、當(dāng)合成圖片的元素過(guò)多的時(shí)候，調(diào)用toImage時(shí)，有可能元素還未加載或渲染完成，會(huì)造成截屏內(nèi)容不全。
// 可以利用延時(shí)
setTimeout(() => {
this.toImage()
}, 10)
(2)、頁(yè)面滑動(dòng)造成的，當(dāng)html2canvas進(jìn)行截圖時(shí)，若內(nèi)容高度高于body（或者說(shuō)是屏幕視口）時(shí)，就會(huì)出現(xiàn)。
// 1、在生成截圖前，先把滾動(dòng)條置頂
window.pageYOffset = 0;
document.documentElement.scrollTop = 0
document.body.scrollTop = 0
// 2、或者讓合成圖片的部分元素從頂部往下正常排版，然后不讓其內(nèi)容滾動(dòng)。
// 一般在使用時(shí)，如果合成部分內(nèi)容簡(jiǎn)單，可以自己寫(xiě)好要合成的樣式，調(diào)整元素層級(jí)，使其隱藏在頁(yè)面不可見(jiàn)即可。
2.截圖部分白屏或黑屏
這種情況的出現(xiàn)有可能是因?yàn)楹铣蓤D片內(nèi)的元素有跨域的資源，就會(huì)造成這種情況出現(xiàn)，導(dǎo)致合成失敗。
html2canvas中配置 allowTaint:true 或 useCORS:true（我用的useCORS:true）
跨域資源圖片服務(wù)器配置Access-Control-Allow-Origin 或使用代理，
（通過(guò)后臺(tái)小伙伴配置了圖片所在服務(wù)器的響應(yīng)頭信息，所以本人沒(méi)有用到代理的方式來(lái)處理）
3.截圖后圖片模糊
// html2canvas中配置兩個(gè)配置項(xiàng),`scale`和`dpi`，經(jīng)測(cè)試使用如下參數(shù)即可
dpi: 192, // 將分辨率提高到特定的dpi,默認(rèn)值為96
scale: 2, // 用于渲染的比例尺。默認(rèn)為瀏覽器設(shè)備像素比率。默認(rèn)值是1，手機(jī)端設(shè)置成2
// 還有一點(diǎn)就是當(dāng)合成元素中有背景圖片的部分，都換成用img標(biāo)簽代替，否則合成出來(lái)的截圖即使加上了上邊的參數(shù)，也會(huì)模糊。
