canvas截取video图片并保存在本地

cutLiveVideo() {
  var c = document.createElement("canvas");
  var ctx = c.getContext('2d');
  var v = document.getElementById('remoteVideo')
  var height = v.videoHeight;
  var width = v.videoWidth;
  c.height = height
  c.width = width
  ctx.drawImage(v, 0, 0, width, height)
  var url = ''
  url = c.toDataURL('image/png', 1);
  this.saveFile(url, 'abcd.png')
},
saveFile(strDataURL, filename) {
  var arr = strDataURL.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  var blob = new Blob([u8arr], {
    type: mime
  });
  var url = window.URL.createObjectURL(blob);
  var a = document.createElement('a');
  a.style.display = 'none';
  a.href = url;
  a.download = filename;
  document.body.appendChild(a);
  a.click();
  setTimeout(function() {
    document.body.removeChild(a);
    window.URL.revokeObjectURL(url);
  }, 1000);
},

其实原理就是创建一个canvas，然后从video中取一帧视频绘制到canvas中，再从canvas中把图片转成blob数据后创建url，最后创建一个a标签并自动点击下载，然后销毁a标签。

函数cutLiveVideo是通过canvas从video中截取一张照片，获取到base64的url码。 函数saveFile是创建一个a标签，将到base64的url复制给a标签的url，通过a标签的download属性，下载图片并保存在本地。