受污染的画布可能无法出口。（crossOrigin：Anonymous）

Question

我正在为裁剪图像编写一个角度指令，我将使用html5画布。

模板：

<div class="image-holder">
<img src="{{imagesrc}}" image-cropper>

JS：

var app = angular.module('myApp', []);
app.controller('todoCtrl', function($scope) {
    $scope.imagesrc = "https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg";
});
app.directive('imageCropper', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var _originalHeight,_originalWidth;
            element.on('load', function() { 
                //actual height and width of image 
                _originalHeight=element[0].height;
                _originalWidth=element[0].width;
                element[0].crossOrigin='Anonymous';
                var timestamp = new Date().getTime();
                attrs.src= attrs.src + (timestamp.toString());
                var canvas = document.createElement("canvas");
                var context = canvas.getContext('2d');
                context.drawImage(element[0], _originalWidth/2, _originalHeight/2, _originalWidth, _originalHeight, 0, 0, element.parent()[0].offsetWidth, element.parent()[0].offsetHeight);
                var newImg=canvas.toDataURL();
                console.log(newImg);
            })
        }
    }
})

但我收到错误：

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

即使我保留了属性crossorigin='Anonymous'

任何帮助都将不胜感激。