在浏览器中截屏.md

在浏览器中截屏

html2canvas

最简单的方法是，使用 html2canvas 库在浏览器中使用 JS 截取屏幕截图，它可以将 DOM 转换成 canvas。

一个简单的示例：

<button onclick="report()">截图</button>
<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000">Hello world!</h4>
</div>
<img width="100%" class="screen" />
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

function report() {
  html2canvas(document.body).then((canvas) => {
    let pngUrl = canvas.toDataURL() // dataURL 格式的 PNG
    let img = document.querySelector('.screen')
    img.src = pngUrl

    // 其他操作...
  })
}

screen Capture API

我们可以使用原生的 screen Capture API 进行屏幕捕获，使用 getDisplayMedia() 方法，以 canvas 或 Blob 等形式获取屏幕截图。

一个简单的示例：

<button onclick="report()">截图</button>
<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000">Hello world!</h4>
</div>
<canvas id="canvas" style="width: 300px"></canvas>
<img width="300" class="screen" />

const canvas = document.getElementById('canvas')
const img = document.querySelector('.screen')

function report() {
  navigator.mediaDevices
    .getDisplayMedia()
    .then((stream) => {
      let track = stream.getTracks()[0]
      let capture = new ImageCapture(track)
      capture.grabFrame().then((bitmap) => {
        // 停止共享
        track.stop()
        console.log(bitmap)
        // 将 bitmap 绘制到 canvas
        canvas.width = bitmap.width
        canvas.height = bitmap.height
        canvas.getContext('2d').drawImage(bitmap, 0, 0)
        canvas.toBlob(
          (blob) => {
            console.log('output blob:', blob)
            const screenshotJpegBlob = URL.createObjectURL(blob)
            img.src = screenshotJpegBlob
          },
          'image/jpeg',
          0.95
        )
      })
    })
    .catch((e) => console.log(e))
}

更多资料

Using HTML5/Canvas/JavaScript to take in-browser screenshots