How to add Image at the particular area in a template image

Question

This is a template image (http://i.stack.imgur.com/9ME6A.jpg) in which multiple circular area are available. we need, when we click on any circular area (one by one ) then gallery should be open and after selecting the image from gallery that image should be shown on the selected circular area. Please provide me any link or demo for my problem. i am stucking here.

Thanks!

Answer 1

1. Make a viewController with 5 "UIImageView" views. Arrange as you need it
2. Place there your smile images.
3. Add UITapGestureRecognizer into every UIImageView and catch them
4. Open UIImagePicker and make your VC as a delegate
5. Catch user selected picture event and place the image to your concrete UIImageView

Answer 2

You should get the mapping(position and dimensions) of circular images in the template image from the backend and use those values for displaying circles and selecting images from gallery.

If you are getting a single image with all circles, then it will be very difficult to identify all the circles(using complex algorithms) in the single image.

If the backend is able to provide the mapping data, first method is the correct method.

Answer 3

in ViewController.h

#import <UIKit/UIKit.h>
#import <QuartzCore/QuartzCore.h>
@interface ViewController : UIViewController <UINavigationControllerDelegate,UIImagePickerControllerDelegate,UIGestureRecognizerDelegate>
@property (strong, nonatomic) IBOutlet UIImageView *imageView1;
@property (strong, nonatomic) IBOutlet UIImageView *imageView2;
@property (strong, nonatomic) IBOutlet UIImageView *imageView3;
@property (strong, nonatomic) IBOutlet UIImageView *imageView4;
@property (strong, nonatomic) IBOutlet UIImageView *imageView5;
@end

ViewController.m

#import "ViewController.h"
@interface ViewController ()
{
  UIImageView *imageviewPick;
}
@end
@implementation ViewController
@synthesize imageView1,imageView2,imageView3,imageView4,imageView5;


- (void)viewDidLoad
{
 [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

imageView1.layer.cornerRadius = self.imageView1.frame.size.height / 2;
imageView1.layer.borderWidth = 1.0f;
imageView1.layer.borderColor = [[UIColor grayColor] CGColor];
imageView1.layer.masksToBounds = YES;

imageView2.layer.cornerRadius = self.imageView2.frame.size.height / 2;
imageView2.layer.borderWidth = 1.0f;
imageView2.layer.borderColor = [[UIColor grayColor] CGColor];
imageView2.layer.masksToBounds = YES;

imageView3.layer.cornerRadius = self.imageView3.frame.size.height / 2;
imageView3.layer.borderWidth = 1.0f;
imageView3.layer.borderColor = [[UIColor grayColor] CGColor];
imageView3.layer.masksToBounds = YES;

imageView4.layer.cornerRadius = self.imageView4.frame.size.height / 2;
imageView4.layer.borderWidth = 1.0f;
imageView4.layer.borderColor = [[UIColor grayColor] CGColor];
imageView4.layer.masksToBounds = YES;

imageView5.layer.cornerRadius = self.imageView5.frame.size.height / 2;
imageView5.layer.borderWidth = 1.0f;
imageView5.layer.borderColor = [[UIColor grayColor] CGColor];
imageView5.layer.masksToBounds = YES;



UITapGestureRecognizer *tap1 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImageOne:)];
tap1.numberOfTapsRequired = 1;

UITapGestureRecognizer *tap2 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImageTwo:)];
tap2.numberOfTapsRequired = 1;

UITapGestureRecognizer *tap3 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImageThree:)];
tap3.numberOfTapsRequired = 1;

UITapGestureRecognizer *tap4 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImageFour:)];
tap4.numberOfTapsRequired = 1;

UITapGestureRecognizer *tap5 = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapImageFive:)];
tap4.numberOfTapsRequired = 1;


imageView1.userInteractionEnabled = YES;
imageView2.userInteractionEnabled = YES;
imageView3.userInteractionEnabled = YES;
imageView4.userInteractionEnabled = YES;
imageView5.userInteractionEnabled = YES;


[imageView1 addGestureRecognizer:tap1];
[imageView2 addGestureRecognizer:tap2];
[imageView3 addGestureRecognizer:tap3];
[imageView4 addGestureRecognizer:tap4];
[imageView5 addGestureRecognizer:tap5];
}
- (void)didReceiveMemoryWarning 
{
  [super didReceiveMemoryWarning];
  // Dispose of any resources that can be recreated.
}

-(void)tapImageOne:(UIGestureRecognizer *)tapGesture
{
  imageviewPick = (UIImageView *)tapGesture.view;
  [self showGallery];
}
-(void)tapImageTwo:(UIGestureRecognizer *)tapGesture
{
  imageviewPick = (UIImageView *)tapGesture.view;
  [self showGallery];
}
-(void)tapImageThree:(UIGestureRecognizer *)tapGesture
{
   imageviewPick = (UIImageView *)tapGesture.view;
   [self showGallery];
}
-(void)tapImageFour:(UIGestureRecognizer *)tapGesture
{
  imageviewPick = (UIImageView *)tapGesture.view;
  [self showGallery];
}
-(void)tapImageFive:(UIGestureRecognizer *)tapGesture
{
  imageviewPick = (UIImageView *)tapGesture.view;
  [self showGallery];
}

-(void)showGallery
{
   UIImagePickerController *pickImage = [[UIImagePickerController alloc]init];
   pickImage.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
   pickImage.delegate = self;
   [self presentViewController:pickImage animated:YES completion:nil];
}

-(void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info
{
   UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];
   imageviewPick.image = image;
   [picker dismissViewControllerAnimated:YES completion:nil];
}
@end