前端截圖功能涉及到 HTML5 的 Canvas API，下面總結(jié)兩種可實(shí)現(xiàn)截圖的方式

一、使用第三方庫(kù)-html2canvas

1. 原理

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

2.步驟

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

3.代碼

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

注意：跨域問題：html2canvas默認(rèn)不會(huì)加載跨域的圖片資源，通過設(shè)置 useCORS: true來(lái)啟用跨域請(qǐng)求支持。

二、navigator.mediaDevices.getDisplayMedia

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

1.主要特點(diǎn)

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

2.使用步驟

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

3.示例

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

// js部分
async function screenshot() {
  // 1.獲取屏幕或窗口內(nèi)容（獲取屏幕流）
  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)建畫布承載內(nèi)容
  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.將畫布內(nèi)容轉(zhuǎn)換為圖片轉(zhuǎn)成base64
  const base64 = canvas.toDataURL()
  // 停止錄制，節(jié)約資源
  video.srcObject.getTracks().forEach((track) => track.stop)
  // 下載
  const aTag = document.createElement('a') // 創(chuàng)建一個(gè)<a> 標(biāo)簽用于下載
  aTag.href = base64
  aTag.download = 'screenshot.png'
  aTag.click()
}

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

總結(jié)

到此這篇關(guān)于前端實(shí)現(xiàn)截屏兩種常見方式的文章就介紹到這了,更多相關(guān)前端實(shí)現(xiàn)截圖方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論