网页图片浏览器

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

photoBrower.gif

废话不多说，先上代码：实现代码

实现思路：

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

下面一步一步讲解：

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

2. 在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;

      }

3. 获取这些图片链接，用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];
   }
   

4. 在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加载的网页图片浏览功能，我自己提出了一些方法，方便你使用，如果有帮助，欢迎点赞！！
使用方法详情请见代码地址