前端取视频第一帧图片

前端取视频第一帧图片：

<!-- 'data:image/jpeg;base64' +  -->
<div style="width:200px;height:200px">
  <img :src="videoImg" alt="" width="200px" height="200px">
</div>

	//mounted()里初始化  url 视频地址
	this.getVideoBase64(url);
	
    // 获取视频第一帧图片
    getVideoBase64(url) {
      let _this = this;
      return new Promise(function(resolve, reject) {
        let dataURL = "";
        let video = document.createElement("video");
        video.setAttribute("crossOrigin", "anonymous"); //处理跨域
        video.setAttribute("src", url);
        video.setAttribute("width", 400);
        video.setAttribute("height", 240);
        video.setAttribute("preload", "auto");
        video.addEventListener("loadeddata", function() {
          let canvas = document.createElement("canvas"),
            width = video.width, //canvas的尺寸和图片一样
            height = video.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
          dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
          _this.videoImg = dataURL;
          resolve(dataURL);
        });
      });
    },

参考：

    <video width="320" height="240" controls id="upvideo"></video>    
    
    // 获取视频第一帧图片
    getVideoBase64(url) {
      return new Promise(function(resolve, reject) {
        let dataURL = "";
        let video = document.createElement("video");
        video.setAttribute("crossOrigin", "anonymous"); //处理跨域
        video.setAttribute("src", url);
        video.setAttribute("width", 400);
        video.setAttribute("height", 240);
        video.setAttribute("preload", "auto");
        video.addEventListener("loadeddata", function() {
          let canvas = document.createElement("canvas"),
            width = video.width, //canvas的尺寸和图片一样
            height = video.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(video, 0, 0, width, height); //绘制canvas
          dataURL = canvas.toDataURL("image/jpeg"); //转换为base64
          resolve(dataURL);
        });
      });
    },
 
    // videoSrc为视频路径，dataURL就是取到的图片了
    let dataURL = this.getVideoBase64(this.videoSrc);
 
 
 
   // 取视频第一帧作为封面
    findvideocover(url) {
      let _this = this;
      this.$nextTick(() => {
        let video = document.getElementById("upvideo");
        let source = document.createElement("source");
        source.src = url;
        source.type = "video/mp4";
        video.appendChild(source);
        video.addEventListener("loadeddata", function() {
          var canvas = document.createElement("canvas");
          canvas.width = "320";
          canvas.height = "320";
          canvas
            .getContext("2d")
            .drawImage(video, 0, 0, canvas.width, canvas.width);
          // var img = document.createElement("img");
          // let imgsrc = canvas.toDataURL("image/png");
          // console.log(_this.imgUrl)
          // _this.Videoframehandle(imgsrc.split(",")[1]);
        });
      });
    },
    
    // 再mounted里面直接调用 this.findvideocover(this.videoSrc)

参考：https://blog.youkuaiyun.com/weixin_45455227/article/details/119378841