I'm using cordova/phonegap to capture image with device (currently iphone), the capturing is working fine, I get the base64 encoded image as a string in a callback:
function handlePhotoSuccess(image){
document.getElementById("uploadItemForm:picture").src = "data:image/jpeg;base64," + image;
document.getElementById("uploadItemForm:imageBase64").value = image;
}
The imageBase64 element is a hidden h:inputText.
The image show correctly, but the saved value in the bean is not correct. It has like the image's 30% and the other part is gray.
The value in the backing bean is a String, I convert it to a byte array, then save it:
byte[] imageByte;
BASE64Decoder decoder = new BASE64Decoder();
try {
imageByte = decoder.decodeBuffer(imageString);
ByteArrayInputStream is = new ByteArrayInputStream(imageByte);
temp.setContent(is); //temp will be saved to database
images.put(currentAttribute.getId(), imageByte);
} catch (IOException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
Maybe I do something wrong?
Thank you in advance!
Related
I use ImageIO to save Base64 image string to a file:
public static String decodeBase64AndSaveImage(String data) throws IOException, BadRequestException {
try {
if (data == null) {
return null;
}
String base64Image = data.split(",")[1];
byte[] imageBytes = DatatypeConverter.parseBase64Binary(base64Image);
BufferedImage img = ImageIO.read(new ByteArrayInputStream(imageBytes));
String imageId = generateRandomKey(15);
ImageIO.write(img, "png", getImageFile(imageId));
return imageId;
} catch (IllegalArgumentException e) {
throw new BadRequestException("Bad image data");
}
}
I pass the following string to this method:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADklEQVQIW2NgQAXGZHAAGioAza6+Hk0AAAAASUVORK5CYII=
In the following test I check that the if the saved content to the file is the same as what was passed to the method:
byte[] base64ImageData = Base64.encodeBase64(FileUtils.readFileToByteArray(imageFile));
Assert.assertEquals("wrong image data stored", DUMMY_IMAGE
.split(",")[1], new String(base64ImageData,
StandardCharsets.UTF_8));
But it returns a different string:
iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAADklEQVR42mNgQAXGZHAAGioAzTktUZoAAAAASUVORK5CYII=
Why does this happen ?
Note 1
It doesn't compare data:image/png;base64, so it's not the reason that it fails.
You are base64 decoding the string, using ImageIO to create a BufferedImage, converting it back to a PNG, and re-base64 encoding this result.
byte[] imageBytes = DatatypeConverter.parseBase64Binary(base64Image);
BufferedImage img = ImageIO.read(new
ByteArrayInputStream(imageBytes));
String imageId = generateRandomKey(15);
// re-encode
ImageIO.write(img, "png", getImageFile(imageId));
This all works fine. But the image encoder is encoding the image in a slightly different way to the original. They are both though valid PNG files and both valid base64 strings.
I decoded both strings and found they produced valid PNG files which look identical, but were encoded in different ways.
I have to convert a string to an image, the string looks like this:
!?ò„ÁÁø?mDé¯ïÌA¤>VbïììîϽ^/èõz²+öó¢ílãÊ… 'í¤ÛX¹-–Û?ÆêÕ ø×vý¹ÿàû•O_ž'ãàò?Euò6Χ?ç?¼ä”vE³•}Uœl#KWwöw'Dzۈ«¸µ¶vUåŽeýGåšv€ºÇéð]Þžžg¹ÜŽ^s™æ÷òž?F“7ù1|Ìdz¡Ü½Çðåù˜®‘r-'w?•“ÚaJQc'‡ÖJÙaHƒaeËéÿ<´``?_·¤‹Êäá!xÉgóáèçÓp~;¼ûþ8?¼Žïçw“Ñd:®17¨ÊÚ¶ÒØ}c[‹1K[U-’Ç?m,¦ËÊ®m?ÁË¢–…•Å¡¬ºk¾qjUn²qÕIª¢^!?Ôo9a׬ʺèн#§Öîmƒh%‹“¿?]ÉWTý›> €ˆ
... and so on.
I converted it to a byte array and then tried to convert it to an BufferedImage but I always get a null pointer exception. I did some research and found out that the reason is, that I have no inputstreamreader registered but I have no solution. my code looks like this so far:
public static BufferedImage decodeToImage(String imageString) {
BufferedImage image = null;
byte[] imageByte;
try {
BASE64Decoder decoder = new BASE64Decoder();
imageByte = decoder.decodeBuffer(imageString);
image = ImageIO.read(new ByteArrayInputStream(imageByte));
} catch (Exception e) {
e.printStackTrace();
}
return image;
}
If somebody could help me, I would be really glad.
Edit:
The data comes from a server its for an university project is send a command to the server and thats the answer of the server when using readline on the inputstream.
I have been trying to create a program that runs a client in Java and the server in Python. My overall goal is to upload a picture from the client on Java to the server on Python and store it on a mysql server. I haven't tried yet to convert from image on Python to blob on mysql and already got stuck in the uploading to python phase. This is the following code:
Client: (java)
client.send("upload##user##pass##"); //this is how i know that upload request has been sent.
String directory = "/home/michael/Pictures/"+field.getText();// a valid directory of a picture.
BufferedImage bufferedImage = null;
try {
bufferedImage = ImageIO.read(new File(directory));
} catch (IOException err) {
err.printStackTrace();
}
try {
ImageIO.write(bufferedImage, "png", client.socket.getOutputStream());//sending the picture via socket.
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
And this is the server:(Python)
elif mar[0]=="upload":##this is how i know that the request is to upload
buf = ''
while len(buf)<4:
buf += clientsock.recv(4-len(buf))
size = struct.unpack('!i', buf)
print "receiving %s bytes" % size
with open('tst.jpg', 'wb') as img:
while True:
data = clientsock.recv(1024)
if not data:
break
img.write(data)
print 'received, yay!'
This code actually doesn't work and prints ridiculous amount of bytes that I want to send (around 2 gb for the picture) I have not been working a lot with the server/client so this code perhaps is awful.
I can't see that you sending image size before sending the image, but in Python code you're reading 4 bytes image size first.
You need to add sending of image size in your Java code:
try {
OutputStream outputStream = client.socket.getOutputStream();
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
ImageIO.write(bufferedImage, "png", byteArrayOutputStream);
// get the size of image
byte[] size = ByteBuffer.allocate(4).putInt(byteArrayOutputStream.size()).array();
outputStream.write(size);
outputStream.write(byteArrayOutputStream.toByteArray());
outputStream.flush();
} catch (IOException e1) {
// TODO Auto-generated catch block
e1.printStackTrace();
}
I am trying to convert Base64 encoded string (from image) [link to convertor]. Here is how I do this: First I convert the string, which is:
String str =
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
like this:
byte[] imageString = str.getBytes("UTF-8");
and then I want to save the file on machine like this:
public boolean uploadImage(byte[] imageString, String name, String extension)
{
BufferedImage image = null;
String path = EVENT_FOLDER + name + "." + extension;
try
{
image = ImageIO.read(new ByteArrayInputStream(imageString)); //null returned here
ImageIO.write(image, extension, new File(path));
}
catch (IOException e)
{
e.printStackTrace();
return false;
}
But I am getting null on this line: image = ImageIO.read(new ByteArrayInputStream(imageString));
What did I do wrong??
What did I do wrong?
You ignored the fact that the data is Base64-encoded, not UTF-8.
To convert the string to bytes to get the original data, you need to reverse that Base64 encoding, for example using this library.
byte[] imageData = Base64.decode(str);
i have question about sending and getting the encoded data for image. Firstly i have image as Base64 encoded type in String, this string has a value such as below :
...D/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZ...
Now if i decode again and if i use BitmapFactory to accomodate on imageview thats all right the image is ok.
byte[] bytes= stream.toByteArray();
imagestr=Base64.encodeBytes(bytes).toString();
//If i code below it is working
byte[] decode = Base64.decode(imagestr);
decoded = BitmapFactory.decodeByteArray(decode, 0, decode.length);
//If i send to the server and handle it in servlet file
String pic = request.getParameter("p");
byte[] servdec = Base64.decode(pic);
//and if i use the servdec to output a image file file is corrupted.
//I noticed the pic and imagestr are different
//imagestr = **...D/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko+MzZ...**
//pic = **...D/2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pLSwzOko MzZ...**
//pic has no + sign.
I used replaceAll but it is only for this case. It may cause more prob. so is there any solution can you advice thank you for your answers...
Hi, this string is in pic which comes to this function, after this function servlet will handle this !pic has + sign in this function
public String uuidfaceid(String uuid,String faceid, String name,String pic){
URL url = null;
try {
url = new
URL("http://"+Constants.SERVER_NAME+Constants.SERVER_PORT+"/MeetInTouch/UF"+"?
uuid="+uuid+"&faceid="+faceid+"&name="+name+"&pic="+pic);
} catch (MalformedURLException e1) {
e1.printStackTrace();
}
URLConnection ucon = null;
try {
ucon = url.openConnection();
} catch (IOException e1) {
e1.printStackTrace();
}
try {
ucon.connect();
} catch (IOException e1) {
e1.printStackTrace();
}
The parameter that "p" that contains the Base64 encoded string has been "url decoded" at some point. All you have to do is encode it again before you try to decode the Base64:
String pic = request.getParameter("p");
pic = URLEncoder.encode(pic, "ISO-8859-1");
byte[] servdec = Base64.decode(pic);