htmlcanvas前段時間干好需要做一個流水線實時更新縮略圖
實現(xiàn)效果（菜鳥一枚棘街，如果更好的實現(xiàn)方法還請指出，多謝）
首先準備dom截圖的插件
使用的是html2canvas插件
// 安裝 引入html2canvas
npm install?html2canvas
項目文件引入 html2canvas
import html2canvas from 'html2canvas'
html部分
<div
????ref="mainDom">
????<div
????????ref="imageDom"
? ? >
? ? ? ? <pipeline-stage />??? ? ? ? ?<!--?流水線通用組件?-->
????</div>
</div>
// 浮窗
<div?class="absolute?thumbnail">
????<div?
????????v-if="showThumbnail"
????????ref="choose"
????????class="imagedom"
????>
????????<div
????????????ref="content"
????????????class="relative"
????????????@mousemove="handleMove"
????????>
????????????<img
????????????????:src="imgUrl"
????????????>
????????????<div
????????????????ref="shadow"
????????????????class="shadow?absolute"
????????????/>
????????</div>
????</div>
????<div
????????class="absolute"
????????:title="showThumbnail???'點擊關閉'?:?'點擊展開'"
????>
????????<i
????????????class="fa?fs18"
????????????:class="showThumbnail???'fa-eye'?:?'fa-eye-slash'"
????????????@click="setShowThumbnail"
????????/>
????</div>
</div>
JS部分通過在頁面加載完成后異步生成div圖片
watch監(jiān)聽流水線數(shù)據(jù)夫嗓，發(fā)生變化則觸發(fā) loadThumbnail()
methods:?{
????loadThumbnail?()?{
????????let?timeer?=?setTimeout(()?=>?{
????????????if?(document.readyState?===?'complete')?{ // 判斷頁面是否加載完成
????????????????this.clickGeneratePicture()
????????????}
????????},?500)??????//?清除定時器
????????this.$once('hook:beforeDestroy',?()?=>?{
????????????clearTimeout(timeer)
????????})
????},
????/**
????*?將頁面指定節(jié)點內容轉為圖片
????*?1.拿到想要轉換為圖片的內容節(jié)點DOM泛源；
????*?2.轉換，拿到轉換后的canvas
????*?3.轉換為圖片
????*/
????async?clickGeneratePicture?()?{????????if?(this.timeout)?{? ? ? ? //? 規(guī)定時間內只執(zhí)行一次赶掖，防止頁面過于卡頓
????????????return
????????}
????????this.timeout?=?true
????????html2canvas(this.$refs.imageDom,?{
????????????allowTaint:?true,?//?否允許跨源圖像污染畫布
????????????width:?this.$refs.imageDom.clientWidth,?//?dom?原始寬度? ? ? ? ? ? ? ?
????????????height:?this.$refs.imageDom.clientHeight,?//?dom?原始高度?
????????????backgroundColor:?'#f1f1f1', // DOM背景色
????????????scrollY:?0,? // 解決DOM截圖不完整的問題
????????????scrollX:?0,? // 解決DOM截圖不完整的問題
????????????useCORS:?true,?//?解決單截圖范圍內有圖片時的跨域問題
????????????dpi:?182?//?導出圖片清晰度感猛，太高會導致圖片無法加載?
????????}).then(canvas?=>?{????????//?轉成圖片，生成圖片地址
????????????this.imgUrl?=?canvas.toDataURL('image/webp',?1)? ?//?顯示縮略圖? ? ?
????????????this.showThumbnail?=?this.isShowThumbnail()?
?????????})
? ? ? ? //? 規(guī)定時間內只執(zhí)行一次奢赂，防止頁面過于卡頓
????????let?timeer?=?setTimeout(()?=>?{??????
????????????this.timeout?=?false???
????????},?1000)? ??
????????this.$once('hook:beforeDestroy',?()?=>?{? ? ? ?//?清除定時器
????????????clearTimeout(timeer)?????
????????})???
????},
????//?獲取元素到文檔區(qū)域的坐標??
????getPosition?(element)?{????
????????let?dc?=?document?????
????????let?rec?=?element.getBoundingClientRect()?????
????????let?x?=?rec.left?//?獲取元素相對瀏覽器視窗window的左陪白、上坐標?????
????????let?y?=?rec.top??????//?與html或body元素的滾動距離相加就是元素相對于文檔區(qū)域document的坐標位置????
????????x?+=?dc.documentElement.scrollLeft?||?dc.body.scrollLeft?????
????????y?+=?dc.documentElement.scrollTop?||?dc.body.scrollTop????
????????return?{???????
????????????left:?x,???????
????????????top:?y?????
????????}???
????},???
????handleMove?(evt)?{?????
????????let?shadow?=?this.$refs.shadow????
????????let?imagedom?=?this.$refs.imageDom.getBoundingClientRect()?????
????????if?(this.isShowThumbnail())?{? ?// 判斷是否需要展示縮略圖? ? ?
????????????let?pos?=?this.getPosition(this.$refs.choose)??????
????????????let?shadowRect?=?shadow.getBoundingClientRect()???????
????????????let?contentRect?=?this.$refs.content.getBoundingClientRect()??????
????????????let?maxY?=?contentRect.height?-?shadowRect.height??????
????????????let?Y?=?evt.pageY?-?pos.top?-?shadowRect.height?/?2???????
? ? ? ? ? ? //?防止遮罩層粘滯，跟隨鼠標一起滑出大圖位置??????
????????????if?(Y?<=?0)?{????????
????????????????Y?=?0??????
????????????}??????
????????????if?(Y?>=?maxY)?{?????????
????????????????Y?=?maxY??????
????????????}??????
????????????let?magnification?=?accurateDivide(imagedom.height,?shadowRect.height)?
????????????shadow.style.top?=?Y?+?'px'??????
????????????this.$refs.mainDom.scrollTo(0,?accurateTimes(Y,?magnification))????
? ? ? ? }?else?{? ? ??
? ? ? ? ? ? shadow.style.display?=?'none'?????
? ? ? ? }???
????}
}
5呈驶、html2canvas官網(wǎng)地址
