I am getting a blank screenshot.

[usamamashkoor]

Whenever I use this plugin to take a screenshot, I always get a blank screenshot.

I am using the example code, but still, it is not working on my website, This is my code.

import React, { createRef } from "react";
// import Text from "./Text";
import { useScreenshot, createFileName } from "use-react-screenshot";

export default () => {
    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>
            <button onClick={downloadScreenshot}>Download screenshot</button>
            <div
                ref={ref}
                style={{
                    border: "1px solid #ccc",
                    padding: "10px",
                    marginTop: "20px"
                }}
            >
                Hellow World
            </div>
        </div>
    );
};

[jaspervermeulen]

Did you check to install the peerDependencie html2canvas? I didn't read the docs and had issues to. :)

[shahan007]

@usamamashkoor

Were you able to fix it ? I am also getting an invisible image. Downloaded image only has the text in the screenshot but not the image itself, which is missing.

[gubbigubbi]

This is mostly like due to a CORS issue with html2canvas - refer here

[tawago]

#36

[avoguga]

observe if you are using images in another origin.

And try to use: useCORS: true like the others said.
If that doesn't work, try to review the webservice you are using for hosting the image.