In the UIImagePicker the user takes photos, then the photos are saved, and loaded into a tableview, now when the images are taken normally (portrait) they are a perfect size in the image view because this is how I set it. But when the user takes an image with the device in landscape, the image looks skewed and looks very distorted. (See picture)
Top is portrait picture, bottom is landscape
So does anyone have any suggestions on how this can be done?
Any help would be amazing
If it is taken in Landscape, then you show it another frame with size width > height. Or try using the following code and see if it improves something.
imageViewTemp.clipsToBounds = YES;
imageViewTemp.contentMode = UIViewContentModeScaleAspectFit;
The UIImageView stretches images to fit its size. This is what you are seeing. To stop it, you might change the size of the image view, like so:
CGRect newFrame = CGRectMake(imageView.frame.origin.x,
imageView.frame.origin.y,
image.size.width,
image.size.height);
imageView.frame = newFrame;
Related
I have a UIScrollView with a UIImageView inside of it. For this part of my app, the user can select photos from their camera roll and scale and crop them.
I have successfully made the user be able select different photos, then zoom in and out & pan around the image. Also, the user can zoom out to make the image centre vertically or horizontally depending on if the image is portrait or landscape.
The problem is, I try to then crop the photo from the visible rect in the scroll view to a new image, however its only working for portrait photos.
Here is an example of it working then not working:
Here is a portrait image that is zoomed out to fit the screen:
Next, I zoom in the image so there is no black space.
Finally, I crop the photo and you can see it crops perfectly in the top left hand corner.
However, for some reason when I try to do this with a landscape image the cropping messes up?! Here is an example of it not working.
Here is a zoomed out landscape image.
Next, I zoom in so there is no black space left. Notice how I zoomed in specifically so there is no physical boarder of the white board visible in the photo.
Now, I crop the photo just like before and it doesn't crop it properly. Notice how in the top left hand corner the image is different from before. It appears to have been zoomed out and you can see more of the bottom of the white board.
I need to figure out why this is happening and how to fix it.
Here is the exact code I use to crop the photo from the UIScrollView.
//Get the scale
float scale = 1.0f/_libraryScrollView.zoomScale;
//Create a new rect
CGRect visibleRect;
visibleRect.origin.x = _libraryScrollView.contentOffset.x * scale;
visibleRect.origin.y = _libraryScrollView.contentOffset.y * scale;
visibleRect.size.width = _libraryScrollView.bounds.size.width * scale;
visibleRect.size.height = _libraryScrollView.bounds.size.height * scale;
//Get the source image
UIImage *src = libraryPreviewImageView.image;
//Create the new cropped image with the rect
CGImageRef cr = CGImageCreateWithImageInRect(src.CGImage, visibleRect);
UIImage *finalImage = [[UIImage alloc]initWithCGImage:cr];
//Set the new image to the preview image view
self.imagePreviewView.image = finalImage;
This code works for portrait images but doesn't work for landscape images as shown above in the examples. Is this error to do with my cropping code or is it to do with something else?
Any help would be appreciated.
In the end, I had no idea what was the problem but trying to use maths to crop an image from a scroll view is extremely difficult!
I found a really easy way and that is to take a screen shot of the visible content in the scroll view, its as easy as this:
UIGraphicsBeginImageContextWithOptions(_libraryScrollView.bounds.size, YES, [UIScreen mainScreen].scale);
CGPoint offset = _libraryScrollView.contentOffset;
CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -offset.x, -offset.y);
[_libraryScrollView.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *finalImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
//Set the new image to the preview image view
self.imagePreviewView.image = finalImage;
I really hope this answer can help other people out too!
There's probably a dozen SO questions with similar titles, and as far as I can see, I've incorporated the advice from every one of them, with no luck. When I rotate the device from portrait to landscape, I want to change the background image. However, in every experiment I have tried, the UIImageView in landscape remains portrait sized.
I am using Autolayout, configured in IB like so:
My view hierarchy is configured like so:
When I rotate the device, I want to rotate everything in UIView viewBackground (the image and all of the buttons). I believe I can manage the button movements through constraints, but need to rotate UIImageView image view background myself. So, I added the following code:
-(void)viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
int scaleFactor = self.traitCollection.displayScale;
NSString *source = #"drawn";
NSString *orientation;
if (size.width > size.height)
{
orientation = #"Landscape";
}
else
{
orientation = #"Portrait";
}
NSString *platform;
if ([[UIDevice currentDevice] userInterfaceIdiom] == UIUserInterfaceIdiomPad)
{
platform = #"iPad";
}
else
{
platform = #"iPhone";
}
NSString *filename = [NSString stringWithFormat:#"%# %# %# %.0fx%.0f.png", source, platform, orientation, size.width * scaleFactor, size.height * scaleFactor];
// CONFIRMED: we have assembled the correct new image name.
viewBackground.frame = CGRectMake(0, 0, size.width * scaleFactor, size.height * scaleFactor);
viewBackground.autoresizesSubviews = YES;
viewBackground.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
imageViewBackground.autoresizesSubviews = YES;
imageViewBackground.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
imageViewBackground.image = [UIImage imageNamed:filename];
}
The problem: The correct image appears on the screen, but as as mentioned above, it still has the portrait dimensions. I'm certain the image changes as the artwork is significantly different, with elements being stacked horizontally versus vertically. But the new picture is cut off horizontally in landscape mode.
I have tried putting all sorts of wild values into newRect, and none of them make any difference. The image never actually moves, even if I radically change the origin in newRect. so my current theory is that my changes to the view sizes are being ignored/over written.
The Question: What am I missing that's preventing the resizing of the image to landscape mode? Is there some other auto sizing aspect I'm not addressing?
So, the problem turned out to be yet another variable in the saga. There also must be a constraint on the UIImageView that is 0 on each side, with "Constrain to Margins unchecked." Apparently, when I did that step earlier, it didn't actually take.
I have to admit, though, I really don't understand what that constraint is doing for me. It clearly makes the rotation work, but I don't get why. Since that's technically the answer to my original question, I'll gladly award the answer if someone can explain how this constraint enables this scenario.
EDIT:
In case anyone stumbles upon this answer in the future... I see now that setting the aforementioned constraint with all 0 buffers between the UIImageView and the UIView pins the edges of UIImageView to the edges of the UIView. When the device rotates, the viewController resizes the UIView, and with this constraint, the UIImageView resizes also. I was able to remove the majority of my code. The only code I need is to select a portrait or landscape image, and I was able to remove everything that resized the UIView and UIImageView.
The image now changes size properly when rotating just by using the one constraint. I only need code to decide whether to show a landscape or portrait background. (And I vastly simplified that code by storing my images in an asset catalog so the code just selects the name of "portrait" or "landscape", but the size of the image is auto selected based on the device).
I'm new to iOS programming, now I'm writing a camera app using AVFoundation. My problem is I have to preview the image just taken at full screen size, but no matter how I tried, I just got a clipped image (top left proportion of the original image) displayed full screen size on the phone. My image just taken is at 1920 * 1080 res, my UIImageView is set to AspectFit, and on the storyboard, it appears at full screen size.
The code to display the image is like,
[self.imageView setFrame:self.view.bounds];
[self.imageView setContentMode:UIViewContentModeScaleAspectFit] ;
[self.imageView setImage:image] ;
[self.view insertSubview:_imageView aboveSubview:_previewView] ;
[self.view bringSubviewToFront:_stillButton] ;
[self.view bringSubviewToFront:_maskButton] ;
[self.view bringSubviewToFront:_confirmButton] ;
And when I observe the size of the UIImageView object self.imageView, the size is not at the screen size, but just 320*568. However, the previewView which is a AVFoundation camera shooting preview object, it is also at 320*568, but it appears the previewView size is correct from the looking of the running app. and at last, the self.view.frame.size is also 320*568.
So my problem is how to view the image taken at 1920*1080 at full screen size?
try this:
imageView.contentMode = UIViewContentModeCenter
In my application, i need the user to take a snap of only a 10 letter word (using overlay, which should be right in the centre of the screen of the UIImagePicker), and then in need to show him that image (only the part of the image covered by that rectangle). So, I need to crop that image according to the overlay.
Here, i have taken a picture using UIImagePickerControl. Now, i want to see the dimensions of the image that i have taken..
UIImage *imageToprocess = [info objectForKey:UIImagePickerControllerOriginalImage];
NSLog(#"image width %f", imageToprocess.size.width);
NSLog(#"image height %f", imageToprocess.size.height);
I see the following result on console.. But how is this possible. the dimensions of the image is exceeding the dimension of the iPhone screen size.. (which is 320, 568)
UsingTesseractOCR[524:60b] image width 2448.000000
2013-12-17 16:02:18.962 UsingTesseractOCR[524:60b] image height 3264.000000
Can anybody help me out here?? I have gone through several questions here, but did not understand how to do it.
Please help..
Refer this sample code for image capturing and cropping.
https://github.com/kishikawakatsumi/CropImageSample
For creating overlay, first create a custom view (of full dimensions of camera preview) and add an transparent image with just a rectangle in its background. use this view as overlay view.
myview =[[UIImageView alloc]init];
myview.frame=CGRectMake(0, 0, 320, 431);
// why 431? bcoz height = height of device - height of tabbar present in the
bottom for camera controls of picker
//for iphone 4 ,480-49
myview.backgroundColor =[UIColor clearColor];
myview.opaque = NO;
myview.image =[UIImage imageNamed:#"A45Box.png"];
myview.userInteractionEnabled =YES;
note that you create a background image appropriately (means dimensions). You can also draw rectangle programmatically but this is much easy way.
Secondly, talking about your cropping issue, you have to get your hands dirty....Try these links for help
https://github.com/iosdeveloper/ImageCropper
https://github.com/barrettj/BJImageCropper
https://github.com/ardalahmet/SSPhotoCropperViewController
Am currently developing an iPad app which uses a UIScrollView. The UIScrollView is populated with UIImage(s) and all the images are larger than the iPads width, twice the width, 1536px. What I would like it to do is when swiped/flicked it will scroll to the second image, i.e. 1536 and the third image to 3072 and so on. Its just to see a quick image when sliding across. I've had a look at scrollViewDidEndDragging but it gets really nasty and jumpy at times.
Is there a way of setting the animation to scroll by 1536 each time apart from the last UIImage in the UIScrollView? I know you can use setContentOffset but if I use this in the above method it doesn't work as its using the current transition still and therefore making it very jumpy.
Edit
for (i = 1; i <= kNumImages; i++)
{
NSString *imageName = [NSString stringWithFormat:#"cocktail_%d.png", i];
UIImage *image = [UIImage imageNamed:imageName];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect rect = imageView.frame;
rect.size.width = kMainImageWidth;
rect.size.height = kMainImageHeight;
rect.origin = CGPointMake(xpos, 0);
imageView.frame = rect;
[mainImgScrollView addSubview:imageView];
[imageView release];
xpos += kMainImageWidth;
}
Edit
All I needed to do was make the UIScrollView 1536px wide and it worked. The app will have 6 images to start with and more in the future. Hopefully there won't be a memory issue to start with?
Thank you for your help.
The page size is the UIScrollView size. It is perfectly acceptable to make the UIScrollView itself larger than the width of the iPad screen. If you make the UIScrollView 1536px wide, then each page will be 1536px wide.
To allow the user to scroll around and see each picture, what you want is a scrollview containing a row of scrollviews. The outer scrollview is the one in the window, it is 1536px wide, and it is just for paging. The inner scrollviews are the width of the screen and they have their contentSize set to the image size so that the user can scroll around in each one and see the image.
(However, you're going to want to rethink your architecture, since an app into which you have predrawn multiple images 1536px wide will not run (because it will exceed the available memory for the device). The WWDC2010 videos include an excellent talk on this very topic, i.e. how to design a paging scroll view that lets you page from image to image.)
I think you want to turn on paging on your UIScroll view. This will make it "snap" to the width of the scroll view. It will behave like the home screen on the iPad/iPhone does. You may need to make your scrollView's frame wider than the screen also to get the paging effect correct. You may encounter some lag no matter what due to the size of your images.