ios html5缩小,IOS H5页面图片点击捏合放大缩小
方式是以注入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];
}
}