js 浏览器截屏的两种方式，html2canvas和MediaDevices.getDisplayMedia()

下边提供两种截屏方式，一种是使用常见的html2canvas插件，另一种方法是利用Web Api的MediaDevices.getDisplayMedia() 方法。

1.html2canvas

// html
<div id="canvas">
		 <!-- 使用了网络图片 -->
        <img style="width: 1000px;" src="http://pic2.zhimg.com/50/v2-958d33fd4a4de747058adcafdf753074_hd.jpg" />
</div>
//javascript
html2canvas(document.querySelector("#canvas"),{
    useCORS:true,// 允许跨域，不加该参数，跨域的图片不会显示
    scale:3 // 调整清晰度，值越大，清晰度越大
    }).then(canvas => {
    document.body.appendChild(canvas)
});

在生成canvas之后，还想生成图片并下载，可以参考我的另一篇文章。

2.MediaDevices.getUserMedia()

这个方法是浏览器自带的Web Api，可以在用户授权后共享整个屏幕、应用窗口、标签页，可在第一段的链接查看浏览器的支持情况。

// html
<video id="video" style="height: 400px;width: 400px;" autoplay></video>
<button id="start">开始截图</button>
<button id="stop">停止截图</button>

// js
const displayMediaOptions = { // 参数的详情可以在mdn网站查找
    video: {
        cursor: "always"
    },
    audio: false
};
let videoElem = document.getElementById("video");
document.getElementById("start").addEventListener('click',function(){
    startCapture()
})
document.getElementById("stop").addEventListener('click',function(){
    stopCapture()
})
async function startCapture() {
    try {
        videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
    } catch (err) {
        console.error("Error: " + err);
    }
}
function stopCapture(evt) {
    let tracks = videoElem.srcObject.getTracks();
    tracks.forEach(track => track.stop());
    videoElem.srcObject = null;
}

以上代码实现了，在video里边实时显示当前屏幕的视频。接下来，可以通过截一张video的图片，实现我们的需求。

// 修改stopCapture和startCapture函数
async function startCapture() {
   try {
       videoElem.srcObject = await navigator.mediaDevices.getDisplayMedia(displayMediaOptions);
       videoElem.addEventListener("loadedmetadata", function () {
           canvas.width = videoElem.videoWidth;
           canvas.height = videoElem.videoHeight;
       });
       videoElem.addEventListener("timeupdate", function () {
           try {
               const currentTime = parseFloat(videoElem.currentTime);
               if (currentTime >= 2) {
                   stopCapture()
               }
           } catch (err) {
               console.log("video has deleted: " + err);
           }
       });
       videoElem.play();
   } catch (err) {
       console.error("Error: " + err);
   }
}

function stopCapture(evt) {
    let ctx = canvas.getContext("2d");
    ctx.drawImage(videoElem, 0, 0, videoElem.videoWidth, videoElem.videoHeight);
    //拿到一个dataUrl，可new Image()，然后图片的对象的src设置为url，就可以得到图片dom元素
    let imgURL = canvas.toDataURL("image/jpeg");

    let tracks = videoElem.srcObject.getTracks();
    tracks.forEach(track => track.stop());
    videoElem.srcObject = null;
}