方式是以注入JS代碼的方式,遍歷所有的圖片img標簽,然后通過js獲取到圖片的url地址,然后自己再做點擊彈出圖片頁面和添加捏合手勢,代碼如下(方法來自網絡,從他人出學習來的,原文章地址找不到了...)

H5加載完成之后注入js,獲取url,給img添加可點擊

-(void)webViewDidFinishLoad:(UIWebView *)webView

{

//這里是js，主要目的實現對url的獲取

static NSString * const jsGetImages =

@"function getImages(){\

var objs = document.getElementsByTagName(\"img\");\

var imgScr = '';\

for(var i=0;i

imgScr = imgScr + objs[i].src + '+';\

};\

return imgScr;\

};";

[webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法

NSString *urlResurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];

mUrlArray = [NSMutableArray arrayWithArray:[urlResurlt componentsSeparatedByString:@"+"]];

if (mUrlArray.count >= 2) {

[mUrlArray removeLastObject];

}

//urlResurlt 就是獲取到得所有圖片的url的拼接；mUrlArray就是所有Url的數組

//添加圖片可點擊js

[_webView stringByEvaluatingJavaScriptFromString:@"function registerImageClickAction(){\

var imgs=document.getElementsByTagName('img');\

var length=imgs.length;\

for(var i=0;i

img=imgs[i];\

img.οnclick=function(){\

window.location.href='image-preview:'+this.src}\

}\

}"];

[_webView stringByEvaluatingJavaScriptFromString:@"registerImageClickAction();"];

}

點擊img的時候攔截一下獲取url

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

//預覽圖片

if ([request.URL.scheme isEqualToString:@"image-preview"]) {

NSString* path = [request.URL.absoluteString substringFromIndex:[@"image-preview:" length]];

path = [path stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

NSLog(@"path==%@",path);

[self bigImg:path]; //這個是我自己添加的方法

//path 就是被點擊圖片的url

return NO;

}

return YES;

}

點擊圖片調用的方法

-(void)bigImg:(NSString *)imgUrl

{

//背景view

bigImgView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight)];

bigImgView.backgroundColor = [UIColor blackColor];

[self.view addSubview:bigImgView];

//圖片本身

UIImageView *bigimg = [[UIImageView alloc]init];

bigimg.center = CGPointMake(kScreenWidth/2, kScreenHeight/2);

[bigimg sd_setImageWithURL:[NSURL URLWithString:imgUrl]];

//我這里設置的固定高度200;

bigimg.frame = CGRectMake(0, (kScreenHeight-200)/2, kScreenWidth, 200);

[bigImgView addSubview:bigimg];

[bigimg setUserInteractionEnabled:YES];

[bigimg setMultipleTouchEnabled:YES];

// 縮放手勢加到圖片上

UIPinchGestureRecognizer *pinchGestureRecognizer = [[UIPinchGestureRecognizer alloc] initWithTarget:self action:@selector(pinchView:)];

[bigimg addGestureRecognizer:pinchGestureRecognizer];

//移動手勢加到圖片上

UIPanGestureRecognizer *panGestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panView:)];

[bigimg addGestureRecognizer:panGestureRecognizer];

//點擊手勢加達到大背景

UITapGestureRecognizer *tapGestureRecognizer = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapView:)];

[bigImgView addGestureRecognizer:tapGestureRecognizer];

}

//處理點擊手勢

-(void) tapView:(UITapGestureRecognizer *)tapGestureRecognizer

{

[bigImgView removeFromSuperview];

}

// 處理縮放手勢

- (void) pinchView:(UIPinchGestureRecognizer *)pinchGestureRecognizer

{

UIView *view = pinchGestureRecognizer.view;

if (pinchGestureRecognizer.state == UIGestureRecognizerStateBegan || pinchGestureRecognizer.state == UIGestureRecognizerStateChanged) {

view.transform = CGAffineTransformScale(view.transform, pinchGestureRecognizer.scale, pinchGestureRecognizer.scale);

pinchGestureRecognizer.scale = 1;

}

}

//處理拖拉手勢

- (void) panView:(UIPanGestureRecognizer *)panGestureRecognizer

{

UIView *view = panGestureRecognizer.view;

if (panGestureRecognizer.state == UIGestureRecognizerStateBegan || panGestureRecognizer.state == UIGestureRecognizerStateChanged) {

CGPoint translation = [panGestureRecognizer translationInView:view.superview];

[view setCenter:(CGPoint){view.center.x + translation.x, view.center.y + translation.y}];

[panGestureRecognizer setTranslation:CGPointZero inView:view.superview];

}

}

總結

以上是生活随笔為你收集整理的ios html5缩小,IOS H5页面图片点击捏合放大缩小的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。