vue使用canvas进行视频的截图功能 ---- 超赞

vue使用canvas进行视频的截图功能

1,直接贴代码了 代码里有注释和解释

   <div
     class="video_list"
     v-for="(item, index) in testVideoList" //循环的视频数组
     :key="index"
   >
     <video
       style="width: 100%"
       :id="'myPlayer1' + index" //动态id名称
       playsInline //不希望用户来拖动进度条的话
       webkit-playsinline //处理兼容
       controls  //视频控制条
       autoplay  //自动播放
     >
    //source 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。
       <source :src="item.url" type="application/x-mpegURL" />
    // type 文件类型 (audio/ogg  audio/mpeg)等...
     </video>
    <i
      class="el-icon-camera-solid curt_photo_icon"
      @click="getCurPic(index)" //点击截图的按钮 -- 因为我这边是循环的 需要传index
    ></i>
    </div>
    //绘制的地方
    <div class="cur_canvas_container">
     <canvas
       :width="canvasWidth"
       :height="canvasHeight"
       ref="canvas"
       v-if="cropperModel"
       class="cur_canvas"
     ></canvas>
   </div>

2.js

    getCurPic(index) {
      // 裁剪图片
      this.cropperModel = true;
      this.$nextTick(() => {
      	//需要使用nextTick 不然DOM渲染过快导致初次无法进行渲染-或者使用SetTomeOut(()=>{},200)
        this.photograph(index);
      });
    },
    photograph(index) {
      // 把当前视频帧内容渲染到canvas上
      let img = document.getElementById("myPlayer1" + index); //获取标签
      let width = img.clientWidth; //获取屏幕尺寸
      let height = img.clientHeight;
      this.canvasWidth = width;
      this.canvasHeight = height;
      
	  //getContext方法返回一个用于在画布上绘图的环境。
      let ctx = this.$refs["canvas"].getContext("2d"); 
      
      this.$nextTick(() => {
        ctx.drawImage(img, 0, 0, width, height);  //在画布上定位图像
        //drawImage(img,x,y,width,height);
        
        // canvas转化为图片
        let newCanvas = this.$refs["canvas"]; 
        var newImage = new Image(); //做预加载。
        newImage.src = newCanvas.toDataURL("image/png"); //这里重点 toDataURL 转换为Base 64
        
        //先确定一下提交到后端的时候数据是否完整
		//php也有办法把base64保存成图片文件
		//mysql的类型可以考虑缓存MEDIUMTEXT和LONGTEXT
		
        console.log(newImage); //base64编码打印
    },

希望此文章能帮助到你