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 })
}