网页图片浏览器-白红宇

公司有个需求是一个webview页面里的图片点击会放大，支持保存功能，在网上找了很多资料，也没用一个合适的，决定自己写一个，效果如下：

废话不多说，先上代码：

####实现思路：加载完成时候，遍历找到对应的图片标签，给图片添加点击事件，并保存所有图片的链接，之后就是正常的展示功能了，我的展示效果使用的是SDPhotoBrowser，感谢这些提供开源框架的作者，大大的方便了我们的开发时间。

下面一步一步讲解：

我写了一个类XMGPhotoBrowerWebView继承自UIWebView，自己遵循自己的代理，并实现代理方法；

在webViewDidFinishLoad:方法中添加如下代码：

为图片添加点击事件，并设置事件的协议头为image-preview

[self stringByEvaluatingJavaScriptFromString:@"function assignImageClickAction(){var imgs=document.getElementsByTagName('img');var length=imgs.length;for(var i=0;i

遍历所有图片标签img，找到所含图片的链接

//获取所有图片链接- (NSMutableArray *)getImgs { NSMutableArray *arrImgURL = [[NSMutableArray alloc] init]; int node = [self nodeCountOfTag:@"img"]; for (int i = 0; i < node; i++) {     NSString *jsString = [NSString stringWithFormat:@"document.getElementsByTagName('img')[%d].src", i];     NSString *img = [self stringByEvaluatingJavaScriptFromString:jsString];     [arrImgURL addObject:img];  } return arrImgURL; }复制代码

获取img标签的结点个数

//获取某个标签的结点个数    - (int)nodeCountOfTag:(NSString *)tag {    NSString *jsString = [NSString     stringWithFormat:@"document.getElementsByTagName('%@').length", tag];    int len = [[self stringByEvaluatingJavaScriptFromString:jsString] intValue]; return len;      }复制代码

获取这些图片链接，用UIImageView加载这些链接，并把图片保存到全局数组里，以便浏览时候使用

_imageUrlArray= [self getImgs];//获取所有图片链接NSMutableArray *array=[[ NSMutableArray alloc] init];for (NSString *string in _imageUrlArray) //剔除没有规则的图集{ // 按照自己的规则去剔除不同的图片（我这里没有剔除）//        if ([string hasSuffix:@".png"]||[string hasSuffix:@".jpg"]||[string hasSuffix:@".jpeg"])//        {[array addObject:string];//        }}_imageUrlArray=array;_imageArray = [NSMutableArray array];for (NSInteger i = 0; i < _imageUrlArray.count; i++) {UIImageView *view = [[UIImageView alloc] init];[_imageArray addObject:view];[view sd_setImageWithURL:_imageUrlArray[i] placeholderImage:[UIImage imageNamed:@""]];[_contenterView addSubview:view];}复制代码

在webView:shouldStartLoadWithRequest:navigationType:方法里监听图片的点击事件，弹出浏览页面
```
//预览图片复制代码
```
if ([request.URL.scheme isEqualToString:@"image-preview"]) { NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]]; path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]; for (NSInteger i = 0; i<_imageUrlArray.count; i++) { if ([path isEqualToString:_imageUrlArray[i]]) { _index = i; } }
```
SDPhotoBrowser *browser = [[SDPhotoBrowser alloc] init];browser.currentImageIndex = _index;browser.sourceImagesContainerView = _contenterView;browser.imageCount = _imageUrlArray.count;browser.delegate = self;[browser show];return NO;复制代码
```
}

至此已经完成了，webview加载的网页图片浏览功能，我自己提出了一些方法，方便你使用，如果有帮助，欢迎点赞！！使用方法详情请见