点击按钮对页面或者video画面截屏，能实现吗

Question

前端能实现点击按钮对页面或者页面video画面截屏吗

Answer 1

截取页面可以试试html2canvas，但是这个也不算真正的“截”取，毕竟自定义性太差，
截取video的，你试试：

<video width="400" height="300" id="video" src="//video-source-url"></video>
<img width="400" height="300" id="image" />
<button id="button">截图</button>

var video = document.querySelectorAll('#video')
var image = document.querySelectorAll('#image')
var button = document.querySelectorAll('#button')
var canvas = document.createElement('canvas')
canvas.width = 400
canvas.height = 300
var canvasContext = canvas.getContext('2d')

button.onclick = function () {
    canvasContext.drawImage(video, 0, 0, 400, 300)
    image.src = canvas.toDataURL('image/jpeg')
}

Answer 2

html2canvas

Answer 3

试过，video画面截图不了

Answer 4

补充下：

    let video = document.getElementById('video');
    video.pause();
    var image = document.getElementById('image')
    var canvas = document.createElement('canvas')
    var load = document.getElementById('load')
    canvas.width = 320
    canvas.height = 200
    var canvasContext = canvas.getContext('2d')
    canvasContext.drawImage(video, 0, 0, 320, 240)
    image.src = canvas.toDataURL('image/jpeg')
    load.href = canvas.toDataURL('image/jpeg')
    实现截屏和下载
    HTML也写下吧：
    <div class="video-wrap">
      <video
        width="320"
        height="240"
        id="video"
        class="video"
        src="../../../static/videos/test.mp4"
        controls="true"
        preload="auto"
      ></video>
    </div>
    <img width="320" height="200" id="image" />
    <a href="" id="load" download="">下载</a>