0
248
ViewsCreated image with use-react-screenshot is incorrectly rendered
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
2 answers
Answer question0
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);
...
Now this might not be the best solution, but it is the best alternative working solution right now.
0
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