html2canvas 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 =https://www.it610.com/article/dataUrl; document.body.appendChild(newImg); });

设备像素比devicePixelRatio：
window.devicePixelRatio
【html2canvas】但是发现一个问题，就是背景图片，或者说所有的图片都没有被截图截上，原因：
1、图片的域名要设置