CODEWITHSUNDEEP
javascripthtmlcanvasbase64
Moussawi7
Moussawi7

Reputation: 13289

IE9: canvas.toDataURL SECURITY_ERR

I am trying to convert facebook image to base64, but FileReader will not work on IE9, so i decided to use canvas.

Anyway, using canvas also generate an issue:

SCRIPT5022: DOM Exception: SECURITY_ERR (18)

And this is my code:

var url="http://graph.facebook.com/1420060541/picture?width=320&height=320";
 var canvas = document.createElement('CANVAS'),
 ctx = canvas.getContext('2d'),
 img = new Image;

 img.onload = function () {
  canvas.height = img.height;
  canvas.width = img.width;
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL('image/jpg');
  console.log(dataURL);
  canvas = null;
};
img.setAttribute('crossOrigin','anonymous');
img.src = url;

Upvotes: 0

Views: 340

Answers (1)

Blindman67
Blindman67

Reputation: 54099

update

Seems facebook does have the cross origin header Access-Control-Allow-Origin : "*"allowing anyone to see the images. If you tried to load an image forgetting to add img.setAttribute('crossOrigin','anonymous'); adding it the second time will fail because the cached image is interfering with the request headers. Empty the cache and send the request again with img.setAttribute('crossOrigin','anonymous'); that may fix your problem.

Cross domain error. There is no solution. Images must be from the same domain so you need to move the image to your domain, if you have one. Or set up a server on your machine and move the image to a directory on that. IF your domain is www.privateDomain.com then only images from privateDomain can be accessed via toDataURL If you are just using your hard drive, ie your page url starts with file:/// you can not access any image via toDataURL.

There are exceptions because some servers send headers with their images that allow cross domain access. One source of such images is wiki commons. There are others but you will have to search for them.

The other solution is to turn off network security on the browser (I don't know how on IE) but that will leave your browser open to attacks.

Its sad that we cant trust even images, but that is the way it is.

Upvotes: 2

Related Questions