How to fix rotated image from iOS camera in Codename One? - codenameone

Question

I have written a code to open gallery and choose image file in CodenameOne. On iOS it also allows to capture image. When I capture a photo on iOS, the photo is rotated by 90°. When I pick photo from gallery it is not rotated. How to fix that 90° rotation? Here is my code for opening gallery:
Display.getInstance().openGallery((evt) -> {
if (evt != null && evt.getSource() != null) {
String filePath = (String) evt.getSource();
Image img = null;
try {
img = Image.createImage(filePath);
} catch (IOException e) {
}
if (img != null) {
img = img.scaledLargerRatio(IMAGE_WIDTH_FOR_UPLOAD, IMAGE_HEIGHT_FOR_UPLOAD);
ImageHelper.saveToFileSystem("image" + ".jpg", img, null, null);
base64Img = (String) ImageHelper.loadBase64FromFileSystem("image" + ".jpg");
browser.execute("document.getElementById(\"" + QR_PHOTO_UPLOAD_IMG_ID + "\").setAttribute('src', '" + BASE64_PREFIX + base64Img + "');"
+ " document.getElementById(\"" + QR_PHOTO_UPLOAD_INPUT_ID + "\").setAttribute('base64', '" + BASE64_PREFIX + base64Img + "');"
+ "");
}
}
photoGalleryOpened = false;
}, Display.GALLERY_IMAGE);
Here is code for Image saving to file system:
public static boolean saveToFileSystem(String path, Image capturedImage, String format, Float quality) {
if (format == null) {
format = ImageIO.FORMAT_JPEG;
}
if (quality == null) {
quality = 1f;
}
OutputStream os = null;
try {
String pathToBeStored = path.startsWith(APPHOMEPATH)? path : (APPHOMEPATH + path);
os = FileSystemStorage.getInstance().openOutputStream(pathToBeStored);
ImageIO.getImageIO().save(capturedImage, os, format, quality);
os.close();
} catch (Exception e) {
Log.e(e);
try {
if (os != null) {
os.close();
}
} catch (IOException ex) {
Log.e(ex);
}
return false;
} finally {
try {
if (os != null) {
os.close();
}
} catch (IOException ex) {
Log.p(ex.getMessage());
}
}
return true;
}
Here is code for getting base64 string from image file:
public static Object loadBase64FromFileSystem(String path) {
String ret = "";
try {
Image image = loadFromFileSystem(path);
if (image == null) {
throw new IOException("File not found (" + APPHOMEPATH + path + ")");
}
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.getImageIO().save(image, baos, ImageIO.FORMAT_JPEG, 1);
byte[] bytes = baos.toByteArray();
ret = Base64.encodeNoNewline(bytes);
} catch (Exception ex) {
Log.e(ex);
}
return ret;
}
public static Image loadFromFileSystem(String path) {
try {
File f = new File(APPHOMEPATH + path);
if(f.exists()){
Log.p("Image exists: " + f.exists());
Image img = Image.createImage(f.getPath());
return img;
}else{
Log.p("Image doesn't exist");
return null;
}
} catch (Exception ex) {
Log.e(ex);
}
Log.p("Image doesn't exist");
return null;
}

Answer 1

Mobile OS's often take a photo with one orientation and then just mark it as rotated in a tag e.g. photos are always landscape but when you take a portrait mode photo it's marked as rotated by 90 degrees.
This works fine as most apps read the tags and implicitly rotate that photo after loading. Some apps don't and the native image reading code doesn't do that on mobile OSs. We need to explicitly parse the tags and do the rotation. We do that for capture logic but we don't do that generically for image loading.
The problem is that rotating the image is very expensive and doing it for every image load would be expensive (but might be what we have to do in this case). Right now the only workaround I can think about is manually parsing the image tags which would be a bit painful.