canvas截取video上的第一帧

Question

问题描述

                 var canvas = document.createElement("canvas"); 
                const video =  document.getElementById("video");
                canvas.width = video.clientWidth;
                canvas.height = video.clientHeight;
                canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
                这段代码可以截取到video视频到第一帧
              但是我想将第一帧导出保存为base64调用canvas.toDataURL()
              这时会报SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
              这个错网上有人说 “需要将视频文件 和当前index.html页面放在同一个域中，才能正常运行”
            **请我还有其他解决办法吗？？？**

Answer 1

  var canvas = document.createElement('canvas')
  var img = document.getElementById('img')
  const video = document.getElementById('video')
  video.setAttribute('crossOrigin', 'anonymous')
  canvas.width = video.clientWidth
  canvas.height = video.clientHeight
  video.onloadeddata = (() => {
    canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height)
    var dataURL = canvas.toDataURL('image/png')
    img.setAttribute('src', dataURL)
  })