0
242
ViewsLa imagen creada con use-react-screenshot se representa incorrectamente
Estoy usando use-react-screenshot para tomar una captura de pantalla de un elemento dom específico, pero la imagen se vuelve extraña, parece que representa parcialmente el elemento dom
Estoy usando el código de muestra en 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;Un arenero para jugar con él.
No estoy seguro de si está relacionado con html2canvas como una dependencia de pares. Y donde sea que ponga la ref , ocurre el mismo error.
2 answers
Answer question0
En github hubo muchos problemas relacionados con SVG que no se descargaban correctamente con html2canvas. Sospecho que estos son los problemas. Las soluciones/ soluciones provisionales proporcionadas por los usuarios incluyen modificaciones de código en el código interno. Esto es nuevamente difícil de mantener más adelante. También Firefox mostró una imagen en blanco cuando se descargó.
Mi mejor solución sería usar una biblioteca alternativa como html-to-image . En unos minutos todo parece estar funcionando con esto. (Incluso 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); ...Ahora, esta podría no ser la mejor solución, pero es la mejor solución de trabajo alternativa en este momento.
0
Después de algunas investigaciones, parece que hay una incompatibilidad con React V17, ya que no instala html2canvas como una dependencia de pares como solía hacerlo en React V16. Entonces, es un error .
La solución es agregar html2canvas como una dependencia de pares usando el indicador heredado en la terminal
npm add html2canvas --legacy-peer-depsDespués de hacer eso, puedo tomar capturas de pantalla.