实现效果


  • 操作步骤

    • 绘制一个矩形框,弹出一个alertView,提示是否保存图片
    • 点击"是",将图片保存到相册
    • 在相册中查看保存的图片
  • 效果图

实现思路


  • 在控制器的view上添加一个imageView,设置图片
  • 在控制器的view上添加一个pan手势
  • 跟踪pan手势,绘制一个矩形框(图片的剪切区域
  • 在pan手势结束时,通过alertView提示“是否将图片保存至相册?”
    • 点击“是”,保存图片
    • 点击“否”,暂时什么都不做

实现步骤


  • 通过storyboard在控制器的view上添加一个imageView(设置图片),并在控制器的.m文件中拥有该属性

    @property (weak, nonatomic) IBOutlet UIImageView *imageView;
  • 设置通过手势绘制的图片的剪切区域
    • 将图片的剪切区域作为成员属性clipView
    @property (nonatomic, weak) UIView *clipView;
    • 通过懒加载的方式创建clipView,并初始化
    - (UIView *)clipView
    {//如果clipView为被创建,就创建if (_clipView == nil){UIView *view = [[UIView alloc] init];_clipView = view;//设置clipView的背景色和透明度view.backgroundColor = [UIColor blackColor];view.alpha = 0.5;//将clipView添加到控制器的view上,此时的clipView不会显示(未设置其frame)[self.view addSubview:_clipView];}return _clipView;
    }
  • 给控制器的view添加pan手势,跟踪pan手势,绘制图片剪切区域
    • 创建并添加手势
    /**创建手势**/
    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(pan:)];/***每当pan手势的位置发生变化,就会调用pan:方法,并将手势作为参数传递*/
    /**添加手势**/
    [self.view addGestureRecognizer:pan];
    • 增加成员属性,记录pan手势开始的点
    @property (nonatomic, assign) CGPoint startPoint;
    • 监听手势的移动
    - (void)pan:(UIPanGestureRecognizer *)pan
    {CGPoint endPoint = CGPointZero;if (pan.state == UIGestureRecognizerStateBegan){/**开始点击时,记录手势的起点**/self.startPoint = [pan locationInView:self.view];}else if(pan.state == UIGestureRecognizerStateChanged){/**当手势移动时,动态改变终点的值,并计算起点与终点之间的矩形区域**/endPoint = [pan locationInView:self.view];//计算矩形区域的宽高CGFloat w = endPoint.x - self.startPoint.x;CGFloat h = endPoint.y - self.startPoint.y;//计算矩形区域的frameCGRect clipRect = CGRectMake(self.startPoint.x, self.startPoint.y, w, h);//设置剪切区域的frameself.clipView.frame = clipRect;}else if(pan.state == UIGestureRecognizerStateEnded){/**若手势停止,将剪切区域的图片内容绘制到图形上下文中**///开启位图上下文UIGraphicsBeginImageContextWithOptions(self.imageView.bounds.size, NO, 0);//创建大小等于剪切区域大小的封闭路径UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.clipView.frame];//设置超出的内容不显示,[path addClip];//获取绘图上下文CGContextRef context = UIGraphicsGetCurrentContext();//将图片渲染的上下文中[self.imageView.layer renderInContext:context];//获取上下文中的图片UIImage *image = UIGraphicsGetImageFromCurrentImageContext();//关闭位图上下文UIGraphicsEndImageContext();//移除剪切区域视图控件,并清空[self.clipView removeFromSuperview];self.clipView = nil;//将图片显示到imageView上self.imageView.image = image;//通过alertView提示用户,是否将图片保存至相册UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"保存图片" message:@"是否将图片保存至相册?" delegate:self cancelButtonTitle:@"否" otherButtonTitles:@"是", nil];[alertView show];
    }
    }
  • 设置alertView的代理方法,确定是否保存图片

    - (void)alertView:(nonnull UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex
    {//若点击了“是”,则保存图片if (buttonIndex == 1){UIImageWriteToSavedPhotosAlbum(self.imageView.image, nil, nil, nil);/*** 该方法可以设置保存完毕调用的方法,此处未进行设置*/}
    }

转载于:https://www.cnblogs.com/theDesertIslandOutOfTheWorld/p/4738354.html

iOSQuartz2D-04-手动剪裁图片并保存到相册相关推荐

  1. uniapp下载图片并保存到相册

    uniapp如何下载图片并保存到相册 我们要实现的功能是点击下载场馆二维码到手机相册 下面是实现的js代码 settingQrImgBase64(id) {uni.showLoading({title ...

  2. android自定义相册图片和视频教程,android把图片 视频 保存到相册

    //android把图片文件添加到相册 ContentResolver localContentResolver = getContentResolver(); ContentValues local ...

  3. 如何用手机备忘录扫描图片文件并保存到相册

    现如今,手机备忘录的功能越来越多.一些好用的手机备忘录工具,除了基础的记事和备忘提醒等功能外,还开发出了很多其他好用的功能,比如扫描图片文件识别文字,还能将识别到的文字以图片的形式重新保存到相册.那如 ...

  4. OpenGLES(八)GPUImage滤镜链与将滤镜修改后的图片保存到相册

    1.滤镜链 在一个复合滤镜中,多种滤镜效果处理时,通常都是图片 -> 设置顶点/纹理坐标 -> 滤镜效果处理 -> 帧缓冲区 -> 新的纹理 -> 滤镜效果处理 -> ...

  5. android本地图片转base64,Android Base64转图片 保存至相册

    最近项目中有一个需求,获取服务端的图片Base64码转回图片后保存至相册,这么简单的事还用得着我动手吗,当然是使用ctrl c v大法了,下面看看代码: public void savePicture ...

  6. 小程序canvas绘图保存至相册

    基础知识点: 了解canvas基础知识 wx.createCanvasContext()//微信小程序创建画布 wx.canvasToTempFilePath()//将画布canvas转为图片 wx. ...

  7. 【Flutter 问题系列第 22 篇】在 Flutter 中如何截取屏幕并显示到页面中,以及如何将截图保存到相册

    这是[Flutter 问题系列第 22 篇],如果觉得有用的话,欢迎关注专栏. 关于在 Flutter 中如何截取屏幕,以及如何将截图保存到相册的文章少之又少,即使有,也是错误一大片,有的甚至运行后都 ...

  8. 在微信小程序中实现生成海报图并保存到相册

    效果图镇楼: 技术依赖: 弹窗 (vant-weapp 提供的 van-popup 组件) 海报图 (wx-canvas-2d 工具) 弹窗组件的使用方式可以点击上面链接查看,本篇主要讲解海报图绘制方 ...

  9. 微信小程序生成图片保存到相册以及分享给好友

    这个功能我研究了一天半,最开始的头疼到后面成功实现,其中艰辛不言而喻,值得记录一下,经常写博客后,会发现自己在遇到问题和技术的时候就会习惯性的写博客,这是一个好习惯 言归正传 html添加canvas ...

  10. mongodb安装教程Linux,Ubuntu16.04手动安装MongoDB的详细教程

    我最近在研究MongoDB的路上,那么今天也算个学习笔记吧!今天用Ubuntu16.04手动安装MongoDB,分享给大家 注意事项: 仔细按步骤阅读操作 注意别写错字 牢记上面两点 一.用自带的火狐 ...

最新文章

  1. iOS 修改navigationController返回按钮颜色和文字
  2. hibernate教程--事务处理详解
  3. 在CentOS上安装FFMPEG和Gstream-ffmpeg
  4. acwing 3 完全背包
  5. viewpage 去掉左右切换效果_ViewPager实现多页面切换以及动画效果
  6. listPageData传jsp隐藏域,在传回java
  7. VB6.0超级模块-内存操作篇-含特征码搜索和HOOK跳转构造
  8. 中兴捧月算法-切绳子
  9. git使用kdiff3合并乱码问题
  10. springboot+pagehelper踩坑,PageHelper.startPage没有生效问题
  11. 基于51单片机的指纹考勤系统密码锁门禁原理图PCB程序设计
  12. 第三章 Guarded Suspension模式 等我准备好哦
  13. 记一次拯救NAS硬盘
  14. 【问题解决】PPT错误,应用程序无法正常启动(0xc0000022)
  15. PEP-8 中文翻译
  16. 如何设置学生上计算机课玩游戏,如何在电脑上设置一个定时提醒学生上网课的待办任务...
  17. 2021李林精讲精练880题 【数学一 解析分册】
  18. 典型ieee3机9节点电力系统潮流分析_借“玩潮無界”国创潮流玩具展复盘开业半年的上海世茂广场...
  19. Vue项目页面回到顶部
  20. 未来教育计算机二级vb题库,2019年3月计算机二级VB考试巩固试题及答案001

热门文章

  1. 端午节那晚,见了个小学时的同学!
  2. 推荐系统数据稀疏性问题
  3. 【斯坦福大学新研究】声波、光波等都是RNN
  4. 65 年来,全英国向他道歉三次
  5. 干货 | 找工作的经验总结(一)
  6. 【深度学习】你该会的精选面试题(一)
  7. Python_Tika
  8. 吴恩达深度学习——深层神经网络
  9. Mesos超配:让集群利用率可以达到100%
  10. 做真正Hacker 的乐趣──自己动手去实践