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;
}