Why is this happening

[tomimarkus991]

Expected: text is centered like on webpage

Result: also the above icons are blurred, but that already has a PR

[sneuvonen]

I have the same issue; a large part of vertically centered texts get displaced, but not all.

[eugeneZolotarenko]

I have the same issue; a large part of vertically centered texts get displaced, but not all.

Have you managed to fix it?

[ronildo]

I have the same issue....

[eugeneZolotarenko]

The problem is specifically in html2canvas library.
Here's the PR with the potential fix: niklasvh/html2canvas#2938
Maybe we can use html2canvas-pro instead? It's an updated version with fixed bugs.

[lachlanjc]

If anyone else is looking to use html2canvas-pro in their project, here's the hook code adapted from this library, with TypeScript types:

// Adapted from https://github.com/vre2h/use-react-screenshot/blob/master/src/index.js
// but using html2canvas-pro for its upgrades

import { useState } from "react";
import html2canvas, { Options } from "html2canvas-pro";

export const useScreenshot = ({
  type,
  quality,
}: {
  type?: "image/jpeg" | "image/png";
  quality?: number;
} = {}): [
  string | null,
  (ref: HTMLDivElement) => Promise<string | void>,
  Object,
] => {
  const [image, setImage] = useState<string | null>(null);
  const [error, setError] = useState(null);

  const takeScreenShot = (
    node: HTMLElement,
    options: Partial<Options> = {},
  ) => {
    if (!node) {
      throw new Error("You should provide correct html node.");
    }
    return html2canvas(node, options)
      .then((canvas) => {
        const croppedCanvas = document.createElement("canvas");
        const croppedCanvasContext = croppedCanvas.getContext("2d");

        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(type, quality);

        setImage(base64Image);
        return base64Image;
      })
      .catch(setError);
  };

  return [image, takeScreenShot, { error }];
};