UDN-企业互联网技术人气社区

板块导航

浏览  : 2021
回复  : 0

[移动平台] iOS UIWebView仿微信H5页面实现长按保存图片功能

[复制链接]
巡山霉少女的头像 楼主
发表于 2016-6-6 22:01:55 | 显示全部楼层 |阅读模式
861981-8d2014afa0ce4aa5.jpg

  选择放这张效果图的时候很是忐忑啊,不知道会不会被和谐掉。

  拿到需求之后分析了一下,其实主要功能点就是如何才能通过手指按压位置获取到相应的图片资源。是不是很抓狂,如果考虑到设备适配,谁知道手指按在什么地方了。

  直接google查到了下面的这两行代码,然后跑到H5大哥那请教,给我实际演示了一下,发现能够完美解决上面的问题。

  
  1. NSString *imgURL = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y];

  2.   NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:imgURL];
复制代码

  整篇文章的精髓就全在上面的那两行代码里了,接下来我就把完整的实现代码放上来。

  首先是给UiWebView加一个长按手势。

 
  1.  UILongPressGestureRecognizer* longPressed = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressed:)];

  2.   longPressed.delegate = self;

  3.   [self.webView addGestureRecognizer:longPressed];
复制代码


  接着在手势响应方法里面实现相应的获取图片地址的方法,并弹出SheetView。这里需要注意的是一定要判断手势的state属性,想知道后果的同学可以注掉判断代码自己尝试一下。另外就是如果手指长按位置是非图片的话,urlToSave是一个nil值。

  1. - (void)longPressed:(UILongPressGestureRecognizer*)recognizer
  2. {
  3.     if (recognizer.state != UIGestureRecognizerStateBegan) {
  4.         return;
  5.     }

  6.     CGPoint touchPoint = [recognizer locationInView:self.webView];

  7.     NSString *imgURL = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y];
  8.     NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:imgURL];

  9.     if (urlToSave.length == 0) {
  10.         return;
  11.     }

  12.     [self showImageOptionsWithUrl:urlToSave];
  13. }
复制代码


  接下来的方法是调用一个自己封装好的SheetVIew,大家完全可以跳过,列出来只是为了不破坏代码的连贯性。

  1. - (void)showImageOptionsWithUrl:(NSString *)imageUrl
  2. {
  3.     RAActionCustomButton *saveBtn = [[RAActionCustomButton alloc] init];
  4.     saveBtn.type = kRAActionCustomButtonTypeSheetWhite;
  5.     [saveBtn setTitle:@"保存图片" forState:UIControlStateNormal];
  6.     saveBtn.touchUpInsideBlock = ^(RAActionCustomButton *btn){
  7.         [self saveImageToDiskWithUrl:imageUrl];
  8.     };

  9.     RAActionCustomButton *cancelBtn = [[RAActionCustomButton alloc] init];
  10.     cancelBtn.type = kRAActionCustomButtonTypeSheetWhite;
  11.     [cancelBtn setTitle:@"取消" forState:UIControlStateNormal];
  12.     cancelBtn.touchUpInsideBlock = ^(RAActionCustomButton *btn){

  13.     };

  14.     RAActionSheet *sheet = [[RAActionSheet alloc] init];
  15.     sheet.actionBtns = @[ saveBtn, cancelBtn];
  16.     [sheet show];
  17. }
复制代码


  最后就是请求图片并保存到相册的方法。这里需要注意一下cachePolicy这个参数,当前选择的参数含义是只有在cache中不存在data时才从原始地址下载。在实现过程中大家可以根据实际的功能需求来选择不同的参数。

  1. - (void)saveImageToDiskWithUrl:(NSString *)imageUrl
  2. {
  3.     NSURL *url = [NSURL URLWithString:imageUrl];

  4.     NSURLSessionConfiguration * configuration = [NSURLSessionConfiguration defaultSessionConfiguration];

  5.     NSURLSession *session = [NSURLSession sessionWithConfiguration:configuration delegate:self delegateQueue:[NSOperationQueue new]];

  6.     NSURLRequest *imgRequest = [NSURLRequest requestWithURL:url cachePolicy:NSURLRequestReturnCacheDataElseLoad timeoutInterval:30.0];

  7.     NSURLSessionDownloadTask  *task = [session downloadTaskWithRequest:imgRequest completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) {
  8.         if (error) {
  9.             return ;
  10.         }

  11.         NSData * imageData = [NSData dataWithContentsOfURL:location];

  12.         dispatch_async(dispatch_get_main_queue(), ^{

  13.             UIImage * image = [UIImage imageWithData:imageData];

  14.             UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);
  15.         });   
  16.     }];

  17.     [task resume];
  18. }

  19. - (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo
  20. {
  21.     if (error) {
  22.         [[RAProgressHUD sharedHUD] showErrorWithMessage:@"保存失败"];
  23.     }else{
  24.         [[RAProgressHUD sharedHUD] showSuccessWithMessage:@"保存成功"];
  25.     }
  26. }
复制代码


  功能实现代码已经完整的贴出来了,接下来聊一些文章之外的事情。首先感谢大家对我的支持,尤其是上一篇文章iOS雷达图 iOS RadarChart实现,不过让人哭笑不得的是大家要demo的方式有一种向老司机要种子的既视感

相关帖子

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部