js实现网页截图的两种方案详析

npm install html2canvas

import html2canvas from "html2canvas"

//截取整个屏幕
 const screenFn = () => {
    const element = document.body
    html2canvas(element).then((canvas) => {
        const imgUrl = canvas.toDataURL("image/png")
        const link = document.createElement("a")
        link.download = "screenshot.png"
        link.href = imgUrl
        link.click()
    })
 }

//截取特定元素
const screenFn = () => {
    const element = document.getElementById("version")
    if (element) {
        html2canvas(element, {
          allowTaint: true, // 允许跨域图片
          useCORS: true, // 使用 CORS 加载图片
          scale: 2, // 提升截图分辨率
          logging: true, // 调试时查看日志
          scrollY: -window.scrollY // 处理滚动位置
        }).then((canvas) => {
          const imgUrl = canvas.toDataURL("image/png")
          const link = document.createElement("a")
          link.download = "screenshot.png"
          link.href = imgUrl
          link.click()
        })
    }
}

const screenFn = async () => {
    try {
        const stream = await navigator.mediaDevices.getDisplayMedia({
          video: { displaySurface: "browser" }
        })
        const videoTrack = stream.getVideoTracks()[0]
        const imageCapture = new ImageCapture(videoTrack)
        const bitmap = await imageCapture.grabFrame()

        // 将 bitmap 绘制到 canvas
        const canvas = document.createElement("canvas")
        canvas.width = bitmap.width
        canvas.height = bitmap.height
        const ctx = canvas.getContext("2d")
        ctx.drawImage(bitmap, 0, 0)

        // 导出图片
        canvas.toBlob((blob) => {
          const url = URL.createObjectURL(blob)
          const a = document.createElement("a")
          a.href = url
          a.download = "screenshot.png"
          a.click()
        }, "image/png")

        videoTrack.stop()
    } catch (err) {
        console.error("截图失败:", err)
    }
}