Unable to open image after base64 decode at server-side - image

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.

Related

Firebase functions callable - image as argument

I have a firebase function which given some arguments creates a "post" with a title and the such. Is there a way to send an image as an argument which can then be processed by firebase functions and then upload to firebase storage.
I think it is possible by decoding the file/image object to a base64 string which could be then sent as an argument. How would I convert the file object from html file input to base64? On the other side how would firebase functions know that the string is an actual image? How can I tell the size of the image? Is there a limit to the size of arguments given to a firebase callable function?
I ditched this question but came across the problem later in a different project. So to anyone seeing it is possible through base 64 strings. It has the restraints that the image cannot be bigger than 10mb but it is easier than trying to "catch" the file after it being uploaded directly.
Here is the solution
I would do the following:
Let the user upload the file directly into firebase storage in a folder where only the user has access to.
Let a function trigger on upload that takes this image, checks if the user is authorized to put that in the target folder and put the file in there (or whatever you want the function to do exactly).

Web service exposing images : ddl or base64?

My question is quite simple but I can't find any clear reference : I'm building a webservice that returns gameboard informations (in json for unity) and the image of the game.
Should I, in my informations include a field "image" with my image in base64 ?
Or in my information include a field "image" with the exposed url of the image (on my server still), and then do a second call to get the image ?
Which is the best practice toward unity android/ios ?
OK, i will prefer to use first option.Your information include image field.As http works with TCP it will deliver 100% and i think there is no need for second call to get game image
In my experience, use the second method avoid downloading the same image every time when I call the webservice.
I just check the image if exist in persistent data directory of my device. Don't need to download the resource again until the url content changed.

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.

Send base64 string as image to the client

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.

Any clientside method to reuse data URI once like a variable?

I've been working on creating my own email client. I'm already successfully displaying attachments and embedded images via data URI. I was wondering once stored in a data if there was any way for me to assign data such as an image to a variable in client-side code (be it XHTML, JavaScript, JSON, etc) so I only have to send a single copy to the client from the server saving bandwidth though be able to display that content (again, such as an image) multiple times?
Pure JavaScript, no frameworks or libraries.
Also the main goal is to transfer the data only once from the client to the server. Once in the DOM it's perfectly okay if we end up having two img elements in example.
As a bonus, I'd like to use two img elements but with the DOM still reference the same single data-uri if possible thus saving memory at the client.
I was wondering once stored in a data if there was any way for me to assign data such as an image to a variable in client-side code
Use one of the following techniques:
Embed the data URI in an SVG element, then dereference it as a background-image URL
Embed the data URI in a script element, then dereference it as a dataset property
Store the data URI in a documentFragment, then wrap it in a function
References
CSS Wikibook:Data-URIs
HTMLElement.dataset
play .wav sound file encoded in base64 with javascript

Resources