Estoy desarrollando un sitio web con React que tiene lo que llamamos "fragmentos", básicamente una ventana modal que muestra algún tipo de medio (audios, videos, diapositivas, citas de texto, archivos PDF). Estos medios tienen "posiciones", como un número de página, un número de imagen, una posición de reproducción o una posición de desplazamiento. Si lo desea, el usuario puede almacenar estos fragmentos junto con sus posiciones en un "casillero" y volver más tarde a lo que haya allí. Visualmente, el casillero contendrá una "miniatura" del fragmento que representa la apariencia del fragmento en el momento de almacenarlo. Mi pregunta es cómo hacer una miniatura sobre la marcha. Se me ocurren dos enfoques, sin embargo, si tiene otras ideas, estoy ansioso por escucharlas.
Enfoque del componente: dado que ya tengo el componente, podría reutilizarlo o más bien clonarlo, reducirlo, deshabilitarlo para la interacción con el mouse. ¿Sería React.cloneElement() el camino a seguir?
Enfoque de generación de imágenes: dado que solo necesito una imagen, podría tomar una captura de pantalla del área del fragmento, reducirla y usarla. ¿Se puede hacer esto completamente (desde la generación hasta el uso) en el lado del cliente? ¿Hay una buena biblioteca que haga el trabajo pesado por mí?
Después de algunas investigaciones encontré una solución. Curiosamente, es una mezcla de los dos enfoques en los que pude pensar. Es posible acceder y rasterizar los elementos DOM que componen los fragmentos, dibujarlos en un lienzo y convertirlo en una imagen. La biblioteca más popular para esto parece ser html2canvas , sin embargo, hay una serie de otras entre las que parecen destacarse rasterizeHTML y html-to-image . A menudo existen contenedores para React, en el caso de html2canvas, por ejemplo, use-react-screenshot .