显示图片用的是第三库MWPhotoBrowser,通过CocoaPods安装
https://github.com/mwaterfall/MWPhotoBrowser
一 、在-(void)webViewDidFinishLoad:(UIWebView *)webView中
1.获取图片的url地址
//调整字号
NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'";
[webV stringByEvaluatingJavaScriptFromString:str];
//这里是js,主要目的实现对url的获取
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
var imgScr = '';\
for(var i=0;i<objs.lengeth;I++){/
imgScr = imgScr + objs[I].src + '+';\
};\
return imgScr;\
};";
[webV stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法
NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];
mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];
//urlResurlt 就是获取到得所有图片的url的拼接;mUrlArray就是所有Url的数组
if (mUrlArray.count >= 2) {
[mUrlArray removeLastObject];
}
2 给图片添加点击事件
[webV stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\
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}\
}\
};];
[webV stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];
3 给页面添加缩放功能
NSString *jsMeta = [NSString stringWithFormat:@"var meta = document.createElement('meta');meta.content='width=device-width,initial-scale=1.0,minimum-scale=.5,maximum-scale=3';meta.name='viewport';document.getElementsByTagName('head')[0].appendChild(meta);"];
[webV stringByEvaluatingJavaScriptFromString:jsMeta];
二、点击图片时,调用showBigImage方法去显示图片
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
//将url转换为string
NSString *requestString = [[request URL] absoluteString];
//hasPrefix 判断创建的字符串内容是否以pic:字符开始
if ([requestString hasPrefix:@"image-preview:"]) {
NSString *imageUrl = [requestString substringFromIndex:@"image-preview:".length];
[self showBigImage:imageUrl];//创建视图并显示图片
return NO;
}
return YES;
}
三、用第三库MWPhotoBrowser来显示图片
这些可以实现基本的图片点击显示大图,over