0
121
ViewsConvertir JSON que contiene una lista de valores 0-255 como imagen base64 usando Javascript
Se supone que un componente de interfaz de usuario de WebAssembly no documentado que uso devuelve una imagen codificada en JPEG en JSON.
Aquí está el resultado (truncado):
{ "encodedImage":{ "0":255, "1":216, ... "13151":216, "13152":255, "13153":217 } }Estoy luchando por entender cómo convertir esta estructura de datos (desconocida para mí) en una imagen codificada en JPEG base64 válida.
Intenté lo siguiente en Repl.it , pero la salida no se puede procesar en un decodificador JPEG, por lo que es incorrecto:
console.log(btoa(JSON.stringify(array.encodedImage)));
¿Alguna idea sobre cómo convertir esta lista de valores en una imagen codificada en JPEG base64 válida?
EDITAR: El propósito es mostrar la imagen en HTML, por lo tanto, se requiere la codificación base-64.
2 answers
Answer question0
No estoy seguro de si existe una forma más sencilla de convertir una matriz de bytes en una cadena base64, pero funciona.
const byteArray = Object.values(array.encodedImage); const base64String = Buffer.from(byteArray).toString("base64"); document.getElementById("app").innerHTML = ` <img src="data:image/png;base64,${base64String}"/> `;Notas: (gracias a @ikegami y @evert)
Según MSN
El orden transversal, a partir de la especificación ECMAScript moderna, está bien definido y es consistente en todas las implementaciones. Dentro de cada componente de la cadena prototipo, todas las claves enteras no negativas (aquellas que pueden ser índices de matriz) se recorrerán primero en orden ascendente por valor, luego otras claves de cadena en orden cronológico ascendente de creación de propiedades.
Polyfills y shims: Probado core-js v1.0.0 polyfill y object.values v1.0.0 shim, ambos conservan el orden requerido.
Nota: Sandbox es un poco lento, si no se muestra la imagen, actualice el navegador incorporado
0
No necesita la conversión a base64, esto es costoso y hace que su HTML sea enorme.
Supongo que su matriz de entrada es una UInt8Array, así que para volver a convertirla en eso, podemos manipularla:
const byteArray = UInt8Array.from(Object.values(input.encodedImage));Luego, conviértelo en un Blob:
const blob = new Blob(byteArray);Y finalmente obtenga el objeto URI
const url = URL.createObjectURL(blob); Esta URL la puedes poner en tu <img src="">