canvas节点无法导出图片_画布到图像无法在'HTMLCanvasElement'上执行'toDataURL'：可能无法导出污染的画布...

I am getting a picture from facebook api with $scope.picture.picture.data.url it correctly renders it to canvas but when I want to change it to dataUrl it get me this error

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

canvas is rendered like this

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");

and am using this code to chnage it to dataUrl

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

var dataURL = canv.toDataURL('image/jpg');

documentData={"image":dataURL,"gameName":$scope.gameName,"userId":$scope.userId,"gameId":$scope.gameId};

解决方案

For security reasons you cannot access the content of a canvas if you draw something onto it which comes outside of your domain, in this case an image from facebook.

The canvas becomes tainted in this case. You can still draw other stuff to it, the user sees it, but you are not allowed to programatically read it anymore.