title: canvas.toDataURL() SecurityError
body: <p>So I'm using google maps and I get the picture so it looks like this</p>
  
  <pre><code>&lt;img id="staticMap"
          src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&amp;zoom=13&amp;size=600x300&amp;maptype=roadmap
  &amp;markers=color:blue%7Clabel:S%7C40.702147,-74.015794&amp;markers=color:green%7Clabel:G%7C40.711614,-74.012318
  &amp;markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&amp;sensor=false"&gt;
  </code></pre>
  
  <p>I need to save it. I have found this:</p>
  
  <pre><code>function getBase64FromImageUrl(URL) {
      var img = new Image();
      img.src = URL;
      img.onload = function() {
  
          var canvas = document.createElement("canvas");
          canvas.width = this.width;
          canvas.height = this.height;
  
          var ctx = canvas.getContext("2d");
          ctx.drawImage(this, 0, 0);
  
          var dataURL = canvas.toDataURL("image/png");
  
          alert(dataURL.replace(/^data:image\/(png|jpg);base64,/, ""));
  
      };
  }
  </code></pre>
  
  <p>But I get this problem:</p>
  
  <blockquote>
    <p>Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported. </p>
  </blockquote>
  
  <p>I searched for fixes. I found a sample here <a href="http://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server">How to use CORS</a> but still I can't tie these 2 pieces of code together to make it work. Maybe I'm doing it the wrong way and there is a simpler way to do it? I'm trying to save this pic so that I can transfer the data to my server. So maybe someone did something like this and knows how to make <code>.toDataURL()</code> work as I need it?</p>