iOS獲取UIWebView加載網頁中的圖片，並實現放大效果

先看下效果：

展現網頁圖片.gif

這個Demo裏面不是很難實現，主要有兩點須要弄明白了就很好實現。
第一個是怎樣獲取到加載網頁裏面的imageUrl，第二個是怎樣實現圖片的放大效果。
首先咱們來講下獲取圖片的imageUrl，這裏主要是經過UIWebView與js的交互獲取到圖片的imageUrl的，代碼以下：

- (void)webViewDidFinishLoad:(UIWebView *)webView {
//這裏是js，主要目的實現對url的獲取
static  NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.length;i++){\
imgScr = imgScr + objs[i].src + '+';\
\
objs[i].onclick=function(){\
document.location=\"myweb:imageClick:\"+this.src;\
};\
};\
return imgScr;\
};";//這裏獲取網頁中img標籤對象
[webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
_mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
 //    NSLog(@"%@",_mUrlArray);
//urlResurlt 就是獲取到得全部圖片的url的拼接；mUrlArray就是全部Url的數組
}

而後在下面的方法裏面進行處理點擊圖片顯示的操做：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//將url轉換爲string
NSString *requestString = [[request URL] absoluteString];
//hasPrefix 判斷建立的字符串內容是否以pic:字符開始
if ([requestString hasPrefix:@"myweb:imageClick:"]) {
    _imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length];
    //獲取當前圖片的url在整個連接地址中位置
    NSInteger index = [_mUrlArray indexOfObject:_imageUrl];
    
    if (self.bgView) {
        //設置不隱藏，還原放大縮小，顯示圖片
        self.bgView.hidden = NO;
        self.bgView.frame = CGRectMake(0, 0, WIDTH, HEIGHT);
        self.scrollView.contentOffset = CGPointMake(WIDTH*index, 0);
    } else{
        [self showBigImage:_mUrlArray atIndex:index];//建立視圖並顯示圖片
    }
    return NO;
}
return YES;
}

顯示大圖，是使用UIScrollView，直接上代碼吧

#pragma mark 顯示大圖片
- (void)showBigImage:(NSArray *)imageUrls atIndex:(NSInteger )index{
self.bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
[self.bgView setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.7]];
[[UIApplication sharedApplication].keyWindow addSubview:self.bgView];
//建立灰色透明背景，使其背後內容不可操做
self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
[self.scrollView setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.7]];
self.scrollView.delegate = self;
// 是否分頁
self.scrollView.pagingEnabled = YES;
//禁止垂直滾動
  //  self.scrollView.showsVerticalScrollIndicator = YES;
//設置分頁
self.scrollView.pagingEnabled = YES;
// 設置內容大小
self.scrollView.contentSize = CGSizeMake(WIDTH*imageUrls.count,HEIGHT);
[self.bgView addSubview:self.scrollView];
//建立關閉按鈕
UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom];
[closeBtn setBackgroundImage:[UIImage imageNamed:@"close"] forState:UIControlStateNormal];
[closeBtn addTarget:self action:@selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside];
[closeBtn setFrame:CGRectMake(WIDTH-50, 25, 25, 25)];
[self.bgView addSubview:closeBtn];
for (int i= 0; i<imageUrls.count; i++) {
    UITapGestureRecognizer *doubleTap =[[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(handleDoubleTap:)];
    [doubleTap setNumberOfTapsRequired:2];
    
    UIScrollView *s = [[UIScrollView alloc]initWithFrame:CGRectMake(WIDTH*i,0,WIDTH, HEIGHT)];
    s.bounces = NO;
    s.backgroundColor = [UIColor clearColor];
    s.contentSize =CGSizeMake(WIDTH,HEIGHT);
    s.delegate =self;
    s.minimumZoomScale =1.0;
    s.maximumZoomScale =3.0;
    //        s.tag = i+1;
    [s setZoomScale:1.0];
    UIImageView *imageview = [[UIImageView alloc]initWithFrame:CGRectMake(0,0,WIDTH, HEIGHT)];
    //加載圖片的時候  最好設置一個網絡錯誤的預設圖片
    [imageview sd_setImageWithURL:imageUrls[i]];
    imageview.contentMode = UIViewContentModeScaleAspectFit;
    imageview.userInteractionEnabled =YES;
    imageview.tag = i+1;
    [imageview addGestureRecognizer:doubleTap];
    [s addSubview:imageview];
    [self.scrollView addSubview:s];
}
self.scrollView.contentOffset = CGPointMake(WIDTH*index, 0);

}


#pragma mark - ScrollView delegate
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{

for (UIView *v in scrollView.subviews){
    return v;
}
return nil;
}
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
if (scrollView ==self.scrollView){
//        CGFloat x = scrollView.contentOffset.x;
    for (UIScrollView *s in scrollView.subviews){
        if ([s isKindOfClass:[UIScrollView class]]){
            [s setZoomScale:1.0]; //scrollView每滑動一次將要出現的圖片較正常時候圖片的倍數（將要出現的圖片顯示的倍數）
        }
    }
}
}

#pragma mark - 雙擊圖片放大的邏輯
-(void)handleDoubleTap:(UIGestureRecognizer *)gesture{
float newScale = [(UIScrollView*)gesture.view.superview zoomScale] * 1.5;//每次雙擊放大倍數
CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gesture locationInView:gesture.view]];
[(UIScrollView*)gesture.view.superview zoomToRect:zoomRect animated:YES];
}

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center
{
CGRect zoomRect;
zoomRect.size.height =self.view.frame.size.height / scale;
zoomRect.size.width  =self.view.frame.size.width  / scale;
//雙擊圖片的時候 以整個屏幕中心爲基點 調整放大後的圖片的原點位置
zoomRect.origin.x = self.scrollView.center.x - (zoomRect.size.width  /2.0);
zoomRect.origin.y = self.scrollView.center.y - (zoomRect.size.height /2.0);
return zoomRect;
}
- (void)removeBigImage
{
self.bgView.hidden = YES;
}

代碼在https://github.com/marsLiuFei/OC_To_JS_ShowBigImage 點這裏。