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 ο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>查看效果的话请将domtoimage下载下来自己查看
注意因为使用了toDataURL方法所以需要在服务器下面才能看到效果请使用webstorm打开查看效果
类似资料：