Tainted canvases may not be exported,视频帧截图跨域

3,853 阅读1分钟

vue项目video视频截图遇到问题:Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

百度直译:canvas无法执行toDataURL方法:污染的画布无法输出。 原来是受限于 CORS 策略,会存在跨域问题,虽然可以使用图像(比如append到页面上)但是绘制到画布上会污染画布,一旦一个画布被污染,就无法提取画布的数据,比如无法使用使用画布toBlob(),toDataURL(),或getImageData()方法;当使用这些方法的时候 会抛出一个安全错误。

我是使用的oss视频,首先需要oss服务器设置请求头*,其次video加上crossorigin="anonymous",问题解决。

//截取当前帧的图片
cutPicture() {
  let video = document.querySelectorAll('video')[0]
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')
  canvas.width = video.offsetWidth * 0.3
  canvas.height = video.offsetHeight * 0.3

  ctx.drawImage(video, 0, 0, canvas.width, canvas.height)
  let base64 = canvas.toDataURL('image/png')
  this.imgUrl = base64
  let fileObj = { file: this.dataURLtoFile(base64) }

  // this.uploadFunc(fileObj)
},
// 将base64转换成file对象
dataURLtoFile(dataurl, filename = 'file') {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let suffix = mime.split('/')[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], `${filename}.${suffix}`, { type: mime })
}