Canvas.toDataURL () SecurityError

Question

So, I use Google maps, and I get a snapshot, so it looks like

<img id="staticMap" src="http://maps.googleapis.com/maps/api/staticmap?center=Brooklyn+Bridge,New+York,NY&zoom=13&size=600x300&maptype=roadmap &markers=color:blue%7Clabel:S%7C40.702147,-74.015794&markers=color:green%7Clabel:G%7C40.711614,-74.012318 &markers=color:red%7Ccolor:red%7Clabel:C%7C40.718217,-73.998284&sensor=false"> 

I need to save it. I found this:

 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,/, "")); }; } 

But I get this problem:

Uncaught SecurityError: Failed to execute 'toDataURL' in 'HTMLCanvasElement': infected canvases may not be exported.

I was looking for corrections. I found a sample here How to use CORS , but still I can't link these two code snippets to make it work. Maybe I'm doing it wrong, and is there an easier way to do this? I am trying to save this drawing in order to transfer data to my server. So maybe someone did something like this and knows how to make .toDataURL() work the way I need it?

Answer 1

If Google does not support this image with the correct Access-Control-Allow-Origin header, you cannot use their image in the canvas. This is because it does not have CORS approval. You can read about it here , but it essentially means:

Although you can use images without CORS approval in your canvas, this makes the shadow a canvas. Once the canvas is corrupted, you cannot output data from the canvas longer. For example, you cannot use the canvas longer with the toBlob (), toDataURL () or getImageData () methods; this will result in a security error.

This protects users from personal data that is opened using images to retrieve information from remote websites without permission.

I suggest just passing the URL into your server language and using curl to load the image. Be careful to secure this!

EDIT:

Since this answer is still an accepted answer, you should check out the @shadyshrif answer , which should use:

 var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 

This will only work if you have the correct permissions, but at least let you do what you want.

Answer 2

Just use the crossOrigin attribute and pass 'anonymous' as the second parameter

 var img = new Image(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url; 

Answer 3

Try the code below ...

 <img crossOrigin="anonymous" id="imgpicture" fall-back="images/penang realty,Apartment,house,condominium,terrace house,semi d,detached, bungalow,high end luxury properties,landed properties,gated guarded house.png" ng-src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" height="220" width="200" class="watermark"> 

Answer 4

This method will not allow you to receive the "Access-Control-Allow-Origin" message from the server you are accessing.

 var img = new Image(); var timestamp = new Date().getTime(); img.setAttribute('crossOrigin', 'anonymous'); img.src = url + '?' + timestamp; 

Answer 5

In my case, I used the WebBrowser control (forcing IE 11), and I could not get past the error. Switching to CefSharp, which uses Chrome, decided for me.

Answer 6

Using fabric js , we can solve this problem with a security error in IE.

  function getBase64FromImageUrl(URL) { var canvas = new fabric.Canvas('c'); var img = new Image(); img.onload = function() { var canvas1 = document.createElement("canvas"); canvas1.width = this.width; canvas1.height = this.height; var ctx = canvas.getContext('2d'); ctx.drawImage(this, 0, 0); var dataURL = canvas.toDataURL({format: "png"}); }; img.src = URL; }