使用canvas原生实现html视频/图片截图

视频/图片截图主要使用canvas 的drawImage方法

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

参数	描述
img	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）

注意点

注意(： 使用时需要设置画布的大小，不然绘制出来的图片只有300px*150px；
如果视频宽高大于画布大小，会出现截取到视频一部分区域，该区域大小就是画布大小；

以及，异步使用context.drawImage时可能会出现截取失败！ 因为视频流是不断刷新的，
视频未加载完成，或者这部分已经播放完毕亦或者异步时间间隔不一定与屏幕刷新时间（视频帧率）相同，
会引起丢帧,截取时刚好是空白期,这些都会使得截取图片失败！这里视频可以使用
（requestAnimationFrame：由系统决定回调函数的执行时机。60Hz的刷新频率，
那么每次刷新的间隔中会执行一次回调函数，不会引起丢帧）

而图片截取失败则是图片未加载完成，
可以使用img.onload或者window.onload待图片加载完成后触发context.drawImage方法。

参考代码

    videoJieTu(key) {
    
    
      var canvas = document.createElement("canvas");
      var canvasCtx = canvas.getContext("2d");
      // videoDom
      var video = this.$refs["video-" + key][0];
      var videoWidth = video.videoWidth;
      var videoHeight = video.videoHeight;
      var imgWidth = video.videoWidth;
      var imgHeight = video.videoHeight;
  
      // 注意 一点要给canvas画布宽高  不然绘制出来的会默认300px *150px
      canvas.width = videoWidth;
      canvas.height = videoHeight;
      //坐原图像的x,y轴坐标，大小，目标图像的x，y轴标，大小。
      canvasCtx.drawImage(
        video,
        0,
        0,
        videoWidth,
        videoHeight,
        0,
        0,
        imgWidth,
        imgHeight
      );
      // 每一帧都是图片绘制在canvas上
      // function render() {
    
    
      //   canvasCtx.drawImage(
      //     video,
      //     0,
      //     0,
      //     videoWidth,
      //     videoHeight,
      //     0,
      //     0,
      //     imgWidth,
      //     imgHeight
      //   );
      //   requestAnimationFrame(render);
      // }
      // render();
      //把图标base64编码后变成一段url字符串
      var dataUrl = canvas.toDataURL("image/png");
      this.imgJieTu = canvas.toDataURL("image/png");
      
      // var link = document.createElement("a");
      // link.setAttribute("download", "");
      // link.href = dataUrl;
      // link.click();
    },