Estoy tratando de usar una biblioteca javascript de terceros en mi aplicación de reacción ( https://github.com/giventofly/pixelit ). Como no había un paquete npm, descargué el archivo js y lo importé. Se supone que debe tomar la imagen por su id y pixelarla con la paleta de colores elegida. Sin embargo, solo puede leer imágenes en la página index.html y no que se hayan procesado en el archivo JSX. ¿Es porque la biblioteca no admite reaccionar? o estoy haciendo algo mal?

El siguiente es el ejemplo de trabajo proporcionado:

 <img src="assets/sky.jpg" id="pixelitimg" alt="" /> <canvas id="pixelitcanvas"></canvas> <script> const mypalette = [ [26, 28, 44], // ... ]; const px = new pixelit({ from: document.getElementById("pixelitimg"), palette: mypalette, }); px.draw().pixelate().convertPalette(); </script>

Así es como lo uso:

 import { pixelit } from "./pixelit"; const renderImage = () => { const mypalette = [ [26, 28, 44], // ... ]; const px = new pixelit(document.getElementById("pixelitimg"), mypalette); px.draw().pixelate().convertPalette(); }; return ( <div> <img src={twitterLogo} id="pixelitimg" alt="" /> <canvas id="pixelitcanvas"></canvas> {renderimage()} </div> );

La página de reacción no muestra nada. Sin embargo, cuando agrego el elemento de imagen y el elemento canva en la página index.html, funciona según lo previsto.