网页图片浏览器

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

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

####实现思路： 加载完成时候，遍历找到对应的图片标签，给图片添加点击事件，并保存所有图片的链接，之后就是正常的展示功能了，我的展示效果使用的是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<length;i++){img=imgs[i];img.onclick=function(){window.location.href='image-preview:'+this.src}}}"];
   
    [self stringByEvaluatingJavaScriptFromString:@"assignImageClickAction();"];
    //
    [ webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];//禁止用户选择
    [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout=‘none‘;"];//禁止长按
   复制代码

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