Send base64 string as image to the client - image

I managed to save an image as a base64 encoded string in my database, but I was wondering how tu serve the base64 string in a way that it is interpreted as an image on the client side.
i made a WS that returns the string like this :
return ok(myBase64String).as("image/jpeg")
but the image cannot be displayed in the browser.
if I decode the string and then send the byte array the image is displayed, now what i dont understand is why do I have to decode my already encoded image in order to display it in the client??
byte [] test = Base64.decodeBase64(event.getPhoto());
return ok(test).as("image/jpeg");
this works but why do I have to decode my base 64 string??
anyone have an idea?
thanks!!

If you want to use Base64, you need to use the data uri scheme:
<img src="data:image/png;<base64>" />
Otherwise you have to pass in a path to a binary representation. That's what the Assets controller does, serving a file as binary.

Related

Url encoding using Jmeter

I am getting the response,and i want to send this value encode and next request,in UI i tried check encoded,looks still not working fine,is there any other way we can encode the response value.
In the screenshot in getrooms response i will get rate_id in decoded,so this value i have to encode and send in next request,please help
The response rate_id encoded value have to send in next call price check as a param.
Encode rate_id value.
"rate_id":"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"
It is not possible to come up with the comprehensive solution without seeing the full encoded data in text form, not as the image so consider extracting this rate_id from the response using JSON Extractor
It might be the case it's something easy like Base64, in that case you can use i.e. __base64Decode() function
Otherwise you need to determine the algorithm and once done you will be able to decode the data using JSR223 PostProcessor

UWP convert Image to string

I am trying to send an Image object via bluetooth using the
BluetoothRfcommChat sample
my idea is to convert the image to string before sending and converting it back when received.
my question is how to convert an Image to String
string message;
//here should go the conversion
//message=myimg;
writer.WriteUInt32((uint)message.Length);
writer.WriteString(message);
ConversationListBox.Items.Add(myimg);
await writer.StoreAsync();
or which will be the "Right" way to do this
You should not do it because tring are null terminated. Any 0 in data indicates end of string.
You should send it as raw bytes.
To send image, music or any other file (object) over Bluetooth special protocol was developed. It is called OBEX and ObjectPushProfile is designed to send such things. This is what the right way to send files.

Unable to open image after base64 decode at server-side

I am developing an cross-platform mobile app using Titanium Appcelerator. This app is based on Sakai, in this application i have to send image to the server.
Client side i am encoding the image with base64 encoding technique using Titanium API.
//Client-Side JavaScript Code
var selectedImageB64 = Ti.Utils.base64encode(selectedImage).toString();
Ti.Utils.base64encode API
and now I am sending this string to server and there I am decoding it,
//Server-Side Java Code
byte[] photoData = Base64.decode(selectedImageB64);
byte[] content = photoData;
Base64 API
now the decoded data (content) is passed to the appropriate method to save the image into the database. Till here everything is working well. Image is successfully stored in the database. The size of the original image and the image stored in the database are of equal, so that I thought this encoding and decoding process is done successfully. But when I am trying to open the image in the database the image viewer displays an error message saying "Windows Photo Viewer can't open this picture because either Photo Viewer doesn't support this file format, or you don't have the latest updates
to Photo Viewer.". So what I have to do now. What exactly is the problem?
Regards..
please try the following code:
var selectedImage=image.getImage();
var selectedImageB64=Ti.Utils.base64encode(selectedImage).getText()
works for me.
For mobile side :
var base64String = Ti.Utils.base64encode(imageView.toImage()).getText()
send base64String to server.
For Server Side :
String tempPic = (String)jsonMap.get("base64String");
byte pic[] = Base64.decodeBase64(tempPic.getBytes());
Now, Play with pic[] byte array. This code work for me.
A couple things to check:
1) Save the bytes from the server to the file system instead just to eliminate a variable (namely the db)
2) Actually print out the numeric value of say the first 10 bytes on the server side, and do the same on the client side. This is to make sure the base64 encode/decode functions are implemented correctly (or they are following the same standard).
3) I don't think you need to the toString after the base64encode, you might to a Ti.Api.Info on the object before and after to the toString
4) I would like to know more about what selectedImage object is, if its a blob object in titanium it may not be the image directly, but rather a wrapper around the image (So you maybe encoding the wrong data).
I found the solution for this, actually when sending the base64 encoded data from client '+' symbols in the encoded data are being replaced by a space. So i tried replacing space with '+' sign on server side. That solves this issue.

Extracting data from net ldap response containing image

In my application I sync users image uploaded as photo field in the LDAP, I am using NET::LDAP for the same.
the object returned for the image field is of type Net::BER::BerIdentifiedArray, I can convert it to Net::BER.
My question is how do I extract the type of image(jpeg/gif/bmp etc) while creating a image file from the binary response given by the LDAP.
You'll need something to decode the binary data into an image. RMagick is a Ruby wrapper for ImageMagick that should do the trick. Specifically, Image.from_blob will read image data from a string in memory.
From there, this answer shows image.format will tell you the format.

retain "+" sign in string

I am creating a base64 string. There is also '+' sign in that string. I am sending it through ajax to the database. but ajax removes the + and replace it with white pace. How I can overcome this problem
How are you sending it to your server ?
You must urlEncode what's in the url, or use JSON.stringify for an object you send as json.
This means you must decode it on the server side but most server technologies handle this for you.
This is because you are not url encoding the base64 before sending it.
Run your base64 through javascript's escape() function before sending it.

Resources