Esta es básicamente una aplicación que automatiza la creación de publicaciones en las redes sociales. Tengo una plantilla de publicación en redes sociales para el "Cablgram" vertical almacenada en el backend, y la solicitud me devuelve el código HTML para esa plantilla. Cuando trato de convertir esa imagen en una imagen (usando la biblioteca domtoimage) para poder mostrarla, aparece este error: dom-to-image.js:191 Uncaught (en promesa) TypeError: node.cloneNode is not a función.
import './Dashboard.css'; import { useEffect, useState } from 'react' import { Grid, Image } from 'semantic-ui-react' import axios from 'axios' import domtoimage from 'dom-to-image' import parse from 'html-react-parser' function Dashboard(props) { let [posts, setPosts] = useState([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]) function retain(unsafe) { return unsafe .replaceAll("<", ' <') .replaceAll(">", ' > ') } async function getPosts() { let { data } = await axios.post('http://localhost:3000/templates/get', { vertical_name: 'cablgram' }) let articles = data.articles let article_htmls = articles.map(async (code) => { const html = retain(code) const actual_html = parse(html) const url = await domtoimage.toPng(wrapper) return url }) setPosts(article_htmls) } useEffect(() => { getPosts() }, []) return ( <div className="Dashboard page-container"> <div className="title-container"> <h1 className="title">Atlas</h1> </div> <div className="subtitle-container"> <span className="subtitle">Curated news from contemporary culture.</span> </div> <div className="dashboard-grid-container"> <Grid columns={3}> { posts.map((post, index) => ( <Grid.Column key={index}> {post} </Grid.Column> )) } </Grid> </div> </div> ) } export default Dashboard¿Alguien podría explicarme qué está mal y cómo puedo solucionarlo?
Probar esto:
// Syntax: let newClone = node.cloneNode([deep]) // Example: let p = document.getElementById("para1") let p_prime = p.cloneNode(true)