画布到图像无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布

Question

我正在使用 $ scope.picture.picture.data.url 从facebook api获取一张图片，它正确地将其渲染为画布，但是当我想将其更改为 dataUrl 它让我犯了这个错误

  

画布到图像无法执行＆＃39; toDataURL＆＃39; on＆＃39; HTMLCanvasElement＆＃39;：可能无法导出受污染的画布。

画布像这样呈现

 var canv=document.getElementById("mainCanvasD");
       var ctx = canv.getContext('2d');

       ctx.clearRect(0,0,540,320);
       // $scope.picture used here
       // draw games background image here 
       // console.log($scope.picture.picture.data.url);

       drawUrlImage($scope.picture.picture.data.url,10,130,180,180,"mainCanvasD");
       drawUrlImage("http://localhost/ezone/public/game/"+$scope.gameName+"/right/"+generateRandom(6)+".jpg",240,130,180,180,"mainCanvasD");

并使用此代码将其命名为dataUrl

 var canv=document.getElementById("mainCanvasD");

   var dataURL = canv.toDataURL('image/jpg');
   documentData={"image":dataURL,"gameName":$scope.gameName,"userId":$scope.userId,"gameId":$scope.gameId};

Answer 1

出于安全原因，如果您在域外绘制一些内容，则无法访问画布的内容，在这种情况下是来自Facebook的图像。 在这种情况下，画布变得有污点。您仍然可以绘制其他内容，用户可以看到它，但不允许以编程方式阅读它。