Saving edited image after zooming, rotating and panning

Makalele

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.

Arun Ammannaya

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

CALayer with NSScrollView, zooming panning and clicking

Image rotating after CIFilter

imagecopyresampled after rotating the image

SciChart - zooming and panning from code in MVVM

Zooming and panning an image in a QScrollArea

Zooming and Panning in JS/JQuery like we can do it using SVG

How to check if my Cytoscape.js graph is out of view (even partially) after panning and/or zooming?

Constraining zooming and panning in a D3 map viewport

converting pdf to image but after zooming in

Keep Image Size the same even after zooming in and out

d3js zooming in one direction, panning in both directions

How to move around your widgets (Image) after zooming (Flutter)?

Zooming with mouse wheel breaks panning (scrolling) of real time data in ZedGraph

Image not rotating

Is there a Google Map event listener for panning or zooming map?

D3.js zooming and panning - lock on y axis

Having trouble panning and zooming on my d3 map

zooming and panning with buttons in android emulator

Flot zooming and panning with logarithmic axis

Image corrupted after zooming

Apply panning and zooming on inline SVG

Zooming and panning TextureView

Background image not zooming and panning with SVG

Correct touch location after zooming and panning a pdf drawn in CATiledLayer on top of the UIScrollview in iOS

How to Implement linked zooming, panning in bokeh plots when embedded as Components

Zooming and rotating in on an area of the JavaFX canvas

Rotating an image in AngularJS without CSS and saving it

Image shows in the background after rotating

Angular Saving an Edited Content