JS 使用html2canvas实现页面截图功能

时间：2023-03-09 18:19:15
JS 使用html2canvas实现页面截图功能

html2canvas的官方文档地址：http://html2canvas.hertzen.com/

实现原理：将需要截图的页面在canvas中进行重绘，这样将页面转换成图片的过程。

注意事项：

  • 不支持iframe
  • 不支持跨域图片（可以先将线上图片转换成base64，然后用base64作为图片路径）
  • 不支持flash
  • 不支持transform、transition过渡、animation动画（备注：transform初始布局是可以的，但是不能参与动画类的操作）

备注：这里特地说明下，很多同学会遇到图片跨域的困惑，其实跨域图片没啥关系，我们可以将“跨域资源”转换成“base64”，然后用base64作为图片的路径，这样完美解决。如何将“在线图片资源”转换成“base64”呢？请看这个地址：http://www.cnblogs.com/minigrasshopper/p/9042686.html

html代码实现

<div id="capture" style="padding: 10px; background: #f5da55">

    <h4 style="color: #000; ">Hello world!</h4>

</div>

js代码实现

html2canvas(document.querySelector("#capture")).then(canvas => {

    document.body.appendChild(canvas);  // 直接使用canvas

    // var imgUrl = canvas.toDataURL("image/png"); // 将canvas转换成img的src流

    // var imgUrl = canvas.toDataURL('image/png', 1); // 此方法可以设置截图质量0-1

});

目前，Data URI scheme支持的类型有：
data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/javascript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

相关文章