js实现截图功能（可实现带滚动条的长截图）

支持长截图，滚动元素可截取全部

/* 引入依赖 */
<script src="html2Canvas.js"></script>

/* 使用方法 */
function cutImg(name) {
    let targetDom = document.querySelector("#target")
    
    // 此处是实现滚动元素长截图的关键 start
    let copyDom = targetDom.cloneNode(true) 
    copyDom.setAttribute('id','copyDom')  // 更改id 避免与targetDom id重复
    copyDom.style.width = targetDom.scrollWidth + 'px'
    copyDom.style.height = targetDom.scrollHeight + 'px'
    document.body.insertBefore(copyDom, targetDom)
    // 此处是实现滚动元素长截图的关键 end
    
    /* 
    *如不需要长截图，或者要截取的元素无滚动即完全显示。
    *下方要截取的元素改为targetDom,并把copyDom相关代码删除即可 
    */
    
    html2canvas(copyDom, { useCORS: true, height: targetDom.scrollHeight, width: targetDom.scrollWidth }).then(function (canvas) {
      //获取年月日作为文件名
      var timers = new Date();
      var fullYear = timers.getFullYear();
      var month = timers.getMonth() + 1;
      var date = timers.getDate();
      var randoms = Math.random() + '';
      //年月日加上随机数
      var numberFileName = fullYear + '' + month + date + randoms.slice(3, 10);
      var imgData = canvas.toDataURL();
      //保存图片
      var saveFile = function (data, filename) {
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = data;
        save_link.download = filename;

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
      };
      //最终文件名+文件格式
      var filename = currentOrder + (name || currentWord) + '.png';
      saveFile(imgData, filename);

      copyDom.remove()
      // document.body.children[0].remove()
      //document.body.appendChild(canvas);  把截的图显示在网页上
    })
  }

本文章由javascript技术分享原创和收集