图片裁剪，截屏，擦除也就那回事儿！

1.圆形图片裁剪

目标明确： 得到一张图片 （=> 位图上下文，手动开启和关闭，代码位置任意）
思路：先设置好位图上下文的裁剪路径为圆形，再将图片渲染到位图上下文，取出即可。
步骤：
①开启位图上下文（大小与图片一致）
②将圆形裁剪路径添加到位图上下文
③将图片画到当前位图上下文中去 （注意：对象进入上下文叫“画”Draw；层与层(上下文)之间叫“渲染”：Render）
④从当前位图上下文中取出图片
⑤关闭当前位图上下文

• (void)viewDidLoad {
  [super viewDidLoad];

  //1.开启一个位图上下文(大小跟图片一样大)
  UIImage *image = [UIImage imageNamed:@"阿狸头像"];
  UIGraphicsBeginImageContext(image.size);

  //2.设置圆形裁剪区域(超出裁剪区域以外的内容会自动裁剪掉,对之前已经画上去的东西,不会有做用,有顺序.)
  UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, image.size.width, image.size.height)];
  [path addClip]; //addClip默认已经添加到当前位图上下文

  //3.把图片绘制到上下文当中
  [image drawAtPoint:CGPointZero];

  //4.从上下文当中生成一张图片
  UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

  //5.关闭上下文
  UIGraphicsEndImageContext();
  self.imageView.image = newImage;
  }

2.带有边框的圆形图片裁剪

目标明确： 得到一张图片 （=>位图上下文，手动开启和关闭，代码位置任意）
思路 ：由于裁剪路径对之前上下文中画的内容无效，有顺序。=> 先画目标图片的外切圆，再设置目标图片的内切圆裁剪路径，最后将目标图片画进位图上下文。
步骤：
①开启一个位图上下文（大小 等于 图片宽高各自 + 2*Border）
②绘制目标图片的外切圆到当前位图上下文（设置好边框颜色）
③将目标图片内切圆的裁剪路径添加到当前位图上下文（只作用于后面添加的内容）
④将目标图片绘制到位图上下文中去
⑤从当前位图上下文中获取带边框的圆形图片
⑥关闭位图上下文

• (UIImage *)imageWithBorderW:(CGFloat)borderW borderColor:(UIColor *)color image:(UIImage *)image
  {
  //1.开启一个位图上下文(大小,图片的宽高 + 2 * 边框宽度)
  CGSize size = CGSizeMake(image.size.width + 2 *borderW, image.size.height + 2 *borderW);
  UIGraphicsBeginImageContext(size);

  //2.绘制目标图片外切圆到位图上下文
  UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, size.width, size.height)];
  [color set];
  [path fill];

  //3.设置裁剪区域为目标图片内切圆，并添加到位图上下文
  UIBezierPath *clipPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(borderW, borderW, image.size.width, image.size.height)];
  [clipPath addClip];

  //4 把目标图片绘制到上下文
  [image drawAtPoint:CGPointMake(borderW, borderW)];

  //5.从上下文当中获取图片
  UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

  //6.关闭上下文
  UIGraphicsEndImageContext();
  return newImage;
  }

3.截屏

目标明确： 得到一张图片 （=> 位图上下文，手动开启和关闭，代码位置任意）
思路：把当前控制器View上的Layer层内容，渲染到位图上下文，再从位图上下文当中获取图片。

步骤：
①开启位图上下文（大小与目标View一致）
②把控制器View的Layer层内容渲染到当前开启的位图上下文中去
③从位图上下文当中获取图片
④关闭当前位图上下文

• (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {

  //1.创建一个位图上下文
  UIGraphicsBeginImageContext(self.view.bounds.size);

  //2.把控制器的View的layer内容渲染到上下文当中.
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  [self.view.layer renderInContext:ctx];

  //3.从上下文当中生成一张图片
  UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();

  //4.关闭上下文
  UIGraphicsEndImageContext();

  //如何把图片转成二进制流?
  //NSData *data = UIImageJPEGRepresentation(newImage, 1);
  NSData *data = UIImagePNGRepresentation(newImage);
  [data writeToFile:@"/Users/xmg1/Desktop/newImage.png" atomically:YES];
  }

4.图片任意尺寸截屏

目标明确： 得到一张图片 （=>位图上下文，手动开启和关闭，代码位置任意）
思路：图片与用户交互加Pan(拖拽)手势 + 实时显示我选中区域大小作为裁剪区域 + 将目标图片所在Layer渲染到位图上下文中再取出

步骤：
①设置显示图片的UIImageView控件与用户交互并添加Pan手势
②监听Pan手势开始以及改变的状态，实时记录用户选中图片截屏区域（懒加载一个遮盖UIView，这里UIBezierPath画路径不好使）
③当手势状态停止的时候，开启位图上下文，将遮盖区域设置为裁剪区域添并添加进位图上下文
④将目标图片所在的Layer渲染进位图上下文，然后从位图上下文取出截屏图片（注意：取出的截屏图片尺寸与原图一致）
⑤关闭当前位图上下文

• (UIView *)coverV {
  if (_coverV == nil) {
  //创建遮盖
  UIView *coverV = [[UIView alloc] init];
  coverV.backgroundColor = [UIColor blackColor];
  coverV.alpha = 0.7;
  [self.view addSubview:coverV];
  _coverV = coverV;
  }
  return _coverV;
  }

• (void)viewDidLoad {
  [super viewDidLoad];
  self.imageV.userInteractionEnabled = YES;
  }

• (IBAction)pan:(UIPanGestureRecognizer *)pan {

  if (pan.state == UIGestureRecognizerStateBegan) {
  //获取手指的当前点
  self.startP = [pan locationInView:self.imageV];
  }else if (pan.state == UIGestureRecognizerStateChanged) {
  CGPoint curP = [pan locationInView:self.imageV];
  CGFloat Width = curP.x - self.startP.x;
  CGFloat height = curP.y - self.startP.y;
  CGRect frame = CGRectMake(self.startP.x, self.startP.y, Width, height);
  self.coverV.frame = frame;
  }else if (pan.state == UIGestureRecognizerStateEnded) {

    //开启位图上下文
    UIGraphicsBeginImageContextWithOptions(self.imageV.bounds.size, NO, [UIScreen mainScreen].scale);
    
    //设置遮盖区域为裁剪区域
    UIRectClip(self.coverV.frame);
    
    //把ImageView的内容给渲染到上下文当中.
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    [self.imageV.layer renderInContext:ctx];
    
    //获取截屏图片（截屏后尺寸未变。）
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    //关闭上下文
    UIGraphicsEndImageContext();
    self.imageV.image  = newImage; //重写Draw方法覆盖原有内容,相当于将图片绘制到imageV的图层上下文中去。
    [self.coverV removeFromSuperview]; //性能考虑
  

  }
  }
  @end

5.图片擦除

目标明确： 得到一擦除区域变透明的图片 （=>位图上下文，手动开启和关闭，代码位置任意）
思路：“首先明确，擦除区域总范围是固定的”。准备两张一样的图片上下放置，上面一张有遮盖；将上层图片所在的Layer层内容渲染到位图上下文中，再实时按手指擦除“区域”让位图上下文中的上层图片变透明，最后从位图上下文中取回图片画进存放上层图片的View中

步骤：
①设置上层图片所在View与用户交互并添加Pan(拖拽)手势
（在Pan手势方法里：不分状态，直接就是擦除操作）
②开启位图上下文
③把上层图片Layer中的内容渲染到位图上下文中
④确定手指点击代表的区域大小，比如“宽高各30”，并将手指实时移动的Rect作为位图上下文中擦除区域的Rect
⑤取出位图上下文中的图片，并绘制到上层图片所在View的layer中
⑥关闭位图上下文

• (void)viewDidLoad {
  [super viewDidLoad];
  self.imageView.userInteractionEnabled = YES;
  //添加手势
  UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];
  [self.imageView addGestureRecognizer:pan];
  }

• (void)pan:(UIPanGestureRecognizer *)pan {

  //1.开启位图上下文
  UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0.0);

  //2.把上层图片的内容渲染到位图上下文
  CGContextRef ctx = UIGraphicsGetCurrentContext();
  [self.imageView.layer renderInContext:ctx];

  //3.确定手指点击代表区域大小，并将手指实时移动的Rect作为位图上下文的擦除Rect
  CGPoint curP = [pan locationInView:self.imageView];
  CGFloat rectWH = 100;
  CGFloat x = curP.x - rectWH * 0.5;
  CGFloat y = curP.y - rectWH * 0.5;
  CGRect rect = CGRectMake(x, y, rectWH, rectWH);
  CGContextClearRect(ctx, rect); //擦除本质：变透明

  //4.将从位图上下文获取的图片绘制到上层图片所在的View中(layer中)
  UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
  self.imageView.image = newImage;//重写Drawrect方法

  //5.关闭位图上下文
  UIGraphicsEndImageContext();
  }