Html2canvas: take screenshot of google map using javascript
Hi
I tried following code: this div "#map-canvas" contents google map.
$('#map-canvas').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
window.open(img);
}
});
}
Using this code I am getting blank map.
Please find output of Google map.
Let me know how to overcome with this issue.
hardikshah157
All 7 comments
You can't render images (google maps tiles in this case) that reside under different origin unless they are served with cors headers. One way you can overcome this is by using a proxy for the images.
niklasvh
on 13 Dec 2014
I have tried with php proxy server but facing error: "Uncaught
SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement':
Tainted canvases may not be exported."
I have tried this proxy server:
https://github.com/brcontainer/html2canvas-php-proxy,
With above proxy server I have used Google map direction :
https://developers.google.com/maps/documentation/javascript/examples/directions-simple
On Sat, Dec 13, 2014 at 11:11 PM, Niklas von Hertzen <
[email protected]> wrote:
You can't render images (google maps tiles in this case) that reside under
different origin unless they are served with cors headers
https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS.
One way you can overcome this is by using a proxy for the images.—
Reply to this email directly or view it on GitHub
https://github.com/niklasvh/html2canvas/issues/485#issuecomment-66884354
.
_HARDIK SHAH_
hardikshah157
on 14 Dec 2014
I am facing the same issue. Did you find a solution for this? I want to get a screenshot for google maps using html2canvas. Appreciate your reply.
tarekahf
on 25 Nov 2016
Bump. Any Updates?
smittysmee
on 28 Feb 2017
Passing useCORS: true in the options fixed the issue for me. Also, allowTaint: false. It would help if you execute the function after all tiles are visible, you can listen to the tilesloaded and execute html2canvas after that happens.
orloxx
on 2 Mar 2017
I am facing the same issue. I tried using useCORS: true and allowTaint: false in the Map Options but that did not help. I am trying to get the screenshot only after the page is loaded. Am I missing anything?
NikhilDole
on 30 Jul 2019
I'm getting an issue too when taking screenshots of Google Maps, I get this error:
ERROR Error: Uncaught (in promise): InvalidStateError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at CanvasRenderer.<anonymous> (html2canvas.js:6289)
at step (html2canvas.js:83)
at Object.next (html2canvas.js:64)
at fulfilled (html2canvas.js:54)
at ZoneDelegate.invoke (zone-evergreen.js:365)
at Object.onInvoke (core.js:39698)
at ZoneDelegate.invoke (zone-evergreen.js:364)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:851
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at resolvePromise (zone-evergreen.js:793)
at resolvePromise (zone-evergreen.js:752)
at zone-evergreen.js:854
at ZoneDelegate.invokeTask (zone-evergreen.js:400)
at Object.onInvokeTask (core.js:39679)
at ZoneDelegate.invokeTask (zone-evergreen.js:399)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:570)
at invokeTask (zone-evergreen.js:485)
at ZoneTask.invoke (zone-evergreen.js:470)
Please, this is very important.
shaji-Dev
on 1 Sep 2019
Related issues
tibewww
·
4Comments
kunal886496
·
3Comments
stevencherry1
·
3Comments
deepender87
·
4Comments
wbarrantes
·
3Comments
Most helpful comment
Passing
useCORS: truein the options fixed the issue for me. Also,allowTaint: false. It would help if you execute the function after all tiles are visible, you can listen to thetilesloadedand executehtml2canvasafter that happens.