14

I've created Swift version of this class: https://github.com/bennythemink/ZoomRotatePanImageView/blob/master/ZoomRotatePanImageView.m Works nice. Now I want to save modified image to file. The thing is I want to save it in full resolution and also I want to save area which is only visible to user.

Let me show you simple example:

enter image description here

This is how it looks in my app. Image is one a few samples in iOS simulator. Most of it is out of screen. I want only visible part.

After saving without cropping it looks like this:

enter image description here

So far so good after clipping it'd be nice.

But now let's make some changes:

enter image description here

After saving:

enter image description here

Looks like it's transformed by wrong pivot. How can I fix it?

Here's my code for saving:

UIGraphicsBeginImageContextWithOptions(image.size, false, 0)
let context = UIGraphicsGetCurrentContext()
let transform = imageView.transform
let imageRect = CGRectMake(0, 0, image.size.width, image.size.height)

CGContextSetFillColorWithColor(context, UIColor.blueColor().CGColor) //for debugging
CGContextFillRect(context, imageRect)

CGContextConcatCTM(context, transform)

image.drawInRect(imageRect)
let newImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()

There's a simpler method to achieve it:

UIGraphicsBeginImageContextWithOptions(imageContainer.bounds.size, false, 0)
self.imageContainer.drawViewHierarchyInRect(imageContainer.bounds, afterScreenUpdates: true)
let screenshot = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext() 

However output image has size of the view not an actual image and I want it in full resolution.

1 Answer 1

7
+50

Updated code to work with image of any size :

let boundsScale = imageView.bounds.size.width / imageView.bounds.size.height
let imageScale = image!.size.width / image!.size.height

let size = (image?.size)!

var canvasSize = size

if boundsScale > imageScale {
    canvasSize.width =  canvasSize.height * boundsScale
}else{
    canvasSize.height =  canvasSize.width / boundsScale
}

let xScale = canvasSize.width / imageView.bounds.width
let yScale = canvasSize.height / imageView.bounds.height

let center = CGPointApplyAffineTransform(imageView.center, CGAffineTransformScale(CGAffineTransformIdentity, xScale, yScale))

let xCenter = center.x
let yCenter = center.y

UIGraphicsBeginImageContextWithOptions(canvasSize, false, 0);
let context = UIGraphicsGetCurrentContext()!

//Apply transformation
CGContextTranslateCTM(context, xCenter, yCenter)

CGContextConcatCTM(context, imageView.transform)

CGContextTranslateCTM(context, -xCenter, -yCenter)

var drawingRect : CGRect = CGRectZero
drawingRect.size = canvasSize

//Transaltion
drawingRect.origin.x = (xCenter - size.width*0.5)
drawingRect.origin.y = (yCenter - size.height*0.5)

//Aspectfit calculation
if boundsScale > imageScale {
    drawingRect.size.width =  drawingRect.size.height * imageScale
}else{
    drawingRect.size.height = drawingRect.size.width / imageScale
}

image!.drawInRect(drawingRect)

let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

Simulator screen shot Simulator

Saved image Saved

7
  • Thanks for the answer, but like I said I want image in full resolution. I've already posted a solution in screen-like res, see bottom of my question. image!.drawInRect(imageView!.bounds) - this causes 4k image to be size of imageView, so it depends on screen size.
    – Makalele
    Feb 12, 2016 at 19:54
  • Thanks, I think we're close. It's looking almost like it should. But the problem is it needs to be cropped properly to only visible part on screen (to be precise a bit less - to fit iPhone image). Please look in whole class code: pastebin.com/6UUj1B0w in prepareForSegue is your code. topImage is the iPhone you can see on screenshot. You can test it easily on new project in blank view controller. On the bottom is the only method - it shows how it should look like.
    – Makalele
    Feb 14, 2016 at 11:13
  • ZoomRotatePanImageView is always aspect fit. So not need to set frame for your topImageView and imageView, keep full screen size. Set content mode as spect fit for your topImageView. Screen shots from my sample is attached, works as expected. Feb 16, 2016 at 4:31
  • Well if I won't set any frame for imageView it's as big as image. In my example 4k image from simulator makes it look huge. I want image initially looking aspect-fill like. Can you post your sample project?
    – Makalele
    Feb 16, 2016 at 19:21
  • Thanks, finally got it working. It wasn't working because of as you said setting frame, using wrong content mode and also constraints. Although I have to crop image in second step so it's pretty long process.
    – Makalele
    Feb 18, 2016 at 6:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.