快捷導(dǎo)航

前端使用domtoimage生成截圖的詳細(xì)步驟

更新時間：2024年09月28日 08:56:05 作者：Lucky_Dog_c

前端生成截圖技術(shù)多樣,html2canvas雖詳細(xì)但耗時且阻塞操作,而domtoimage使用流暢,支持多種圖片格式轉(zhuǎn)換,如png、jpg、svg等,并可獲取原始像素值,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

前端生成截圖有多種方式：

使用html2canvas，在之前文章中已有具體介紹（使用html2canvas生成截圖）這個插件在生成截圖的時候有一些弊端，在canvas繪制時耗時長，且繪制時屏幕會阻塞無法操作
使用domtoimage（官方文檔）這個插件在使用時會相對絲滑很多，一下簡單介紹使用方法（具體可結(jié)合使用html2canvas生成截圖食用）

	npm install dom-to-image //下載插件
	
	import domtoimage from 'dom-to-image'; //引入

    const screenImage = (screen) => { //screen為要下載的dom元素
      return new Promise((resolve, reject) => {
        const formData = new FormData()
        domtoimage.toBlob(screen, {  //直接轉(zhuǎn)化為二進(jìn)制格式，可以直接將圖片下載
          style: {
            backgroundColor: '#17496D' //給它一個背景色
          }
        })
          .then(function(blob) {
            formData.append('image', blob, 'image.png')
            resolve(formData)
          })
          .catch(function(error) {
            console.error('截圖生成失敗', error)
          })
      })
    }

domtoimage方法

domtoimage.toPng(…);將節(jié)點轉(zhuǎn)化為png格式的圖片 domtoimage.toJpeg(…);將節(jié)點轉(zhuǎn)化為jpg格式的圖片
domtoimage.toSvg(…);將節(jié)點轉(zhuǎn)化為svg格式的圖片，生成的圖片的格式都是base64格式
domtoimage.toBlob(…);將節(jié)點轉(zhuǎn)化為二進(jìn)制格式，這個可以直接將圖片下載
domtoimage.toPixelData(…);獲取原始像素值，以Uint8Array
數(shù)組的形式返回，每4個數(shù)組元素表示一個像素點，即rgba值。這個方法也是挺實用的，可以用于WebGL中編寫著色器顏色。

domtoimage屬性

filter ：過濾器節(jié)點中默寫不需要的節(jié)點；
bgcolor ：圖片背景顏色；
height, width ：圖片寬高；
style：傳入節(jié)點的樣式，可以是任何有效的樣式；
quality ：圖片的質(zhì)量，也就是清晰度；一個介于 0 和 1 之間的數(shù)字，表示 JPEG圖像的圖像質(zhì)量（例如 0.92 => 92%）。默認(rèn)為 1.0 (100%)
cacheBust ：將時間戳加入到圖片的url中，相當(dāng)于添加新的圖片；
imagePlaceholder ：圖片生成失敗時，在圖片上面的提示，相當(dāng)于img標(biāo)簽的alt；

附：dom-to-image實現(xiàn)的網(wǎng)頁截圖

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>echarts 測試</title>
		
        <script type="text/javascript" src="dom-to-image.js"></script>
    </head>
    <body style="position:relative;">
     <div style="width:100px;height:100px;background-color:#000;color:white;">
         尾氣請問氣味哦平均氣溫哦啤酒去i
     </div>
     <div style="width:100px;height:100px;background-color:#ccc;"></div>
     <div style="width:100px;height:100px;background-color:#666;color:#ccc;">
         請我陪考去請問哦
     </div>
     <div style="width:100px;height:100px;background-color:#000;color:white;">
            尾氣請問氣味哦平均氣溫哦啤酒去i
        </div>
        <div style="width:100px;height:100px;background-color:#ccc;"></div>
 
        <div style="width:100px;height:100px;background-color:#000;color:white;">
                尾氣請問氣味哦平均氣溫哦啤酒去i
            </div>
            <div style="width:100px;height:100px;background-color:#ccc;"></div>
            <div style="width:100px;height:100px;background-color:#ddd;"></div>
            <div style="width:900px;height:100px;background-color:#666;">
                橋文件額期望寄哦IQ叫我我就群毆我為奇偶去叫哦我IQ寄哦 
            </div>
     <div οnclick="jt()">點擊截圖</div>
     <script>
         var pointInfo= {};
        document.οnmοusedοwn=function(e){
            if(!pointInfo.bool)return;
            pointInfo.startInfo={
                x:e.clientX+window.scrollX,
                y:e.clientY+window.scrollY
            };
            pointInfo.eleArr[1].style.left=e.clientX+window.scrollX+"px";
            pointInfo.eleArr[1].style.top=e.clientY+window.scrollY+"px";
        }
         
        document.οnmοusemοve=function(e){
            if(!pointInfo.bool)return;
            if(!pointInfo.startInfo)return;
            pointInfo.eleArr[1].style.width=e.clientX-pointInfo.startInfo.x+window.scrollX+"px";
            pointInfo.eleArr[1].style.height=e.clientY-pointInfo.startInfo.y+window.scrollY+"px";
        }
        
        document.οnmοuseup=function(e){
            if(!pointInfo.bool)return;
            if(!pointInfo.startInfo)return;
            pointInfo.bool=false;
            var c = document.createElement("canvas");
            node=document.body;
            document.body.removeChild( pointInfo.eleArr[0]);
            var promise = domtoimage.toPng(node);
            promise.then(function(v){
                var img =new Image();
                img.src=v;
                c.width=parseInt(pointInfo.eleArr[1].style.width);
                c.height=parseInt(pointInfo.eleArr[1].style.height);
                var ctx = c.getContext("2d");
                img.οnlοad=function(){
                    ctx.drawImage(img,pointInfo.startInfo.x,pointInfo.startInfo.y,c.width,c.height,0,0,c.width,c.height);
                    var imgS=document.createElement("img");
                    imgS.src=c.toDataURL();
                    document.body.appendChild(imgS);
                    pointInfo.startInfo=null;
                }
              
            });
        }
        function jt(){
            var d= document.createElement("div");
            var d2=document.createElement("div");
        
            d.style.cssText="width:100%;height:100%;background-color:rgba(0,0,0,0.2);position:absolute;top:0;left:0;";
            d2.style.cssText="position:absolute;background:rgba(255,255,255,0.2);";
            pointInfo.eleArr= [d,d2];
            pointInfo.bool=true;
            d.appendChild(d2);
            document.body.appendChild(d);
        }
     </script>
    </body>
</html>