0

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};
Dagm Fekadu
  • 598
  • 1
  • 8
  • 22
  • I think I do remember FB's graph API does send the proper request headers so setting the crossOrigin attribute to 'anonymous' should be enough to make this work on browsers that do implement this attribute. – Kaiido Jan 03 '16 at 15:38
  • its not working for me – Dagm Fekadu Jan 03 '16 at 15:43

1 Answers1

4

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.

Csene
  • 69
  • 4
  • so What is best solution here – Dagm Fekadu Jan 03 '16 at 07:10
  • The question is what do you want to do. Since it would be a serious security problem you cannot just download images without the user's interaction. If the image is publicly available with an url, you can download it server side, if not you can ask the user to upload it on your site. – Csene Jan 03 '16 at 07:20
  • Its a facebook app,am downloading a user profile on canvas and uploading to server as an image – Dagm Fekadu Jan 03 '16 at 07:25
  • In this case you have an access token that grants access to the user's images. you can upload this token to your server and then it can download images in the user's name. – Csene Jan 03 '16 at 07:38
  • I'm not familiar with facebook apps, but can you try this? It might work in this case. https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image – Csene Jan 03 '16 at 07:45