html2canvas

截图功能一般是后端来写的，但是通过查阅资料，前端也是可以的，所以简单的做了几个demo测试一下｀

官网
html代码

js代码

document.querySelector(".main-picture") 中 main-picture=>是你要截图的最外层的选择器

html2canvas(document.querySelector(".main-picture"),{

useCORS:true,//设置可以素材可以跨域，移动端不兼容

allowTaint: false,//默认就是false，允许跨域

taintTest: true,//默认就是false，是否在渲染前测试图片

scale:window.devicePixelRatio,//解决清晰度的问题可以改变scale的值

}).then(canvas => { 

var dataUrl = canvas.toDataURL();

 var newImg = document.createElement("img");

newImg.src =  dataUrl;

document.body.appendChild(newImg);

});

设备像素比devicePixelRatio：

window.devicePixelRatio

但是发现一个问题，就是背景图片，或者说所有的图片都没有被截图截上，原因：
1、图片的域名要设置

WechatIMG11.jpeg

2、关于图片需要截图，所有的元素需要动态创建元素document.createElement('img')
这样图片就可以截图截出来了