js将html页面转图片

可以使用html2canvas，实现在用户浏览器端直接对整个或者指定模块进行截屏。html2canvas其渲染成一个Canvas图片，能让用户保存为图片。

html2canvas官网地址：http://html2canvas.hertzen.com/

1、可以使用npm和yarn进行安装，也可以直接下载原生js导入。

命令：npm install --save html2canvas

           yarn add html2canvas

 

2、直接调用js方法传入指定的模块，或者页面。

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

3、这个是官方的方法，不过你打开F12你会发现他其实并不是一张图片，虽然他在PC端可以另存为图片，但是他在手机端并不行。因为他现在只是一个h5的canvas。所以下面的写法才是把html真正的变成了图片。

html2canvas(document.querySelector("#capture")).then(canvas => {
    var image = new Image();
    image.src = canvas.toDataURL("image/png");
    document.body.appendChild(image)
});