Scale a UIImage appropriately to show it fullscreen without any distortions - iphone

When we take a photo on an iphone , the image is shown in fullscreen without any "grey bar" at the top i.e. the image is shown in the frame 320*500 size . I want to display that image in my app , but the app has a maximum frame of size 320*480 . Hence when I try to show the image in my app as fullscreen , it is shown as a stretched image . I tried all contentMode options but it didn't work .
So , how to scale an image or how to fix a size of frame so that the image is shown as it is but in a smaller frame without any distortions or something like in "Photos" app of iphone?

When you take a picture, you actually don't see the full-sized photo, you see only the part which fits your display instead (the photo's resolution is bigger than the iPhone's display resolution). So if you want to take a resulting image and show it fullscreen, then you need to do some simple calculations in order to scale image, leaving its proportions correct:
// We know the desired resolution. It's full screen (320, 480) or (640, 960).
// Now we want to determine the destination imageView frame with maximum dimensions
// for it to fit the screen AND leave the image's proportions
float minScale = MIN(screenResolution.width/actualImgWidth, screenResolution.height/actualImgHeight);
// With minScale one side will fit full screen, and the other will occupy a bit smaller space than the screen allows
destImgView.bounds = CGRectMake(0, 0, minScale*actualImgWidth, minScale*actualImgHeight);
destImgView.image = actualImg;

Related

How to keep the same resolution of canvas on different screen resolution?

First of all, sry for my English mistakes, I'm not a native English speaker.
I'm trying to make an UI which is composed of a canvas within different gameObject, and I would like that my canvas scales to the dimension of the screen but keeps its original resolution (16x9 portrait). If it is displayed on a tablet resolution (4x3) then an image is displayed in the space that is not covered by the canvas.
But actually all I've got is a canvas which scales to every resolution, and it changes the aspect of its child (for example a square becomes a rectangle).
Thank you for showing interest in my query!
UI's are heavy beasts. Canvas in Unity have a component attached to themm called Canvas Scaler which is set by default on Constant Pixel Size. You may try to set this property on Scale With Screen Size and then specify the base resolution you want to work with (usually 1920x1080 is a console standart). This is your first step
Then, to avoid strange Image scaling, you may check the property Preserve Aspect, this way the ration of the Sprite into your Image will remain the same indepently of the ratio of the Image
Last, you may play a bit with anchors but this is another story, you should let those at plain center at the beginning and come back to it when you will feel ready
Hope that helped ;)
Your canvas should have a component called Canvas Scaler. Here it should say Constant Pixel Size, change this to Scale With Screen Size and it should lock the Canvas to be the same width / height as the screen. If you want to lock an image to a specific width/height ratio, go to the Image component on the image and check the Preserve Aspect checkbox. This way if you have a 100x100 image, the images width will always be the same as the height. If you have a 200x100 image, the images width will always be twice the height, etc etc etc.

UIImagePickerController capture full screen on iphone

I'm using UIImagePickerController class to capture image from camera.
When is captured, I save the picture on disk. After that I use imageWithContentsOfFile method to load this image as background of the main screen.
The problem is that when I load the picture appears 2 white bands on top & bottom of the view.
My question is how can I take a picture with 320X480px of size in order to load it full screen?
Thanks.
--EDIT--
The originalImage when is captured sizes this:
INFO -> Captured Image Size W:480.000000 H:640.000000
How can I get the image directly 320X480px?
Thanks.
Presumably you get white bands because you've got the content mode of the UIImageView you're displaying it in set to UIViewContentModeAspectFit which means resize the image, maintaining aspect so that it you can see the entire image. If you set the content mode to UIViewContentModeAspectFill it'll do what you want.
The reason for this discrepancy is that the aspect ratio of the screen (2:3) is not the same as the aspect ratio of the images that come from the camera (3:4).

Resized Image ( 320x480) is not full screen? What is the full screen size for iPhone?

I'm trying to to resize my image (from URL) to full screen in my iPhone. However, the size 320x480 which is supposed to be full size is not full screen.
-(IBAction)changeFullSize{
urlImage.contentMode = UIViewContentModeScaleAspectFit;
urlImage.frame = CGRectMake(0,0,320,480);
}
I'm using a UIButton here, so when the user clicks on the opaque button, it changes to a full sized image.
However, there is an empty space between the tab bar at the top and the start of the picture.
What is the correct size for full screen? Is there a way for it to automatically resize to full screen without me specifying the width and height?
Thanks.
You could try and get it from self.view.frame.size but for the entire screen you can use [[UIScreen mainScreen] bounds]. Hope this helps.
you cant just resize your image by changing its frame, since you are using aspect fit, the image will keep its original aspect, depending on your needs a simple way would be to change to UIViewContentModeScaleToFill
if scaling to fill does not produce your intended results, you may want to check out trevor's blog post on uiimage categories here
once the UIImage categories are added you can just perform
[youruiimage resizedImage:CGSizeMake(320, 480) interpolationQuality:kCGInterpolationHigh]
using this you can use either UIViewContentModeScaleToFill or UIViewContentModeScaleAspectFit and it should turn out nicely =)
If you have status bar then don't forget to reduce its size from the height.
And also aspect-fit would keep the image in its correct ratio, then consider filling it.
Aspect-fill would keep the image in correct ration + will try to make full screen, no void spaces, chances are some part of image wont be shown.
Scale to fill will keep the image full screen, ratio doesn't matter there.

resize an to a specific size without losing its quality in iphone

I want to resize an image to a particular width and height without losing its image quality in iphone.
Resize the frame of the image view that contains the image. The image won't change, but it will get smaller. This way you can use the same image for older iPhone screens and Retina Display screens.
If you want to resize the image (so that it takes up less storage space) you'll always lose quality.

After masking Image looks blur

I am developing one game where I want to magnify the image where magnifier image is placed.
For that I am using the concept of masking. After masking I am zooming the image but looks blur. And I want image should be clearer like we r looking through rifle magnifier. So if any one have solution then kindly reply
are you sure that the problem is the masking?
perhaps your resources are too low resolution? high resolution images scaled down always look better than low resolution images scaled up.
Maybe you need to look at the problem backwards... so that your image when looking through the rifle magnifier [scope?] is viewed at a 1:1 resolution and when not viewed through the scope it is zoomed out (1:2 resolution?). so this way your 'normal' mode is the zoomed out mode and the "magnified view" is actually just the image at 1:1.
If you have A UIImage whose size is 293x184 but you create a UIImageView with an initial size of 40x30, the iPhone SCALES the UIImage to fit according to the property: contentMode. Default contentMode is: UIViewContentModeScaleToFill, which scales your image.
So even though you started with a large image, it is now only 40x30 and rendered at 40x30. When you zoom it is STILL 40x30, but rendered at some larger size which is causing the blur.
One solution would be to replace the image after the zoom, then you would have a completely new UIImage at full resolution.
[self.view setFrame:reallyBigFrame];
[self.view setImage:newUIImage];
Another would be initially place the UIImage in a full size 293x184 UIImageView, then use an AffineTransform to scale it down:
view.transform = CGAffineTransformScale(view.transform, 0.25, 0.25);