UIWebView長按儲存圖片
阿新 • • 發佈：2019-01-27
現在H5混合原生開發的方式越來越流行，也就要用到UIWenview控制元件。在開發過程中，我們可能會遇到一個需求，要求我們儲存網頁上的圖片，當用戶點選圖片的時候，就可以讓使用者選擇是否下載圖片。
在系統自帶的Safari瀏覽器已經實現了該功能，但是iOS開發中我們如果呼叫UIWebView載入圖片，會發現無法使用Safari儲存圖片的功能的。這就需要我們自己去實現。
要儲存網頁中的圖片，關鍵是要獲取手指點選位置的圖片的url地址，這就需要從js呼叫oc的方法。下面介紹兩種方法來實現圖片儲存功能，但是這兩種方法都只適用於圖片地址用如下形式表示才可以獲取：
如果圖片是通過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地址，如果不是就返回空值。