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

Answer 1

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.