Question

我有以下js代码捕获视频并绘制画布。控制器代码：

$scope.capture = function(){
    var canvas = document.getElementById('canvas');
    var video = document.getElementById('video');
    //video.setAttribute("crossOrigin", "anonymous");
    canvas.getContext('2d').drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
    var dataURL = canvas.toDataURL('image/jpeg');
    }

我在上传文件并播放视频后运行上述功能：

 var myEl = angular.element( document.querySelector( '#file-5' ) );
        myEl.bind('change', function(e) {
        $scope.handleFileSelect = function() {
          //DO STUFF : uploads file and plays it in template
          //Then I run the capture function to draw canvas thumbnail
          //Plan is to check if the  $scope.handleFileSelect(); has finished executing.
          $interval (function(){
                    $scope.capture();
          }, 5500); 
        }
      $scope.handleFileSelect();
});

我的模板视图：

<video id="video" preload="metadata"  height="400" width="100%" autoplay="1" src="{{trustSrc(upload.downloadURL)}}" type="video/mp4" controls muted></video><br/>

<canvas id="canvas"></canvas>

这将绘制画布图像。

问题是我无法获取dataUrl

var dataURL = canvas.toDataURL('image/jpeg');

canvas.toDataURL（'image / jpeg'）返回错误

Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

从网上研究，有建议使用crossOrigin =“anonymous”

我尝试在视频标签上设置它，它无法正常工作。关于如何设置它的任何想法？

如何设置匿名的crossOrigin

0 个答案: