javascript - Can't capture google map with html2canvas - Stack Overflow

admin管理员组

文章数量:1345329

I have a problem when capture screen with html2canvas of html2canvas.hertzen, 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

I have a problem when capture screen with html2canvas of html2canvas.hertzen., 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

• javascript
• html
• google-maps

Share Improve this question Follow edited Jan 13, 2016 at 10:17 Adam Azad 11.3k55 gold badges3131 silver badges7272 bronze badges asked Jul 22, 2013 at 15:56 HoangHieuHoangHieu 2,84033 gold badges3232 silver badges4646 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 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./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.

  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./my-proxy?url=https://path-to-image.jpg&responseType=blob

More information about the proxy server is available here.

本文标签： javascriptCan39t capture google map with html2canvasStack Overflow