I am getting a blank screenshot.
Opened this issue · 5 comments
usamamashkoor commented
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 commented
Did you check to install the peerDependencie html2canvas? I didn't read the docs and had issues to. :)
shahan007 commented
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 commented
This is mostly like due to a CORS issue with html2canvas - refer here
avoguga commented
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.