UIWebView長按儲存圖片
阿新 • • 發佈:2019-01-27
現在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地址,如果不是就返回空值。