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

dom-to-image如何使用请参考https://blog.csdn.net/u012260672/article/details/79302465
下面我们就不废话了直接上演示:
<!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 onclick="jt()">点击截图</div>
     <script>
         var pointInfo= {};
        document.onmousedown=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.onmousemove=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.onmouseup=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.onload=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>
查看效果的话请将domtoimage下载下来自己查看
注意因为使用了toDataURL方法所以需要在服务器下面才能看到效果请使用webstorm打开查看效果
dom-to-image实现的网页截图

猜你喜欢
