Unable to capture 'screenshot' of Google map

[roguebug]

First of all, great work. This is the easiest to use and WORKING module.

I tried to save Google map as an image. The generated image is not exactly the same. In some case, it is very different.

Expected Behavior

The image should look the same as the google map

Current Behavior

See attached screenshots. The left is a Google map using agm-map. The right is generated data PNG. In picture 1, the generated image is very different. In picture 2, only part of the Google map is in the PNG.

My code is nothing fancy:
htmlToImage.toPng(element).then((dataUrl) => {
that.imageData = dataUrl;
}).catch(function (error) {
console.error('oops, something went wrong!', error);
});

I noticed the error message in the console:
Error while reading CSS rules from https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Google+Sans:400,500,700 SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

Not sure if this is what screws up the image rendering.

Your Environment

• html-to-image: 1.6.0
• OS: Windows 10
• Browser: 89.0.4389.128 (Official Build) (64-bit)
• Angular: 8
  "dependencies": {
  "@agm/core": "^3.0.0-beta.0",
  "@angular/animations": "~8.2.14",
  "@angular/common": "~8.2.14",
  "@angular/compiler": "~8.2.14",
  "@angular/core": "~8.2.14",
  "@angular/forms": "~8.2.14",
  "@angular/platform-browser": "~8.2.14",
  "@angular/platform-browser-dynamic": "~8.2.14",
  "@angular/router": "~8.2.14",
  "@types/googlemaps": "^3.39.8",
  "dom-to-image": "^2.6.0",
  "html-to-image": "^1.6.0",
  "html2canvas": "^1.0.0-rc.7",
  "rxjs": "~6.4.0",
  "tslib": "^1.10.0",
  "zone.js": "~0.9.1"
  }

[vivcat]

👋 @roguebug

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[vivcat]

Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[sharilyn0415]

Run into the same issue. Any updates?

[vivcat]

Hiya!
This issue has gone quiet. Spooky quiet. 👻
We get a lot of issues, so we currently close issues after 60 days of inactivity. It’s been at least 20 days since the last update here. If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not-stale" to keep this issue open! As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.

Thanks for being a part of the Antv community! 💪💯

[vivcat]

Hey again!
It’s been 60 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it. Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to comment on this issue or create a new one if you need anything else. As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request.
Thanks again for being part of the Antv community! 💪💯

[maxizhukov]

I also have same issue, Why are you closing without fixing?

[seungilpark]

same issue here

[managervcf]

I managed to solve this issue with the html2canvas library.
Adding the { useCORS: true } option made it magically it work for me.

If anyone needs, I'm sharing my custom React hook below:

import html2canvas from 'html2canvas';
import { MutableRefObject } from 'react';

/**
 * A hook that exports a function allowing to capture a specific HTMLElement as an image.
 */
export function useScreenshot<T extends HTMLElement>(ref: MutableRefObject<T | null>, filename: string) {
  const takeScreenShot = async (node: T | null) => {
    if (!node) {
      return;
    }

    const dataURI = await html2canvas(
      node,
      // This is a very important line as it allows to capture an image of Google Maps!
      { useCORS: true },
    );
    return dataURI;
  };

  const download = (canvas?: HTMLCanvasElement) => {
    const a = document.createElement('a');

    a.target = '_blank';
    a.href = canvas?.toDataURL() ?? '';
    a.download = `${filename}.jpeg`;
    a.click();
  };

  const downloadScreenshot = () => takeScreenShot(ref.current).then(download);

  return { downloadScreenshot };
}

[vivcat]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.