前端使用domtoimage生成截图的详细步骤_Javascript

前端生成截图有多种方式：

使用html2canvas，在之前文章中已有具体介绍（）这个插件在生成截图的时候有一些弊端，在canvas绘制时耗时长，且绘制时屏幕会阻塞无法操作
使用domtoimage（官方文档）这个插件在使用时会相对丝滑很多，一下简单介绍使用方法（具体可结合食用）

	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, {  //直接转化为二进制格式，可以直接将图片下载
          style: {
            backgroundcolor: '#17496d' //给它一个背景色
          }
        })
          .then(function(blob) {
            formdata.append('image', blob, 'image.png')
            resolve(formdata)
          })
          .catch(function(error) {
            console.error('截图生成失败', error)
          })
      })
    }

domtoimage方法

domtoimage.topng(…);将节点转化为png格式的图片 domtoimage.tojpeg(…);将节点转化为jpg格式的图片
domtoimage.tosvg(…);将节点转化为svg格式的图片，生成的图片的格式都是base64格式
domtoimage.toblob(…);将节点转化为二进制格式，这个可以直接将图片下载
domtoimage.topixeldata(…);获取原始像素值，以uint8array
数组的形式返回，每4个数组元素表示一个像素点，即rgba值。这个方法也是挺实用的，可以用于webgl中编写着色器颜色。

domtoimage属性

filter ：过滤器节点中默写不需要的节点；
bgcolor ：图片背景颜色；
height, width ：图片宽高；
style：传入节点的样式，可以是任何有效的样式；
quality ：图片的质量，也就是清晰度；一个介于 0 和 1 之间的数字，表示 jpeg图像的图像质量（例如 0.92 => 92%）。默认为 1.0 (100%)
cachebust ：将时间戳加入到图片的url中，相当于添加新的图片；
imageplaceholder ：图片生成失败时，在图片上面的提示，相当于img标签的alt；

附：dom-to-image实现的网页截图

<!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>