服务器之家

服务器之家 > 正文

iOS实现点击图片放大和长按保存图片的示例

时间:2021-04-22 17:51     来源/作者:FBY展菲

一:简介

在项目中免不了会遇到,实名认证上传身份证、绑定银行卡等功能。在实际操作中呢,会涉及到上传图片,在页面布局时,可能图片不是一张,考虑到布局的美观等因素,显示图片的位置变得很小,如果想查看上传的图片是否清晰,内容是否完整,可能就需要放大才能实现,下面就和大家分享一下我封装的一类,完美的实现了图片的缩放功能。

另外,这些博文都是来源于我日常开发中的技术总结,在时间允许的情况下,我会针对技术点分别分享ios、android两个版本,尽量附上demo以供大家参考,如果有其他技术点需要,可在文章后留言,我会尽全力帮助大家。

二:实现思路分析

  1. 给uiimageview添加手势
  2. 封装一个继承nsobject的fbyimagezoom类
  3. 写一个函数用来接收出入的uiimageview
  4. 根据传入的uiimageview重新绘制在window中
  5. 添加放大后背景视图的颜色和透明度
  6. 使用动画放大展示imageview
  7. 添加恢复imageview原始尺寸的tap点击事件
  8. 完成之后将背景视图删掉

三:实现源码分析

根据实现思路分析,一步步进行编码实现:

1. 给uiimageview添加手势

?
1
2
3
4
5
6
7
self.myimageview = [[uiimageview alloc]initwithframe:cgrectmake(50, 150, screen_width-100, screen_width-100)];
self.myimageview.image = [uiimage imagenamed:@"bankcard"];
//添加点击事件
uitapgesturerecognizer *tapgesturerecognizer = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(scanbigimageclick:)];
[_myimageview addgesturerecognizer:tapgesturerecognizer];
[_myimageview setuserinteractionenabled:yes];
[self.view addsubview:_myimageview];

2. 封装一个继承nsobject的fbyimagezoom类

?
1
2
3
4
#import <foundation/foundation.h>
#import <uikit/uikit.h>
@interface fbyimagezoom : nsobject
@end

3. 写一个函数用来接收出入的uiimageview

?
1
2
3
4
/**
 * @param contentimageview 图片所在的imageview
 */
+(void)imagezoomwithimageview:(uiimageview *)contentimageview;

4. 根据传入的uiimageview重新绘制在window中

?
1
2
3
4
+(void)imagezoomwithimageview:(uiimageview *)contentimageview{ 
  uiwindow *window = [uiapplication sharedapplication].keywindow;
  [self scanbigimagewithimage:contentimageview.image frame:[contentimageview convertrect:contentimageview.bounds toview:window]];
}

5. 添加放大后背景视图的颜色和透明度

?
1
2
3
4
5
//当前视图
  uiwindow *window = [uiapplication sharedapplication].keywindow;
  //背景
  uiview *backgroundview = [[uiview alloc] initwithframe:cgrectmake(0, 0, [uiscreen mainscreen].bounds.size.width, [uiscreen mainscreen].bounds.size.height)];
  [backgroundview setbackgroundcolor:[uicolor colorwithred:107/255.0 green:107/255.0 blue:99/255.0 alpha:0.6]];

6. 使用动画放大展示imageview

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//动画放大所展示的imageview
[uiview animatewithduration:0.4 animations:^{
  cgfloat y,width,height;
  y = ([uiscreen mainscreen].bounds.size.height - image.size.height * [uiscreen mainscreen].bounds.size.width / image.size.width) * 0.5;
  //宽度为屏幕宽度
  width = [uiscreen mainscreen].bounds.size.width;
  //高度 根据图片宽高比设置
  height = image.size.height * [uiscreen mainscreen].bounds.size.width / image.size.width;
  [imageview setframe:cgrectmake(0, y, width, height)];
  //重要! 将视图显示出来
  [backgroundview setalpha:1];
} completion:^(bool finished) {
  
}];

7. 添加恢复imageview原始尺寸的tap点击事件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//添加点击事件同样是类方法 -> 作用是再次点击回到初始大小
uitapgesturerecognizer *tapgesturerecognizer = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(hideimageview:)];
[backgroundview addgesturerecognizer:tapgesturerecognizer];
 
/**
 * 恢复imageview原始尺寸
 */
+(void)hideimageview:(uitapgesturerecognizer *)tap{
  uiview *backgroundview = tap.view;
  //原始imageview
  uiimageview *imageview = [tap.view viewwithtag:1024];
  //恢复
  [uiview animatewithduration:0.4 animations:^{
    [imageview setframe:oldframe];
    [backgroundview setalpha:0];
  } completion:^(bool finished) {
    [backgroundview removefromsuperview];
  }];
}

8. 完成之后将背景视图删掉

?
1
2
//完成后操作->将背景视图删掉
[backgroundview removefromsuperview];

四:项目实际使用

1. 引入封装类fbyimagezoom

?
1
#import "fbyimagezoom.h"

2. 给uiimageview添加手势

?
1
2
//添加点击事件
uitapgesturerecognizer *tapgesturerecognizer = [[uitapgesturerecognizer alloc] initwithtarget:self action:@selector(scanbigimageclick:)];

3. 调用封装类函数

?
1
2
3
4
5
6
//浏览大图点击事件
-(void)scanbigimageclick:(uitapgesturerecognizer *)tap{
  nslog(@"点击图片");
  uiimageview *clickedimageview = (uiimageview *)tap.view;
  [fbyimagezoom imagezoomwithimageview:clickedimageview];
}

好了,到这里点击图片放大到全屏就完成了

4. 长按保存图片

另外就是实现长按保存图片的功能,这个功能很简单

首先增加长按手势

?
1
2
3
4
//创建长按手势
uilongpressgesturerecognizer *longtap = [[uilongpressgesturerecognizer alloc] initwithtarget:self action:@selector(imglongtapclick:)];
//添加手势
[_myimageview addgesturerecognizer:longtap];

然后长按手势弹出警告视图确认

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
-(void)imglongtapclick:(uilongpressgesturerecognizer*)gesture
  if(gesture.state==uigesturerecognizerstatebegan)   
  {   
    uialertcontroller *alertcontrol = [uialertcontroller alertcontrollerwithtitle:@"保存图片" message:nil preferredstyle:uialertcontrollerstylealert];   
    uialertaction *cancel = [uialertaction actionwithtitle:@"取消" style:uialertactionstylecancel handler:^(uialertaction * _nonnull action) {
      
      nslog(@"取消保存图片");
    }];
    
    uialertaction *confirm = [uialertaction actionwithtitle:@"确认" style:uialertactionstyledestructive handler:^(uialertaction * _nonnull action) {
      
      nslog(@"确认保存图片");     
      // 保存图片到相册
      uiimagewritetosavedphotosalbum(self.myimageview.image,self,@selector(imagesavedtophotosalbum:didfinishsavingwitherror:contextinfo:),nil);
      
    }];   
    [alertcontrol addaction:cancel];
    [alertcontrol addaction:confirm];   
    [self presentviewcontroller:alertcontrol animated:yes completion:nil];
    
  
}

最后保存图片后的回调

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
- (void)imagesavedtophotosalbum:(uiimage*)image didfinishsavingwitherror: (nserror*)error contextinfo:(id)contextinfo
 
{
  nsstring *message; 
  if(!error) {   
    message =@"成功保存到相册";   
    uialertcontroller *alertcontrol = [uialertcontroller alertcontrollerwithtitle:@"提示" message:message preferredstyle:uialertcontrollerstylealert];   
    uialertaction *action = [uialertaction actionwithtitle:@"确定" style:uialertactionstyledestructive handler:^(uialertaction * _nonnull action) {
      
    }];
    [alertcontrol addaction:action];   
    [self presentviewcontroller:alertcontrol animated:yes completion:nil];   
  }else
    
  {
    message = [error description];     
    uialertcontroller *alertcontrol = [uialertcontroller alertcontrollerwithtitle:@"提示" message:message preferredstyle:uialertcontrollerstylealert];   
    uialertaction *action = [uialertaction actionwithtitle:@"确定" style:uialertactionstylecancel handler:^(uialertaction * _nonnull action) {
      
    }];   
    [alertcontrol addaction:action];   
    [self presentviewcontroller:alertcontrol animated:yes completion:nil];   
  
}

到这里实现点击图片放大和长按保存图片功能就都是实现了,demo源码已经放在github上。

五:项目展示

iOS实现点击图片放大和长按保存图片的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://juejin.im/post/5a9df1bdf265da23783fc632

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
返回顶部