首先JS没有权限调用操作系统的截图功能，其次，浏览器（BOM）也没有提供相关的截图接口

JSCapture

JSCapture 是用纯 JavaScript 和 HTML5 实现的屏幕捕捉库。JSCapture 使用 getUserMedia 来实现屏幕捕获。目前的屏幕捕捉的 API 仅支持 Chrome 浏览器 37 版本以下。由于删除了实验性桌面共享API，JSCapture无法在Chrome 37+中运行

利用 MediaStream API 和 MediaDevices.getUserMedia() 实现（developer.mozilla.org/zh-CN/docs/…

集成试用

1、使用如下命令下载安装：git clone www.github.com/mgechev/jsc…

2、集成代码

    mybtn.onclick = function(){
      JSCapture.capture({
        done: func,
        fail:function(){
          console.log('失败');
        }
      })
    }
    function func(img){
      console.log('成功')
      console.log(img)
    }

3、结果：输出“失败”

4、失败原因：chrome 版本是 80，实验性桌面共享 API 只支持 37 版本以下

navigator.mediaDevices.getDisplayMedia

getDisplayMedia() 方法提示用户去选择和授权捕获展示的内容或部分内容（如一个窗口）在一个 MediaStream 里. 然后，这个媒体流可以通过使用 MediaStream Recording API 被记录或者作为WebRTC 会话的一部分被传输。该方法只能录制屏幕，且需要授权

体验 demo

mdn.mozillademos.org/en-US/docs/…

chrome.tabs.captureVisibleTab

捕获所选标签的屏幕截图,chrome.tabs.captureVisibleTab 为 chrome 提供的浏览器拓展 API ，网页 js 无法直接调用

dom - svg - canvas

利用 SVG 内容可直接绘制在 Canvas 上的功能，可以创建一个 svg，svg 元素里面插入一个 foreignObject 元素，在 foreignObject 元素里面放入 document.body.innerHTML,然后再利用 drawImage 绘制在 canvas 上，就可以获得 dom 截图

4.1. 集成试用

     var canvas = document.getElementById('canvas');
     var ctx = canvas.getContext('2d');
     var data = '<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">' +'<foreignObject width="100%" height="100%">' + '<div xmlns="http://www.w3.org/1999/xhtml" style="font-size:40px">' +
     document.querySelector('.container').innerHTML +
     '</div>' +'</foreignObject>' + '</svg>';
     var DOMURL = window.URL || window.webkitURL || window;
     var img = new Image();
     var svg = new Blob([data], {type: 'image/svg+xml'});
     var url = DOMURL.createObjectURL(svg);
     img.onload = function() {
        ctx.drawImage(img, 0, 0);
        DOMURL.revokeObjectURL(url);
     }
     img.src = url;

局限：只能截图行间样式，除行间样式以外的其他样式均不生效。如下图，截图中的 hello world 无法获取到 style 标签中设置的样式

JS 截图方法