Blob inside json object

Question

Blob inside json object

Navigation

#1 by (1 votes)

1

I have problems trying to store the data of a blob object inside a json object with javascript . This is what happens:

I can recover the object of an image passed through a javascript file (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);

But I do not know how to retrieve the blob information to pass it to the server inside a json object . What I'm trying is:

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

But blob src is not the data (it's a uri). How can I store the blob data inside a json object, to send it to a Java server? I want the image with Blob format ( no I want base 64, for example), and I need to extract the data from the browser image.

javascript json array

asked by sergiopf 11.08.2016 в 19:58

source

1 answer

Read the .xlsx file with PHPExcel Control webBrowser does not load

score 1 · Answer 1

If you have to send it in JSON format (an AJAX call?) the only way possible (as far as I know) is to serialize the image (and the simplest way is to do it in Base64).

If you want to send it in binary (like when you submit a form with a file type input) you can use a 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
});

On the server side you get the image (possibly an array of bytes) and save it to disk or BD as image. With this second part I can not help you because I'm not from ASP.NET (and something from PHP): p and as you do not indicate it I suppose you use node.js