I am looking to take photos on mobile that can cover the whole screen, which is done in the Snapchat app. Images taken by Android and iPhone only cover a part in the center of the screen (probably intented so that that menu bars could cover the rest).
If you take an image in snapchat - and export it to your camera roll, you will see the image remains enlarged - covering the whole screen. That is how I would like my photos being taken. (Right now they become deformed as the images are too small - as I try to display them using the whole screen)
I am using Gluon and the PicturesService: http://docs.gluonhq.com/charm/javadoc/4.1.0-SNAPSHOT/index.html?com/gluonhq/charm/down/plugins/PicturesService.html
However I assume you need to adjust things in deeper layers to acheive this. Could someone point me in the right direction?
The camera aspect ratio and the screen aspect ratio on iOS differ. That is why you cannot display the image fully and at the same time avoid deformation. However in video it matches the screen aspect ratio. So I thought Snapchat somehow took screenshots, or one single frame out of the camera in video mode.
However, looking at my Android phone - the camera on video mode did not display on the whole screen (no matching aspect ratio). I was suprised. I downloaded snapchat on it and found the snaps still covered the whole screen - and I was even more suprised.
Then I started realizing the snap was cut, at the sides. So what they do is to simply cut the original image until it matches the aspect ratio of the display.
The following worked for me to cut Android images:
public Image cutImageFit(Scene scene, Image image){
PixelReader pixelReader = image.getPixelReader();
double sceneRatio = scene.getWidth() / scene.getHeight();
double width = image.getWidth();
double height = image.getHeight();
double ratio = width / height;
// System.out.println("Scene is " + scene.getWidth() + " and " + scene.getHeight());
// System.out.println("sceneRatio " + sceneRatio);
// System.out.println("ratio is " + ratio);
if(sceneRatio > 1){
double cutTo = width / sceneRatio;
height = cutTo;
}
else if(sceneRatio < 1){
double cutTo = height * sceneRatio;
width = cutTo;
}
else{
// Square scene...
}
Double d = width;
int w = d.intValue();
d = height;
int h = d.intValue();
System.out.println("new width " + w + " and height " + h + " for the image");
WritableImage writableImage = new WritableImage(pixelReader, 0, 0, w, h);
return writableImage;
}
... You can could also edit the method so that it cuts both sides, instead of only one. This was helpful: Effective image cropping in JavaFX
However, when it comes to iOS images I am having problems. The image has to be rotated. If it was taken with iphone vertically that is. I would be glad if someone could help out with that!
This latter problem I could solve by rotating the image with the imageView and then taking a javafx snapshot, to pas as image parameter with the method instead of the iOS original image. That way the local cordinate system also stays "in sync" with the rest of the GUI cordinalts in ate system after rotating. So in effect a relabeling of the x and y - axises is done.
Edit: The android defualt camera actually contained a "Fullscreen" setting of which I was not aware of. So that setting simply have to be selected. It results in a white area however of which I think comes from that the app cannot display onto the statusbar area. Everything looks fine in the other default photo viewer apps are able to do (displaying image beneath status bar). So either the image can be cropped, using this method above - or a FullscreenService can be create to display the taken image, using a independant seperate Android layer, suggested by José in the comments to the question.
When it comes to iOS it might be possible to use camera third party apps, that does this - or edit the IOSPicturesService of which have native ObjectiveC code connected to it.
