Created image with use-react-screenshot is incorrectly rendered

Question

I'm using use-react-screenshot to take a screenshot of a specific dom element, but the image gets weird, it looks like it partially renders the dom element

I'm using the sample code in create-react-app

import logo from "./logo.svg";
import "./App.css";
import { createRef } from "react";
import { useScreenshot, createFileName } from "use-react-screenshot";

function App() {
    const ref = createRef(null);
    const [image, takeScreenShot] = useScreenshot({
        type: "image/jpeg",
        quality: 1.0,
    });

    const download = (image, { name = "img", extension = "jpg" } = {}) => {
        const a = document.createElement("a");
        a.href = image;
        a.download = createFileName(extension, name);
        a.click();
    };

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

    return (
        <div className="App">
            <header className="App-header">
                <button onClick={downloadScreenshot}>
                    Download screenshot
                </button>
                <img src={logo} className="App-logo" alt="logo" ref={ref} />
            </header>
        </div>
    );
}

export default App;

A sandbox to play around with it

I'm not sure if it's related to html2canvas as a peerDependency. And wherever I put the ref to, the same error happens

score 5 · Accepted Answer · answered Feb 28 '22 at 07:23

On github there were a lot of issues related with SVG not downloading properly with html2canvas. I suspect these to be the issues. Solutions / workaround provided by users includes code modifications to the internal code. This is again hard to maintain further along. Also Firefox showed blank image when downloaded.

My best solution would be to use an alternative library like html-to-image. Within a few minutes everything seems to be working with this. (Even Firefox)

import * as htmlToImage from "html-to-image";
...
  const takeScreenShot = async (node) => {
    const dataURI = await htmlToImage.toJpeg(node);
    return dataURI;
  };

  const download = (image, { name = "img", extension = "jpg" } = {}) => {
    const a = document.createElement("a");
    a.href = image;
    a.download = createFileName(extension, name);
    a.click();
  };

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

Codesandbox

Now this might not be the best solution, but it is the best alternative working solution right now.

Thanks for the suggestion. It seems to work better however, when I do it on my personal project, the structure gets messed up, like if there were random values in absolute position (I'm screenshooting text), and it has some webpack errors when compiling.. but I'll take a look at it and see how can I workaround it — David Salomon, Mar 01 '22 at 15:01

score 1 · Answer 2 · answered Mar 01 '22 at 15:05

After some research, it seems that there's an incompatibility with React V17, as it doesn't install html2canvas as a peerDependency like it used to do it in React V16. So, it's a bug.

The workaround of it is adding html2canvas as a peer dependency using the legacy flag in the terminal

npm add html2canvas --legacy-peer-deps

After doing that, I can take screenshots

Created image with use-react-screenshot is incorrectly rendered

2 Answers2