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= 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的时候拦截一下获取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 H5页面图片点击捏合放大缩小)