将video中某一秒的视图转换成图片以base64格式输出
js:
var v = document.createElement('video');
var c=document.createElement("canvas");
var src='http://daotechio.oss-cn-beijing.aliyuncs.com/mp4/VID_20180906_143801_f8ecf0ac-9c82-415d-8092-a7e0c69f0457.mp4'
//
v.setAttribute('src',src);
v.currentTime =2//一秒12桢
var ctx=c.getContext('2d');
var self = this
var image = new Image();
v.setAttribute("crossOrigin",'Anonymous')
v.addEventListener('loadeddata', function() {
var height = v.videoHeight;
var width = v.videoWidth;
c.height = height
c.width = width
ctx.drawImage(v,0,0,width,height)
var url = c.toDataURL('image/jpeg',1);
console.log(url)
image.src = url
document.body.appendChild(c)
},false);
如果报错:
Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
就是跨域产生的问题,加上v.setAttribute("crossOrigin",'Anonymous')
这个就可以了。
在vue中:
template:
<video ref='video' @loadeddata='loadVideo' crossOrigin='Anonymous'></video>
js:
methods:{
loadVideo() {
var c=document.createElement("canvas");
var ctx=c.getContext('2d');
var v = document.getElementById('myvideo')
var height = v.videoHeight;
var width = v.videoWidth;
c.height = height
c.width = width
ctx.drawImage(v,0,0,width,height)
var url = c.toDataURL('image/jpeg',1);
console.log(url)
// var v = document.createElement("video");
// v.crossOrigin = 'Anonymous';
// v.src = mysrc
// var self = this
// v.onloadeddata = function(){
// var height = v.videoHeight;
// var width = v.videoWidth;
// c.height = height
// c.width = width
// ctx.drawImage(v,0,0,width,height)
// var url = c.toDataURL('image/jpeg',1);
// // var img = document.createElement('img');
// // img.src = url;
// // document.body.appendChild(img)
// }
}
img同理,转换成base64格式输出,将上边的
video标签换成img标签就可以了