Can't capture google map with html2canvas

Question

I have a problem when capture screen with html2canvas of html2canvas.hertzen.com, when I capture Map of google map in my page I can't see map

My map

My capture

My code

html2canvas(document.body, {
    onrendered: function(canvas) {
        document.body.appendChild(canvas);
    }
});

Anyone got a tip? Thanks

HoangHieu · Accepted Answer · 2016-03-28 17:14:15Z

7

The following works for me for Chrome and Firefox:

html2canvas(document.body, {
      proxy: "server.js",
      useCORS: true,
      onrendered: function(canvas) {
        document.body.appendChild(canvas);
      }
    });

where server.js is https://github.com/niklasvh/html2canvas-proxy-nodejs There are other proxies available for PHP and Python that I haven't tried yet. I cannot post both but if you google "html2canvas proxy" you'll be able to find the others if you need them.

edited Mar 28, 2016 at 17:14

HoangHieu

2,8403 gold badges32 silver badges46 bronze badges

answered Jul 23, 2013 at 16:45

mbailey

865 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

HoangHieu Over a year ago

I use html2canvas (from html2canvas.hertzen.com) to capture screenshot. I got this strange error like this: The code of my webpage is put on one host, say Host A. If my webpage contains an image on another host, say Host B, then I hit this error: Cross-origin image load denied by Cross-Origin Resource Sharing policy However, the confusing part is that if Host B is facebook (my image is a direct link to facebook fbcdn-profile-a.akamaihd.net/hprofile-ak-ash4/…) then the error disappear.

HoangHieu Over a year ago

My function html2canvas([document.body], { useCORS : true, logging : true, onrendered : function(canvas) { document.body.appendChild(canvas); var myImage = canvas.toDataURL("image/png"); window.open(myImage); } Anyone got a tip? Tks

mbailey Over a year ago

Check out this issue on the html2canvas github issue page, it should help you out: github.com/niklasvh/html2canvas/issues/248

Stanislav Ostapenko · Accepted Answer · 2022-09-29 08:03:12Z

0

  html2canvas(document.body, {
      proxy: "/my-proxy",
    }).then((canvas) => {
       document.body.appendChild(canvas);
    });

IMPORTANT: Don't add useCORS: true if you using proxy: "/my-proxy" setting.

The plugin will send the request in the next format

https://your-site.com/my-proxy?url=https://path-to-image.jpg&responseType=blob

More information about the proxy server is available here.

answered Sep 29, 2022 at 8:03

Stanislav Ostapenko

1,1228 silver badges14 bronze badges

Collectives™ on Stack Overflow

Can't capture google map with html2canvas

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related