前端實現(xiàn)截屏的兩種常見方式

更新時間：2025年03月01日 14:30:57 作者：Mae_cpski

這篇文章主要介紹了前端實現(xiàn)截屏的兩種常見方式,分別是使用第三方庫html2canvas和navigator.mediaDevices.getDisplayMedia,兩種方法都給出了詳細的代碼示例,需要的朋友可以參考下

一、使用第三方庫-html2canvas

1. 原理

html2canvas可以通過獲取HTML的某個元素，然后生成Canvas，然后再通過調用的canvas的toDataURL()方法生成圖片，從而能讓用戶保存為圖片。

2.步驟

獲取當前頁面的標簽節(jié)點：向html2canvas傳入需要生成圖片的DOM節(jié)點
渲染畫布canvas：等到html2canvas通過該DOM節(jié)點的信息生成canvas
再調用canvas.toDataURL(‘image/png’)方法，image/png是要生成的圖片格式為png，然后該方法會返回一個圖片的base64

3.代碼

function getScreenshot() {
  // 獲取需要截圖的dom元素
  const el = document.getElementById('screenDiv')
  // 使用html2canvas將dom結構渲染到畫布
  html2canvas(el, {
    useCORS: true, // 允許跨域
  }).then((canvas) => {
    // 下載
    const aTag = document.createElement('a') // 創(chuàng)建一個<a> 標簽用于下載
    aTag.href = canvas.toDataURL()
    aTag.download = 'screenshot.png'
    aTag.click()
    // 移除canvas
    URL.revokeObjectURL(aTag.href)
  })
}

注意：跨域問題：html2canvas默認不會加載跨域的圖片資源，通過設置 useCORS: true來啟用跨域請求支持。

二、navigator.mediaDevices.getDisplayMedia

navigator.mediaDevices.getDisplayMedia 是一個瀏覽器API，允許網頁應用訪問用戶的屏幕或特定窗口的內容，主要用于屏幕共享或屏幕錄制等功能。這個API是WebRTC的一部分，它使得開發(fā)人員能夠更容易地捕捉到用戶的屏幕內容，而不需要依賴Flash或其他插件。

1.主要特點

安全性：為了保護用戶隱私，使用getDisplayMedia時通常需要用戶的明確許可。這意味著會彈出一個對話框讓用戶選擇他們想要共享的內容（如整個屏幕、單個應用程序窗口或瀏覽器標簽頁）。
跨平臺：可以在支持的現(xiàn)代瀏覽器中使用，包括Chrome、Firefox、Edge等。
媒體流：返回一個MediaStream對象，包含了屏幕共享的視頻軌道（可能還有音頻軌道），可以被用來顯示在元素中，或者作為其他媒體處理的一部分，比如錄制或傳輸。
參數配置：可以通過傳遞選項對象來指定捕獲的媒體類型（視頻、音頻）和其他約束條件，如分辨率、幀率等。

2.使用步驟

獲取屏幕共享流：使用getDisplayMedia 方法獲取屏幕或窗口內容
創(chuàng)建視頻元素或畫布：創(chuàng)建一個元素或者Canvas對象用于顯示或處理獲取到的媒體流
截圖并轉換為圖片：通過Canvas 的繪制方法將視頻繪制到畫布上，并轉換為圖片格式

3.示例

// html部分
<button @click="screenshot">點擊截圖(mediaDevices) </button>

// js部分
async function screenshot() {
  // 1.獲取屏幕或窗口內容（獲取屏幕流）
  const stream = await navigator.mediaDevices.getDisplayMedia({
    video: true,
  })
  // 2.創(chuàng)建視頻元素或畫布（創(chuàng)建流）
  const video = document.createElement('video')
  video.srcObject = stream
  await video.play()
  // 創(chuàng)建畫布承載內容
  const canvas = document.createElement('canvas')
  canvas.width = video.videoWidth
  canvas.height = video.videoHeight
  const context = canvas.getContext('2d')
  // 3.繪制視頻幀到畫布
  context?.drawImage(video, 0, 0, canvas.width, canvas.height)
  // 4.將畫布內容轉換為圖片轉成base64
  const base64 = canvas.toDataURL()
  // 停止錄制，節(jié)約資源
  video.srcObject.getTracks().forEach((track) => track.stop)
  // 下載
  const aTag = document.createElement('a') // 創(chuàng)建一個<a> 標簽用于下載
  aTag.href = base64
  aTag.download = 'screenshot.png'
  aTag.click()
}

點擊按鈕觸發(fā)截圖。通過調用 getDisplayMedia 方法獲取屏幕流，然后利用元素播放此流，并將其內容繪制到畫布上，然后將畫布的圖像數據轉換為base64編碼的URL, 創(chuàng)建 a 標簽進行下載。