From time to time, we write applications that need to take a screen shot of the user’s screen and save it to a file inside our app. Sure, they can use the HOME and POWER buttons to do the same thing, but what if you want to just save a part of the user’s screen to a file?
Fortunately, iOS makes it easy to do. The below code takes a screen shot when a user taps a button, and then saves it to a file on the device.
1. Name the project: screenshotexample and use a single view.
2. Next, go out on the web (I use Google Images – http://images.google.com) and select any image.
3. Now save the image to the Desktop, and then go back into Xcode.
4. Add the image to the project (Right click on the project name, and then select the ADD FILES TO PROJE CT command).
5. Select the image from the desktop.
-> Make sure the Destination field has a check mark in it, to add it to the project’s tree.
Since we want a user to tap a button so they can save the screen shot to a file, go in to Interface Builder and drag a Navigation Bar and button to the canvas. Now, search for and then drag a button on to the Navigation Bar. Name the button “Take Screen Shot“.
Now, search for an UIImageView and drag/drop it to the canvas. Click on the imageView, and select the Attributes Inspector (on the upper-right).
In the ImageView – image – field, use the drop down box to find and insert the image that you added to the project earlier. It should now appear on the canvas.
Save and exit back in to XCode.
Now, go into the .h file and type in:
-(IBAction)btnSave:(id)sender;
This is the button that will trigger the save when a user taps a button.
Now, go into the .m file. We first have to tell the iOS device to “look” in the /Documents/ folder to read/write files:
// Make device ‘look for’ its Document’s Directory:
-(NSString *)dataFilePath {
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES);
NSString *documentsDirectory = [paths objectAtIndex:0];
return [documentsDirectory stringByAppendingPathComponent:@”filename.png”];
}
Where filename is, is where you’d make up a filename to hold the data on the iOS device.
Now, let’s put in our button so that when a user taps it, it will save the photo to the filename you specified above.
-(IBAction)btnSave:(id)sender
{
// Save to File:
UIGraphicsBeginImageContext(self.view.bounds.size);
[drawImage.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
NSData *data = UIImagePNGRepresentation(image);
[data writeToFile:@”filename” atomically:YES];
}
1. The above code takes the screen, sizes it to the bounds of the screen.
2. It draws the layer that the photo is on.
3. Since we’re saving an image to the file, the UIImage is used.
4. The device then goes to the end of the image and preps it to be written to the file.
5. The NSData tells the device that its saving the data of the image.
6. We’re writing a PNG graphics file to storage.
7. Finally, the device writes the data to its /Documents/ Folder within the app’s sandbox.
BONUS TIP:
Lets suppose we wanted to save the photo to the Photo Album itself? Use the below code:
// Save to Photo Album:
CGRect screenRect = [[UIScreen mainScreen] bounds];
UIGraphicsBeginImageContext(screenRect.size);
CGContextRef ctx = UIGraphicsGetCurrentContext();
[[UIColor blackColor] set];
CGContextFillRect(ctx, screenRect);
[self.view.layer renderInContext:ctx];
UIImage *image1 = UIGraphicsGetImageFromCurrentImageContext();
UIImageWriteToSavedPhotosAlbum(image1, nil, nil, nil);
UIGraphicsEndImageContext();
NSString *title = @”Imaged Saved to Device“;
NSString *msg = @”This image has been saved to your Photo Album”;
NSString *button = @”OK”;
UIAlertView *alert = [[UIAlertView alloc]
initWithTitle:title
message:msg
delegate:self
cancelButtonTitle:button
otherButtonTitles:nil];
[alert show];
[alert release];
[title release];
[button release];
That’s it….Happy Coding!