CODEWITHSUNDEEP
jsonimage
Moon123
Moon123

Reputation: 153

send binary data in JSON

i want to send some data (including image) to a rest service as JSON, the data will be stored in the DB and then i need to be able to retrieve it and display it back. My problem is with the image part, i need to send it in json, convert it to bytes to save it as blob in DB, and then revert the process to display it back to the user when i get the value of the image source attribute, i get something like this "data:image/png;base64,VBORw0...." what should i do at the server side to save at the DB and what shoud i do when i send it back to the user so that the image is displayed when it is set as a value of the source attribue

What i am doing now is 1. get the img uri from the src attribute and remove the beginning of the URI markerImg.replace(/^data:image/(png|jpg|jpeg);base64,/, ""); 2. then i send the result as part of the full json object. 3. at the server side, i used DatatypeConverter to convert the value to bytes and save it at the DB DatatypeConverter.parseBase64Binary(imageAsString) 4. when i send the josn object back to the server, i get the imageAsBytes from the DB, convert it to string and append the "data:image.." part and send back dataObject.getProperties().setMarkerImg("data:image/png|jpeg|jpg|jif;base64,"+ImageHandler.getImageStringFromBytes(imageAsBytes));

this works but i am asking to see if what i am doing is correct and if there is any simple approach

Upvotes: 2

Views: 5920

Answers (1)

Adam Jenkins
Adam Jenkins

Reputation: 55643

On the server, you base64 decode it before storing it as a blob. Or even better, don't store it as a blob at all, decode it and drop the image in a directory and in your database, create a record that references the path and filename of the file you just created.

When you send it back, don't send back the image data, send back a URL (likely with the id that is stored with the blob/file reference in the database) so that when you make a request to that URL, it looks up the blob and serves it as an image with the correct headers.

Upvotes: 2

Related Questions