html2canvas

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

官网

js代码

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

``` javascript

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

动态创建的节点可以跨域