不知道各位对于这个需求要如何解决?

可能有些人会想到js与原生交互,js监听图片点击事件,然后将图片的url传递给原生App端,然后原生App将图片保存到相册,这样子麻烦吗?超麻烦。(1)、js监听图片长按事件;(2)、js将图片url传递给原生;(3)、原生通过图片的url生成UIImage;(4)、保存UIImage到系统相册,巨麻烦啊,大哥,我很懒的好不好

那么问题跑出来了,怎么办最简单?

  • 鉴于个人道行尚浅,我就将自己的想法说出来

  • 有个js的api:Document.elementFromPoint()

TheelementFromPoint()method of theDocumentinterface returns the topmost element at the specified coordinates.

所以根据这个提示,我们完全可以只在App原生端做一些代码开发,实现这个需求

开发步骤

  • 给UIWebView添加长按手势
  • 监听手势动作,拿到坐标点(x,y)
  • UIWebView注入js:Document.elementFromPoint(x,y).src拿到img标签的src
  • 判断拿到的src是否有值,有值则代表点击的网页上的img标签,此时弹出对话框,是否保存到相册。如果src为空,则代表点击网页上的非img标签,则不需要弹出对话框。
  • 拿到图片的url,生成UIImage。再将图片保存到相册

有巨坑

  • 长按手势事件不能每次都响应,据我猜测UIWebView本身就有很多事件,所以实现下UIGestureRecognizerDelegate代理方法。长按手势准确率100%
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{return YES;
}复制代码
//
//  ViewController.m
//  WebView长按图片保存到相册
//
//  Created by 杭城小刘 on 2017/8/2.
//  Copyright © 2017年 杭城小刘. All rights reserved.
//#import "ViewController.h"@interface ViewController ()<UIGestureRecognizerDelegate,NSURLSessionDelegate>
@property (weak, nonatomic) IBOutlet UIWebView *webView;@end@implementation ViewController#pragma mark -- life cycle
- (void)viewDidLoad{[super viewDidLoad];NSString *htmlURL = [[NSBundle mainBundle] pathForResource:@"saveImage" ofType:@"html"];[self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:htmlURL]]];//给UIWebView添加手势UILongPressGestureRecognizer* longPressed = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressed:)];longPressed.delegate = self;[self.webView addGestureRecognizer:longPressed];
}#pragma mark -- UIGestureRecognizerDelegate
- (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer{UIActivityTypeAddToReadingListreturn YES;
}- (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;}UIAlertController *alertVC =  [UIAlertController alertControllerWithTitle:@"大宝贝儿" message:@"你真的要保存图片到相册吗?" preferredStyle:UIAlertControllerStyleAlert];UIAlertAction *okAction = [UIAlertAction actionWithTitle:@"真的啊" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) {[self saveImageToDiskWithUrl:urlToSave];}];UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"大哥,我点错了,不好意思" style:UIAlertActionStyleDefault handler:nil];[alertVC addAction:okAction];[alertVC addAction:cancelAction];[self presentViewController:alertVC animated:YES completion:nil];
}#pragma mark - private method
- (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(imageSavedToPhotosAlbum:didFinishSavingWithError:contextInfo:), NULL);});}];[task resume];
}#pragma mark 保存图片后的回调
- (void)imageSavedToPhotosAlbum:(UIImage*)image didFinishSavingWithError:  (NSError*)error contextInfo:(id)contextInfo{NSString*message =@"嘿嘿";if(!error) {UIAlertController *alertControl = [UIAlertController alertControllerWithTitle:@"提示" message:@"成功保存到相册" preferredStyle:UIAlertControllerStyleAlert];UIAlertAction *action = [UIAlertAction actionWithTitle:@"确定" style:UIAlertActionStyleDestructive handler:nil];[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:nil];[alertControl addAction:action];[self presentViewController:alertControl animated:YES completion:nil];}
}@end复制代码

附上关键的js官方文档:Document.elementFromPoint()

附上Demo:Demo

长按UIWebView上的图片保存到相册相关推荐

  1. 教你实现微信公众号效果:长按图片保存到相册

    不知道各位对于这个需求要如何解决? 可能有些人会想到js与原生交互,js监听图片点击事件,然后将图片的url传递给原生App端,然后原生App将图片保存到相册,这样子麻烦吗?超麻烦.(1).js监听图 ...

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

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

  3. 小程序权限设置:小程序下载图片保存到相册拒绝权限后,再次打开权限的解决方案

    小程序下载图片保存到相册功能,首次操作会提示:保存图片或视频到你的相册,有'拒绝'和'允许'两个选项,如果选择了拒绝就会保存失败:saveImageToPhotosAlbum:fail auth de ...

  4. 微信小程序点击图片保存到相册

    小程序实现点击图片保存到相册 温馨提示:小程序图片在本地保存成功后放到线上失效,应该是没有设置合法的文件下载域名 // 下载事件函数bindImage: function (e) {var url = ...

  5. React-Native使用CameraRoll将图片保存到相册

    使用CameraRoll将图片保存到相册在ios和android上的实现有一些差别. 首先CameraRoll有一个CameraRoll.saveToCameraRoll(tag, [type]);方 ...

  6. 26.Android 下载图片保存到相册

    26.Android 下载图片保存到相册 Android 下载图片保存到相册 前言 实现思路 自定义Dialog 自定义Handler 自定义AsyncTask AndroidManifest配置权限 ...

  7. android本地图片如何显示到相册中,如何将本地图片保存到相册

    1.前言 我们都知道将图片保存到本地的操作,但是如何将本地的图片保存到相册.有几种不同的方法,下面分别讲述这几种方法. 2.调用系统方法 MediaStore.Images.Media.insertI ...

  8. uniapp 图片保存到相册

    传输门 在看官网的时候发现H5是不能图片保存到相册的 首先 html 绑定 @longtap 长按事件 <image :src="qrcodeImg" @longtap=&q ...

  9. android图片保存形式,Android应用开发之Android ScrollView截图和图片保存到相册的方式...

    本文将带你了解Android应用开发之Android ScrollView截图和图片保存到相册的方式,希望本文对大家学Android有所帮助. 1.1首先来看你一种截取屏幕,这种代码有缺陷,只能截取一 ...

最新文章

  1. 8月精选Python开源项目Top10
  2. 字节跳动总结的设计模式 PDF 火了,完整版开放下载!
  3. css入门教程资料(5)
  4. Angular4+AdminLTE+Jeecg 前后端分离框架实战-张代浩-专题视频课程
  5. 【快速入门Linux】8_Linux命令—系统信息相关命令(时间、磁盘、进程)
  6. Sound Ventures斥资百万美元举行NFT竞赛活动
  7. 可能存在无限递归_无限分类递归+排序解剖
  8. C++ queue(STL queue)
  9. webstorm软件使用汉化包
  10. 小米5 进9008模式
  11. ata计算机模拟考试系统,滨湖教育在线模拟考试系统
  12. w10用计算机卸载,win10电脑卸载系统内置应用软件的简单方法
  13. 2019年北理工计算机北航计算机中山大学计算机北邮网研院保研夏令营
  14. CE-植物大战僵尸关于“植物”的修改
  15. MacBook安装双系统多分区共享访问解决方案
  16. 微信公众平台昵称乱码emoji表情
  17. echarts 柱状图渐变色背景
  18. 关于Ubuntu20.04下向日葵远程软件连接中断的解决方法
  19. 牛客网wannafly挑战赛13-D(贪心)
  20. Entry键值对对象

热门文章

  1. primefaces教程_Primefaces AjaxBehavior和AjaxExceptionHandler组件示例教程
  2. ROS的学习(十八)使用rosserial创建一个publisher
  3. 洛谷4577 LOJ2521:[FJOI2018]领导集团问题——题解
  4. WebSocket请求过程分析及实现Web聊天室
  5. Android 中文字体的设置方法和使用技巧
  6. mapreduce的二次排序 SecondarySort
  7. 2014牡丹江——Hierarchical Notation
  8. static_cast 与reinterpret_cast
  9. 【同124】LeetCode 687. Longest Univalue Path
  10. JavaScript 比较和逻辑运算符