JS长截图，截取整个元素的图片

要截取整个元素的图片，可以使用html2canvas库来实现。html2canvas可以将任意HTML元素转换为Canvas对象，然后可以将Canvas对象转换为图片。

前提，引入html2canvas。例如：

<script src="js/html2canvas.min.js"></script>

关键代码：

const scrollView = document.getElementById('scroll-view');

html2canvas(scrollView, { scrollY: -window.scrollY }).then(canvas => {
  canvas.toBlob(blob => {
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'screenshot.png';
    link.click();
    URL.revokeObjectURL(url);
  }, 'image/png');
});

代码解释：首先获取需要截图的元素，代码中的示例为scroll-view元素，然后使用html2canvas()函数将scroll-view元素转换为Canvas对象。在html2canvas()函数的第二个参数中，使用scrollY: -window.scrollY来设置滚动条的位置，以确保能够截取整个scroll-view元素的内容。然后使用canvas.toBlob()方法将Canvas对象转换为Blob对象，并使用URL.createObjectURL()方法创建一个URL，将Blob对象保存为文件。最后，创建一个<a>元素，设置href属性为URL，设置download属性为文件名，模拟点击<a>元素来下载文件，并使用URL.revokeObjectURL()方法释放URL。

html2canvas默认使用Blob对象来保存图片到本地，如果你使用的浏览器并不支持blob，也可以通过使用DataURL来保存图片。具体代码如下：

html2canvas(document.body, {
  useCORS: true,
  scrollY: -window.scrollY
  // 其他配置项
}).then(function(canvas) {
  // 将canvas转换为DataURL格式
  const dataURL = canvas.toDataURL('image/png');
  // 创建a标签并模拟点击下载
  const link = document.createElement('a');
  link.href = dataURL;
  link.download = 'screenshot.png';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
});

这样就可以使用DataURL来保存图片到本地了。