html5长按保存,iOS UIWebView仿微信H5页面实现长按保存图片功能

最终实现效果图

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

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

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

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

NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:imgURL];

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

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

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

longPressed.delegate = self;

[self.webView addGestureRecognizer:longPressed];

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

- (void)longPressed:(UILongPressGestureRecognizer*)recognizer

{

if (recognizer.state != UIGestureRecognizerStateBegan) {

return;

}

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

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

NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:imgURL];

if (urlToSave.length == 0) {

return;

}

[self showImageOptionsWithUrl:urlToSave];

}

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

- (void)showImageOptionsWithUrl:(NSString *)imageUrl

{

RAActionCustomButton *saveBtn = [[RAActionCustomButton alloc] init];

saveBtn.type = kRAActionCustomButtonTypeSheetWhite;

[saveBtn setTitle:@"保存图片" forState:UIControlStateNormal];

saveBtn.touchUpInsideBlock = ^(RAActionCustomButton *btn){

[self saveImageToDiskWithUrl:imageUrl];

};

RAActionCustomButton *cancelBtn = [[RAActionCustomButton alloc] init];

cancelBtn.type = kRAActionCustomButtonTypeSheetWhite;

[cancelBtn setTitle:@"取消" forState:UIControlStateNormal];

cancelBtn.touchUpInsideBlock = ^(RAActionCustomButton *btn){

};

RAActionSheet *sheet = [[RAActionSheet alloc] init];

sheet.actionBtns = @[ saveBtn, cancelBtn];

[sheet show];

}

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

- (void)saveImageToDiskWithUrl:(NSString *)imageUrl

{

NSURL *url = [NSURL URLWithString:imageUrl];

NSURLSessionConfiguration * configuration = [NSURLSessionConfiguration defaultSessionConfiguration];

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

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

NSURLSessionDownloadTask *task = [session downloadTaskWithRequest:imgRequest completionHandler:^(NSURL * _Nullable location, NSURLResponse * _Nullable response, NSError * _Nullable error) {

if (error) {

return ;

}

NSData * imageData = [NSData dataWithContentsOfURL:location];

dispatch_async(dispatch_get_main_queue(), ^{

UIImage * image = [UIImage imageWithData:imageData];

UIImageWriteToSavedPhotosAlbum(image, self, @selector(image:didFinishSavingWithError:contextInfo:), NULL);

});

}];

[task resume];

}

- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo

{

if (error) {

[[RAProgressHUD sharedHUD] showErrorWithMessage:@"保存失败"];

}else{

[[RAProgressHUD sharedHUD] showSuccessWithMessage:@"保存成功"];

}

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

html5长按保存,iOS UIWebView仿微信H5页面实现长按保存图片功能相关推荐

IOS之仿微信运动项目
IOS之仿微信运动项目环境xcode13.0 系统 ios 15.0 git地址 https://gitee.com/johnson__save_admin/wei-xin-sport 视频讲解: ...
iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
2019独角兽企业重金招聘Python工程师标准>>> iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架微信左滑删除效果的实 ...
iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码
iOS精选源码 iOS高仿微信完整项目源码 Khala: Swift 编写的iOS/macOS 路由框架微信左滑删除效果的实现与TableViewCell的常用样式介绍实现阴影圆角并存,渐变色背景 ...
iOS高仿微信完整源码，网易爱玩APP源码等
iOS精选源码 iOS一种弹出视图效果带动画一个快速便捷.无侵入.可扩展的动画弹框库高仿Elk - 旅行货币转换器 iOS内分享的界面.功能一体化解决方案使用Olami sdk实现一个语音查询股 ...
iOS 高仿微信相机拍摄和编辑
效果描述: 1.自定义相机拍摄视频和照片 2.切换前后摄像头.调整焦距/设置聚焦点.横屏拍摄 3.视频编辑:涂鸦.贴图.文字水印.视频裁剪 .添加背景音乐 4 .图片编辑:涂鸦.贴图.文字水印.马赛 ...
iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码
iOS精选源码 Swift-图片画框标注 Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用) iOS tabbar上的提示框 Swift图片浏览器,经过一年多维护,已基本稳定图片滤镜 ...
iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码...
iOS精选源码 Swift-图片画框标注 Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用) iOS tabbar上的提示框 Swift图片浏览器,经过一年多维护,已基本稳定图片滤镜 ...
ios系统苹果手机微信端取消默认长按事件
ios系统苹果手机微信端取消默认长按事件 css代码: body{ -webkit-user-select: none; / 文本不能被选择/ user-select: none; -webkit-t ...
android高仿微信聊天页面,Android 高仿微信语音聊天页面高斯模糊(毛玻璃效果)
目前的应用市场上,使用毛玻璃效果的APP随处可见,比如用过微信语音聊天的人可以发现,语音聊天页面就使用了高斯模糊效果. 先看下效果图: 仔细观察上图,我们可以发现,背景图以用户头像为模板,对其进行了高 ...

html5长按保存,iOS UIWebView仿微信H5页面实现长按保存图片功能

html5长按保存,iOS UIWebView仿微信H5页面实现长按保存图片功能相关推荐

最新文章

热门文章