0
159
ViewsJavascript cómo reconstruir la imagen a partir de su contenido
Acabo de subir una imagen de formdata a un servidor. Este servidor solo me devuelve el contenido de la imagen. Intenté envolverlo como un blob, como un archivo, probé fileReader... nada funciona. Entiendo esto: 
lo último que probé fue
const img = new Image(response.data);
y luego usando esta función:
const ImageDataToBlob = function(imageData){ let w = imageData.width; let h = imageData.height; let canvas = document.createElement("canvas"); canvas.width = w; canvas.height = h; let ctx = canvas.getContext("2d"); ctx.putImageData(imageData, 0, 0, w, h); // synchronous return new Promise((resolve, reject) => { canvas.toBlob(resolve); // implied image/png format }) desde aquí https://gist.github.com/Jonarod/77d8e3a15c5c1bb55fa9d057d12f95bd . Pero tampoco funcionó, ya que la función explota al ejecutar ctx.putImageData(imageData, 0, 0, w, h); .
¿Cómo puedo convertir esto en un objeto blob válido?
1 answers
Answer question0
Bueno, no sé cómo probar esto. Tal vez si proporciona su archivo/blob.
De todos modos, la idea con mi solución es convertir los datos a dataURL. Tal vez no sea la mejor manera, pero a mí me funciona y eso es un comienzo.
var img = document.querySelector(".img"); fetch("https://picsum.photos/200", {}).then(function(response) { response.arrayBuffer().then(function(arrayBuffer) { var base64String = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer))); var dataUrl = "data:image/jpg;base64," + base64String; img.src = dataUrl; }) }) <img class="img" src="" style="width:100px; height: 100px">