快捷導(dǎo)航

前端html2canvas生成截圖實(shí)現(xiàn)步驟與踩坑記錄

更新時(shí)間：2024年09月28日 08:55:11 作者：Lucky_Dog_c

這篇文章主要介紹了前端html2canvas生成截圖實(shí)現(xiàn)步驟與踩坑的相關(guān)資料,主要步驟包括使用html2canvas生成截圖以及處理圖片跨域和CSS樣式丟失問題,可選方案包括轉(zhuǎn)換圖片為base64編碼和使用domtoimage插件,需要的朋友可以參考下

需求：

點(diǎn)擊下載可以導(dǎo)出組件的截圖及數(shù)據(jù)信息文件

分析：

前端生成組件截圖，帶著其他參數(shù)傳給后端，拿到excel文件并下載。關(guān)鍵在于生成組件的截圖，這里通過html2canvas插件來實(shí)現(xiàn)。

實(shí)現(xiàn)步驟

1.下載插件

npm install html2canvas

2.引入

import html2canvas from 'html2canvas'

3.通過ref拿到要下載組件的dom元素

	//下載圖標(biāo)，綁定下載事件
	<i class="el-icon-download" style="cursor: pointer;" @click="download"></i>

	//需要生成截圖的部分
	<div class='wrapper' ref='screen'>
	...
	</div>

4.通過html2canvas生成截圖

	download() {
		//el的全局loading，根據(jù)需求，可加可不加,在下載完成時(shí)或請(qǐng)求完成時(shí)用 loading.close()關(guān)閉
        const loading = this.$loading({ 
          lock: true,
          text: '文件下載中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.8)'
        });
        
        html2canvas(this.$refs.screen, {
          backgroundColor: null,//畫布背景色（如果未在DOM中指定）。設(shè)置null為透明
          useCORS: true,    //允許跨域
          scale: 1   		//用于渲染的比例
        }).then((canvas) => {
           // 此時(shí)已經(jīng)生成我們想要的截圖,可以下載查看
           const url = canvas.toDataURL('image/png') //轉(zhuǎn)圖片鏈接,為圖片的base64形式
           const a = document.createElement('a')
           const event = new MouseEvent('click')
           a.download = '圖片'
           a.href = url
           a.dispatchEvent(event)
           loading.close()
           
		   // 轉(zhuǎn)為png格式文件格式傳以給后端
		   // formData即為我們要傳的內(nèi)容,如果還有其他參數(shù)要傳輸可以通過formData.append('key',value)來添加
		   const formData = new FormData()
		   canvas.toBlob(function(blob) {
            formData.append('image', blob, 'image.png')
          })
        })
      },

可能遇到的問題

1.圖片跨域

因?yàn)轫?xiàng)目的圖片資源是托管在另一個(gè)平臺(tái)上，在生成截圖時(shí)，原有dom的圖片由于跨域 canvas “被污染”,一直無法生成，嘗試了多種辦法，設(shè)置useCORS: true且給img標(biāo)簽設(shè)crossorigin="anonymous"也無法解決。最后找到兩種解決方案:一種是把圖片轉(zhuǎn)為編碼格式base64，此方法可以純前端解決該問題，另一種是修改服務(wù)端的配置來解決跨域問題。采用的是第一種方案，附上轉(zhuǎn)base64的方法。(但這種方法也會(huì)有代碼冗余體積增大，可讀性降低等缺點(diǎn))

imgUrlToBase64(imgUrl) {
       const image = new Image();
       image.setAttribute('crossOrigin', 'anonymous');
       const imageUrl = imgUrl;
       image.src = imageUrl
       // image.onload為異步加載
       image.onload = () => {
         var canvas = document.createElement('canvas');
         canvas.width = image.width;
         canvas.height = image.height;
         var context = canvas.getContext('2d');
         context.drawImage(image, 0, 0, image.width, image.height);
         var quality = 0.8;
         const dataurl = canvas.toDataURL('image/png', quality);
         console.log(dataurl, 'dataurl64')
       }
     },

2.css樣式丟失

html2canvas的屏幕截圖是基于 DOM 的，不會(huì)生成實(shí)際的屏幕截圖，而是基于頁面上可用的信息構(gòu)建屏幕截圖，html2canvas庫(kù)對(duì)以下樣式可能無效或不完全支持：

CSS動(dòng)畫和過渡效果：html2canvas庫(kù)在截圖時(shí)不會(huì)觸發(fā)CSS動(dòng)畫和過渡效果，只會(huì)捕捉到元素的初始狀態(tài)。
CSS偽元素（如::before和::after）：html2canvas庫(kù)無法捕捉到CSS偽元素的樣式。
CSS濾鏡效果：html2canvas庫(kù)無法捕捉到CSS濾鏡效果（如blur、grayscale等）。
CSS變量（CustomProperties）：html2canvas庫(kù)無法解析和應(yīng)用CSS變量。
SVG圖像：html2canvas庫(kù)對(duì)SVG圖像的支持有限，可能無法正確渲染和捕捉SVG圖像。

生成截圖的其他方案domtoimage

由于html2canvas這個(gè)插件在生成截圖的時(shí)候有很多弊端，在canvas繪制時(shí)耗時(shí)長(zhǎng)，且繪制時(shí)屏幕會(huì)阻塞無法操作，后續(xù)截圖選擇了其他方案，使用domtoimage發(fā)現(xiàn)絲滑很多，可參考文章使用domtoimage生成截圖。