Browser's Same Origin policy prevents me using the API to fetch radar images

  • 1
  • Problem
  • Updated 4 years ago
I'm trying to load radar images into a canvas element using html5, but the Same Origin policy of most major browsers prevents me from doing so. In addition, trying to use Cross-Origin Resource Sharing doesn't work, either. Currently, without using CORS, I'm getting the error "Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." I hope there's a solution. Thank you!
Photo of wilsonbiggs

wilsonbiggs

  • 2 Posts
  • 0 Reply Likes
  • frustrated

Posted 4 years ago

  • 1
Photo of Tim Roche

Tim Roche, Official Rep

  • 297 Posts
  • 24 Reply Likes
Is your project on github or similar?

If not, if you could send me a code sample, I'll see what I can do about enabling CORS support for these requests, and testing for you.

sorry for the inconvenience, I will hopefully be able to get a fix out within a week or so.
Photo of wilsonbiggs

wilsonbiggs

  • 2 Posts
  • 0 Reply Likes
Thanks for the quick reply! Here's my code:

var canvas = document.createElement('canvas');
var ctx = canvas.getContext("2d");
var img = document.createElement('img');
img.onload = function(e) {
ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
var url = canvas.toDataURL();
};
img.crossOrigin = '';
img.src = 'http://api.wunderground.com/api/API_K...';

Thank you. It's also live at http://wilsonbiggs.com/radar/ if you'd like to look at the source of the page.