使用画布绘制图像不能以角度工作答案

【问题标题】：drawing images using canvas not working in angular使用画布绘制图像不能以角度工作
【发布时间】：2018-03-22 00:17:27
【问题描述】：

我想裁剪用户点击后正在播放的视频的一部分。但我遇到以下错误：

错误 DOMException：无法在“HTMLCanvasElement”上执行“toDataURL”：可能无法导出受污染的画布。

here 和 there 已经提出了类似的问题，但它们并没有解决我的问题。

模板

<div>
  <video src="url" #myvideo> </video>
  <div class="my-div" (click)="clickBox()" #divPos></div>
<div>

组件

clickVideo() {
  this.clickEvent = Observable.fromEvent(this.divPos.nativeElement, 'click')
  .map(event =>  event);
  this.clickEvent.subscribe(event => {
    const canvas: HTMLCanvasElement = this.renderer.createElement('canvas');
    const img = this.renderer.createElement('img');
    let context = canvas.getContext('2d');
    context.drawImage(this.myvideo.nativeElement, event.pageX-10, event.pageY-10, 30, 30);
    let data = canvas.toDataURL('image/png');
    img.setAttribute('src', data);
    this.renderer.appendChild(document.body, img);
  })
}

【问题讨论】：

抱歉，之前回答错了问题。你是从本地驱动器测试这个吗？使用 file:// 协议？
为什么要从本地驱动器进行测试？因为我的视频是从服务器获取的，我想从该视频中拍照。所以我没有使用驱动器中的任何东西
因为这是导致“污染”错误的原因之一。您提到错误出现在“context.drawImage”行，但错误“无法在“HTMLCanvasElement”上执行“toDataURL”意味着它出现在“let data = canvas.toDataURL('image/png'); '线。到底是哪一个？
正如错误消息所述，由于toDataURL@StevePadmore而引发错误；所以这是导致错误的行

标签： javascript html angular

【解决方案1】：

我终于找到了解决办法。我需要做这两件事：

流媒体服务器应该启用 CORS：Access-Control-Allow-Origin
为了解决受污染的画布服务器端，我将视频标签更改为以下<video src="url" crossorigin="anonymous" #myvideo> </video>

尝试在组件函数clickVideo() 中设置视频标签可能行不通，因为我很难学到，因为客户端需要在加载视频之前跟踪该信息。

【讨论】：

正想问是否是 CORS 问题。很高兴您找到了解决方案。