webView的图片使用图片浏览器来浏览

网页加载完成&＃xff0c;注入js文件

- (void)webViewDidFinishLoad:(UIWebView *)webView {
//这里是js&＃xff0c;主要目的实现对url的获取
static NSString * const jsGetImages &＃61;
&＃64;"function getImages(){\
var objs &＃61; document.getElementsByTagName(\"img\");\
var imgScr &＃61; &＃39;&＃39;;\
for(var i&＃61;0;iimgScr &＃61; imgScr &＃43; objs[i].src &＃43; &＃39;&＃43;&＃39;;\
\
objs[i].onclick&＃61;function(){\
document.location&＃61;\"myweb:imageClick:\"&＃43;this.src;\
};\
};\
return imgScr;\
};";//这里获取网页中img标签对象
[webView stringByEvaluatingJavascriptFromString:jsGetImages];//注入js方法
NSString *urlResurlt &＃61; [webView stringByEvaluatingJavascriptFromString:&＃64;"getImages()"];
_mUrlArray &＃61; [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:&＃64;"&＃43;"]];// NSLog(&＃64;"%&＃64;",_mUrlArray);
//urlResurlt 就是获取到得所有图片的url的拼接&＃xff1b;mUrlArray就是所有Url的数组
}


然后在下面的方法里面进行处理点击图片显示的操作&＃xff1a;

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
//将url转换为string
NSString *requestString &＃61; [[request URL] absoluteString];
//hasPrefix 判断创建的字符串内容是否以pic:字符开始
if ([requestString hasPrefix:&＃64;"myweb:imageClick:"]) {_imageUrl &＃61; [requestString substringFromIndex:&＃64;"myweb:imageClick:".length];//获取当前图片的url在整个链接地址中位置NSInteger index &＃61; [_mUrlArray indexOfObject:_imageUrl];if (self.bgView) {//设置不隐藏&＃xff0c;还原放大缩小&＃xff0c;显示图片self.bgView.hidden &＃61; NO;self.bgView.frame &＃61; CGRectMake(0, 0, WIDTH, HEIGHT);self.scrollView.contentOffset &＃61; CGPointMake(WIDTH*index, 0);} else{[self showBigImage:_mUrlArray atIndex:index];//创建视图并显示图片}return NO;
}
return YES;
}


e.g.:

#pragma mark 显示大图片
- (void)showBigImage:(NSArray *)imageUrls atIndex:(NSInteger )index{
self.bgView &＃61; [[UIView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
[self.bgView setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.7]];
[[UIApplication sharedApplication].keyWindow addSubview:self.bgView];
//创建灰色透明背景&＃xff0c;使其背后内容不可操作
self.scrollView &＃61; [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, HEIGHT)];
[self.scrollView setBackgroundColor:[UIColor colorWithWhite:0 alpha:0.7]];
self.scrollView.delegate &＃61; self;
// 是否分页
self.scrollView.pagingEnabled &＃61; YES;
//禁止垂直滚动// self.scrollView.showsVerticalScrollIndicator &＃61; YES;
//设置分页
self.scrollView.pagingEnabled &＃61; YES;
// 设置内容大小
self.scrollView.contentSize &＃61; CGSizeMake(WIDTH*imageUrls.count,HEIGHT);
[self.bgView addSubview:self.scrollView];
//创建关闭按钮
UIButton *closeBtn &＃61; [UIButton buttonWithType:UIButtonTypeCustom];
[closeBtn setBackgroundImage:[UIImage imageNamed:&＃64;"close"] forState:UIControlStateNormal];
[closeBtn addTarget:self action:&＃64;selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside];
[closeBtn setFrame:CGRectMake(WIDTH-50, 25, 25, 25)];
[self.bgView addSubview:closeBtn];
for (int i&＃61; 0; isetNumberOfTapsRequired:2];UIScrollView *s &＃61; [[UIScrollView alloc]initWithFrame:CGRectMake(WIDTH*i,0,WIDTH, HEIGHT)];s.bounces &＃61; NO;s.backgroundColor &＃61; [UIColor clearColor];s.contentSize &＃61;CGSizeMake(WIDTH,HEIGHT);s.delegate &＃61;self;s.minimumZoomScale &＃61;1.0;s.maximumZoomScale &＃61;3.0;// s.tag &＃61; i&＃43;1;[s setZoomScale:1.0];UIImageView *imageview &＃61; [[UIImageView alloc]initWithFrame:CGRectMake(0,0,WIDTH, HEIGHT)];//加载图片的时候 最好设置一个网络错误的预设图片[imageview sd_setImageWithURL:imageUrls[i]];imageview.contentMode &＃61; UIViewContentModeScaleAspectFit;imageview.userInteractionEnabled &＃61;YES;imageview.tag &＃61; i&＃43;1;[imageview addGestureRecognizer:doubleTap];[s addSubview:imageview];[self.scrollView addSubview:s];
}
self.scrollView.contentOffset &＃61; 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 &＃61;&＃61;self.scrollView){
// CGFloat x &＃61; scrollView.contentOffset.x;for (UIScrollView *s in scrollView.subviews){if ([s isKindOfClass:[UIScrollView class]]){[s setZoomScale:1.0]; //scrollView每滑动一次将要出现的图片较正常时候图片的倍数&＃xff08;将要出现的图片显示的倍数&＃xff09;}}
}
}#pragma mark - 双击图片放大的逻辑
-(void)handleDoubleTap:(UIGestureRecognizer *)gesture{
float newScale &＃61; [(UIScrollView*)gesture.view.superview zoomScale] * 1.5;//每次双击放大倍数
CGRect zoomRect &＃61; [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 &＃61;self.view.frame.size.height / scale;
zoomRect.size.width &＃61;self.view.frame.size.width / scale;
//双击图片的时候 以整个屏幕中心为基点 调整放大后的图片的原点位置
zoomRect.origin.x &＃61; self.scrollView.center.x - (zoomRect.size.width /2.0);
zoomRect.origin.y &＃61; self.scrollView.center.y - (zoomRect.size.height /2.0);
return zoomRect;
}
- (void)removeBigImage
{
self.bgView.hidden &＃61; YES;
}