html2canvas屏幕截图介绍

html2canvas是一个单文件JavaScript脚本，可以将页面HTML区域转换为Canvas元素，实现对网页内容的截图功能，这样的技术在一些需要生成网页快照、制作截图等场景下非常实用。

WPite

html2canvas是一个单文件JavaScript脚本，可以将页面HTML区域转换为Canvas元素，实现对网页内容的截图功能。html2canvas输出位图数据（raster graphics），你可以将该图片数据进行预览、上传或下载，这样的技术在一些需要生成网页快照、制作截图等场景下非常实用。

html2canvas特点

简单轻量。仅需一个195KB大小的JavaScript脚本文件，在需要前加载到页面即可。最新版本是1.4.1，更新于2022年，该脚本似乎很少更新，一次到位无需来回折腾。

兼容性强。脚本通过遍历加载页面DOM及其CSS属性来构建画布，支持常用的CSS属性，兼容谷歌Chrome、Edge、Firefox、Opera、Safari等主流浏览器。实践已表明，该方法可精细还原页面视觉效果。

使用简单。通过一个统一的方法html2canvas()，指定页面节点链式调用，节点选取方法不限，可以单选（document.getElementById）也可以多选（document.querySelectorAll），如截取整个网页示例如下：

html2canvas(document.body).then(function(canvas) {
  document.body.appendChild(canvas);
});

html2canvas使用技巧

图片预览与下载。toDataURL()是canvas对象的一种方法，用于将canvas对象转换为base64位编码，可以直接赋值<img>元素src属性用于预览，还可以赋值<a>元素href属性用于下载。示例如下：

// canvas是上一步生成的画布
var img = document.createElement('img'),
  a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a'),
  src = canvas.toDataURL('image/jpeg', 1.0),
  href = src.replace('image/jpeg', 'image/octet-stream');
img.src = src;
a.href = href;
// img元素插入页面用于预览
……
// a元素插入页面用于下载
……

图片预览与上传。toBlob()方法可以将Canvas图像对应的Blob对象（binary large object）缓存在磁盘上，或者存储在内存中，此时Blob对象是个二进制对象，可以直接通过API接口上传至服务器。示例如下：

// canvas是上一步生成的画布
canvas.toBlob( function(blob) {
  // blob当前转换的数据
  var img = document.createElement('img'),
    src = URL.createObjectURL(blob);
  img.src = src;
  // img元素插入页面用于预览
  ……
  // POST方法上传图片数据blob
  ……
}, 'image/jpeg', 1.0);

浏览html2canvas文档