vue中视频截图下载保存/存储实现（Failed to execute ‘toDataURL‘ on ‘HTMLCanvasElement‘: Tainted canvas报错处理方法）

<div class="player_box_wrap">
        <video
          id="capture"
          ref="playVideo"
          width="100%"
          height="100%"
          :src="selectedVal.url"
          controls
          @seeked="durationchange"
        >video>
  div>
<el-button type="primary" @click="takeScreenshot">截图el-button>

    async takeScreenshot() {
      const self = this;
      html2canvas(self.screenshotDom, {
        allowTaint: true,
        useCORS: true,
      }).then((canvas) => {
        // 生成base64路径
        const capture = canvas.toDataURL("image/png");
        this.downloadLocal(capture);
        // blob 转换为二进制流 调用接口 添加业务
        let blob = this.changeToBlob(capture);
      });
    },
    // 下载本地
    downloadLocal(capture) {
      const link = document.createElement("a");
      link.href = capture;
      link.download = "图片编辑截图.png";
      link.click();
    },
    // 二进制流
    changeToBlob(base64) {
      let arr = base64.split(",");
      let type = arr[0].match(/:(.*?);/)[1];
      let bstr = atob(arr[1]);
      let n = bstr.length;
      let u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return u8arr;
    },

获取video必须在mounted设置setAttribute(“crossorigin”, “Anonymous”) 否则会报 toDataURL 错误

mounted() {
    this.screenshotDom = document.getElementById("capture");
    this.screenshotDom.setAttribute("crossorigin", "Anonymous");
  },