将video中某一秒的视图转换成图片以base64格式输出

将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标签就可以了