UIWebView长按保存图片

现在H5混合原生开发的方式越来越流行，也就要用到UIWenview控件。在开发过程中，我们可能会遇到一个需求，要求我们保存网页上的图片，当用户点击图片的时候，就可以让用户选择是否下载图片。

在系统自带的Safari浏览器已经实现了该功能，但是iOS开发中我们如果调用UIWebView加载图片，会发现无法使用Safari保存图片的功能的。这就需要我们自己去实现。

要保存网页中的图片，关键是要获取手指点击位置的图片的url地址，这就需要从js调用oc的方法。下面介绍两种方法来实现图片保存功能，但是这两种方法都只适用于图片地址用如下形式表示才可以获取：

![](http://www.img0.bdstatic.com/img/image/meinvtoutu1242.png)

如果图片是通过js动态生成的，就无法使用下面的方法获取。

方法1、获取点击位置的图片的src属性

实现原理：

该方法主要是获取手指点击的位置，然后获取该位置的标签的src属性，如果是img标签，那么就可以获取到url。如果是其他标签，就无法获取到url属性。

实现代码：

@interface ViewController ()@property (weak, nonatomic) IBOutlet UIWebView *webView;
@end
@implementation ViewController
- (void)viewDidLoad
{
self.webView.delegate = self;
[self.webView  loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://image.baidu.com/wisebrowse/index?tag1=%E7%BE%8E%E5%A5%B3&tag2=%E5%85%A8%E9%83%A8&tag3=&pn=0&rn=10&from=index&fmpage=index&pos=magic#/home"]]];
UILongPressGestureRecognizer * longPressed = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressed:)];
longPressed.delegate = self;
[self.webView addGestureRecognizer:longPressed];
}
- (void)longPressed:(UITapGestureRecognizer*)recognizer{
//只在长按手势开始的时候才去获取图片的url
if (recognizer.state != UIGestureRecognizerStateBegan) {
return;
}
CGPoint touchPoint = [recognizer locationInView:self.webView];
NSString *js = [NSString stringWithFormat:@"document.elementFromPoint(%f, %f).src", touchPoint.x, touchPoint.y];
NSString *urlToSave = [self.webView stringByEvaluatingJavaScriptFromString:js];
if (urlToSave.length == 0) {
return;
}
NSLog(@"获取到图片地址：%@",urlToSave);
}
//可以识别多个手势
-(BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecognizeSimultaneouslyWithGestureRecognizer:(UIGestureRecognizer *)otherGestureRecognizer
{
return YES;
}

分析：

上述代码的核心功能实现就是如下两行代码：

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

第一行代码是通过js获取点击位置的标签的src属性，第二行代码是接受向webview注入第一行的js代码后返回的src属性。

如果点击位置是图片，那么久可以通过img.src拿到图片的url地址，如果不是就返回空值。