1

Tengo problemas intentando almacenar los datos de un objeto blob dentro de un objeto json con javascript. Esto es lo que sucede:

Puedo recuperar el objeto de una imagen pasada a través de un fichero javascript (FileReader):

var blob = new Blob([readerImageReal.result], {type: "image/png"}); 
var img = document.getElementById("attachmentsImg");
img.onload = function () {
    drawImage(img); //displays the image in html <img src='blob:...'></img>
};
img.src = window.URL.createObjectURL(file);

Pero no sé como recuperar la información del blob para pasarsela al servidor dentro de un objeto json. Lo que estoy intentando es:

var jsonImages = {};
jsonData['images'] = [];
jsonImages['image_real'] = $('#img').attr('src');
jsonData['images'].push(jsonImages);

Pero blob src no son los datos (es una uri). ¿Cómo puedo almacenar la información del blob data dentro de un objeto json object, para enviarselo a un servidor Java? Quiero la imagen con formato Blob (no quiero base 64, por ejemplo), y necesito extraer los datos de la imagen del navegador.

4
  • 2
    Hola @sergiopf y bienvenido al SO en Español. Como tal aquí sólo tratamos las preguntas realizadas en Español. Deberías traducir la pregunta. Un saludo
    – JuankGlezz
    Commented el 11 ago. 2016 a las 18:04
  • 3
    Voto para cerrar esta pregunta como tema no relacionado porque está en inglés
    – devconcept
    Commented el 11 ago. 2016 a las 18:08
  • 1
    hi there! welcome to StackOverflow in Spanish, could you please transalte your question or consider to move it to StackOverflow.com otherwise this question will be closed because it doesn't belong here. Have a nice day! :D
    – fredyfx
    Commented el 11 ago. 2016 a las 18:10
  • sergiopf, ¿alguna razón por la cual no deseas usar Base64? y cuando dices: extraer los datos de la imagen del navegador ¿a qué te refieres con esto?. Por favor, actualiza tu pregunta. Commented el 11 ago. 2016 a las 19:19

1 respuesta 1

1

Si debes enviarlo en formato JSON (¿una llamada AJAX?) la única forma posible (hasta donde sé) es serializando la imagen (y la forma más simple es hacerlo en Base64).

Si quieres enviarlo de forma binaria (como cuando haces submit aun formulario con un input tipo file) puedes usar un FormData:

var blob = new Blob([readerImageReal.result], {type: "image/png"}); 
var fd = new FormData();
fd.append('MiBlob', blob);
//Ejemplo usando jQuery:
$.ajax({
  url: "guardarImagen.jsp",
  type: "POST",
  data: fd,
  processData: false,  // jQuery no debe procesar la data
  contentType: false   // jQuery no debe establecer el tipo de contenido
});

Del lado del servidor obtienes la imagen (posiblemente un array de Bytes) y la guardas/procesas en disco o BD como imagen. Con esta segunda parte no te puedo ayudar porque no soy de ASP.NET (y algo de PHP) :p y como no lo indicas supongo que usas node.js

2
  • Se trata de un servidor Tomcat, y un sistema de comunicaciones basado en Web Sbockets. Voy a intentar lo que comentas, pero necesitaría montar un objeto Json.
    – sergiopf
    Commented el 12 ago. 2016 a las 6:24
  • No me ha servido. El objeto Blob va vacío. También he intentado transformar el objeto Blob para empaquetarlo dentro del objeto Json: var blobTransformed = new Uint8Array(blob) Pero me lo ha transformado a Base64. Este sistema lo tengo funcionando con Base64, pero quiero optimizar el tráfico de red y Blob es más eficiente hasta donde leo. Quiero optimizar el tamaño de la imagen además de poder mostrarla en dicho formato.
    – sergiopf
    Commented el 12 ago. 2016 a las 15:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.