Tengo una matriz proveniente de una solicitud de obtención que se me devuelve como una cadena, de esta forma: [[[datos de fila rojos], [datos de fila]], [datos de fila azules], [datos de fila]]… ]. Es esencialmente una imagen con 3 tuplas de valores 0-255 que representan valores RGB, y estoy tratando de mostrarla en mi aplicación React como una imagen. Aquí también hay un fragmento de la matriz: "[[[68, 81, 237], [67, 80, 236], [64, 79, 235], [61, 79, 234], [62, 80, 235] , [61, 81, 236], [61, 83, 238], [62, 84, 239], [62, 84, 239], [62, 84, 239]",
¿Cuál es la forma más fácil de convertir esto en algún tipo de imagen que pueda mostrar en una página web?
Puede representar div s como píxeles y dibujarlo como se muestra a continuación usando Array.map dos veces para iterar sobre las rows y columns . Utilice una matriz 2D para almacenar la información de color. Puede ajustar el tamaño de píxel cambiando los estilos de width y height .
const data = [ [ [6, 81, 237], [67, 0, 236], [64, 79, 23] ], [ [61, 79, 234], [20, 220, 15], [6, 33, 106] ], [ [255, 83, 238], [62, 84, 239], [62, 228, 229] ] ]; function App() { return ( <div className="App"> {data.map((row) => ( <div style={{ display: "flex" }}> {row.map(([red, green, blue]) => ( <div style={{ backgroundColor: `rgb(${red},${green},${blue})`, width: "30px", height: "30px" }} ></div> ))} </div> ))} </div> ); } ReactDOM.render(<App/>, document.getElementById("root")); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>