iOS How to Save Image from UIView without lose quality of image - ios

Question

I have images that are drawn in a UIView, then lines are drawn on them. How can I can save the image with the painted lines to a UIImage object with the same image size it began with, and without losing any image quality?
ie. I have an image of size (3264, 2448).
That is drawn in a UIView (size 375, 281) that AspectFit with the image,
then a line is painted on the image. Finally, how can I save the image from the UIView to a UIImage with size (3264, 2448) without losing image quality?
If this is not the best approach, please recommend a better way to accomplish this.
class DrawingView: UIImageView {
private var pts = [CGPoint](count: 5, repeatedValue: CGPoint())
private var ctr: uint!
var lineWidth: CGFloat = 4.0
var lineColor: UIColor = UIColor.darkGrayColor()
required init(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
init(frame: CGRect, image: UIImage) {
super.init(frame: frame)
self.image = image
beginDrawingView()
}
private func beginDrawingView() {
userInteractionEnabled = true
}
override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {
ctr = 0
if let touch = touches.first as? UITouch {
pts[0] = touch.locationInView(self) as CGPoint
}
}
override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {
if let touch = touches.first as? UITouch {
let p: CGPoint = touch.locationInView(self)
ctr = ctr + 1
pts[Int(ctr)] = p
if ctr == 4 {
pts[3] = CGPointMake((pts[2].x + pts[4].x)/2.0, (pts[2].y + pts[4].y)/2.0);
UIGraphicsBeginImageContextWithOptions(bounds.size, false, 0.0)
let context = UIGraphicsGetCurrentContext()
image!.drawInRect(CGRect(x: 0, y: 0, width: bounds.width, height: bounds.height))
CGContextSaveGState(context)
CGContextSetShouldAntialias(context, true)
CGContextSetLineCap(context, kCGLineCapRound)
CGContextSetLineWidth(context, lineWidth)
CGContextSetStrokeColorWithColor(context, lineColor.CGColor)
let path = CGPathCreateMutable()
CGPathMoveToPoint(path, nil, pts[0].x, pts[0].y)
CGPathAddCurveToPoint(path, nil, pts[1].x, pts[1].y, pts[2].x, pts[2].y, pts[3].x, pts[3].y)
CGContextSetBlendMode(context, kCGBlendModeNormal)
CGContextAddPath(context, path)
CGContextStrokePath(context)
image = UIGraphicsGetImageFromCurrentImageContext()
CGContextRestoreGState(context)
UIGraphicsEndImageContext()
pts[0] = pts[3]
pts[1] = pts[4]
ctr = 1
}
}
}
}

Answer 1

I'm not sure if this is exactly what you are looking for, but if you already have a UIImage object, you can just save it as a Base64String. Here is some code that I use for this (you'll notice that I also perform compression on any JPG images because I'm saving the string to a database, but of course you wouldn't need that component since you don't want to lose image quality):
//Convert the image to Base64String with optional JPG compression
//
-(NSString*)convertImageToBase64String:(UIImage*)image withImageType:(NSString*)imageType
{
NSData* data;
if ([imageType isEqualToString:#"PNG"]) {
data = UIImagePNGRepresentation(image);
} else if ([imageType isEqualToString:#"JPG"] || [imageType isEqualToString:#"JPEG"]) {
data = UIImageJPEGRepresentation(image, 0.9);
}
return [data base64EncodedStringWithOptions:NSDataBase64Encoding64CharacterLineLength];
}
If you don't have the UIImage object yet, though, you could get it by taking a screenshot like this:
+ (UIImage *) imageWithView:(UIView *)view
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0);
[view.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}
I haven't tested the last block of code, but I suspect it will give you a screenshot of the ENTIRE screen, so you would need to the view.bounds.size component to get the exact area you are looking for. Hope that helps!