Angular中Canvas绘图失效及视频裁剪时Canvas污染报错求助

这个错误是浏览器同源策略的保护机制在起作用——当你的Canvas使用了来自跨域的视频资源，且没有正确配置跨域权限时，Canvas会被标记为"受污染"，无法执行toDataURL这类导出操作。我来帮你一步步解决这个问题：

1. 先搞定视频的CORS权限 #

这是最核心的问题，必须先解决：

• 如果视频是你自己服务器的资源：在服务器端添加响应头Access-Control-Allow-Origin: *（或者指定你的Angular应用域名，更安全），允许跨域访问。
• 如果是第三方视频资源：需要对方服务器支持CORS，同时在你的视频标签上添加crossorigin="anonymous"属性：

  <div> 
    <video src="你的视频URL" #myvideo crossorigin="anonymous"> </video> 
    <div class="my-div" (click)="clickBox()" #divPos></div> 
  </div>
  

  注意：如果视频URL是blob:或data:协议，这个属性可能不需要，但普通HTTP/HTTPS资源必须加。

2. 确保视频加载完成再操作 #

不要在点击后立刻执行Canvas绘制，得等视频至少加载了当前帧。可以在点击方法里先检查视频的readyState：

• readyState >= 2表示视频已经加载了当前帧，足够进行截图操作。

3. 正确实现裁剪逻辑 #

先在组件里通过@ViewChild获取视频和裁剪区域的DOM元素，然后计算裁剪坐标，再进行Canvas绘制：

组件代码示例 #

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-video-crop',
  templateUrl: './video-crop.component.html',
  styleUrls: ['./video-crop.component.css']
})
export class VideoCropComponent {
  @ViewChild('myvideo') myvideo!: ElementRef<HTMLVideoElement>;
  @ViewChild('divPos') divPos!: ElementRef<HTMLDivElement>;

  clickBox() {
    const videoEl = this.myvideo.nativeElement;
    const cropBoxEl = this.divPos.nativeElement;

    // 检查视频是否加载完成
    if (videoEl.readyState < 2) {
      alert('视频还没加载好，请稍等一下～');
      return;
    }

    // 计算裁剪区域相对于视频的坐标和尺寸
    const videoRect = videoEl.getBoundingClientRect();
    const cropBoxRect = cropBoxEl.getBoundingClientRect();
    
    const startX = cropBoxRect.left - videoRect.left;
    const startY = cropBoxRect.top - videoRect.top;
    const cropWidth = cropBoxRect.width;
    const cropHeight = cropBoxRect.height;

    // 创建Canvas并绘制裁剪区域
    const canvas = document.createElement('canvas');
    canvas.width = cropWidth;
    canvas.height = cropHeight;
    const ctx = canvas.getContext('2d');

    try {
      // drawImage参数：源视频，裁剪起始坐标，裁剪宽高，Canvas起始坐标，Canvas绘制宽高
      ctx?.drawImage(videoEl, startX, startY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
      const imageDataUrl = canvas.toDataURL('image/png');
      // 这里可以把dataURL用于显示、下载或者上传
      console.log('裁剪成功！', imageDataUrl);
      // 示例：创建一个图片元素显示裁剪结果
      const img = document.createElement('img');
      img.src = imageDataUrl;
      document.body.appendChild(img);
    } catch (err) {
      console.error('裁剪失败：', err);
    }
  }
}

额外注意事项 #

• 如果你的视频是通过createObjectURL从本地文件创建的，确保文件读取过程没有跨域问题（本地文件一般不会有这个问题）。
• 有些浏览器对crossorigin属性的大小写敏感，一定要写crossorigin="anonymous"（全小写）。

内容的提问来源于stack exchange，提问作者edkeveked