1

html2canvas when taking a screenshot of google maps does not work properly on chrome and safari, screenshot is created, but often custom markers are not included in the screenshot, in the case of firefox everything works correctly.

Code:

  const takeScreenshotHtml2canvas = async (node: HTMLDivElement) => {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    const canvas = await html2canvas(node, {
      useCORS: true,
      allowTaint: true,

      ignoreElements: (node) => {
        return node.nodeName === "IFRAME";
      },
    });
    const croppedCanvas = document.createElement("canvas");
    const croppedCanvasContext = croppedCanvas.getContext("2d"); // init data
    if (!croppedCanvasContext || !canvas) {
      throw new Error("Canvas  error");
    }
    const cropPositionTop = 0;
    const cropPositionLeft = 0;
    const cropWidth = canvas.width;
    const cropHeight = canvas.height;
    croppedCanvas.width = cropWidth;
    croppedCanvas.height = cropHeight;
    croppedCanvasContext.drawImage(canvas, cropPositionLeft, cropPositionTop);
    const base64Image = croppedCanvas.toDataURL("image/png", 1.0).split(",")[1];
    return base64Image;
  };

  const takeScreenshothtmlToImage = async (node: HTMLDivElement) => {
    const dataUrl = await htmlToImage.toPng(node);

    return dataUrl.split(",")[1];
  };

I tried using html-to-image, in this case everything works except taking a screenshot on IOS safari, (gets a white background and google maps buttons)

Filbert
  • 13
  • 2
  • Have you gone through the many related questions here? Have you tried anything? – MrUpsidown Mar 16 '23 at 10:17
  • yes , but no answer found so far has not solved my problem, that's why this topic was created – Filbert Mar 16 '23 at 16:03
  • Then provide a [mcve] that allows to reproduce the issue. – MrUpsidown Mar 16 '23 at 16:34
  • FWIW: since a few weeks I suffer various issues with Firefox and canvas. Google Maps renders strange artifacts, draw.io exports a png with just a colorful pattern and the list goes on. I am not aware of any specific change on my side. (Firefox on Fedora 37, KDE Plasma, Wayland) – Marc Wittke Apr 11 '23 at 14:00

0 Answers0