iOS开发 之 WebView点击图片看大图效果详解手机开发

项目里面需要实现,点击webView里面的图片,看大图并且能够放大缩小效果,在此记录下实现过程。

  • 在webViewDelegate里面添加如下代码:

  • - (void)webViewDidFinishLoad:(UIWebView *)aWebView { 
     
        //调整字号 
        NSString *str = @"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '95%'"; 
        [webView stringByEvaluatingJavaScriptFromString:str]; 
         
        //js方法遍历图片添加点击事件 返回图片个数 
        static  NSString * const jsGetImages = 
        @"function getImages(){/ 
        var objs = document.getElementsByTagName(/"img/");/ 
                                                 for(var i=0;i<objs.length;i++){/ 
                                                     objs[i].onclick=function(){/ 
                                                         document.location=/"myweb:imageClick:/"+this.src;/ 
                                                     };/ 
                                                 };/ 
                                                 return objs.length;/ 
                                                 };"; 
         
        [webView stringByEvaluatingJavaScriptFromString:jsGetImages];//注入js方法 
         
        //注入自定义的js方法后别忘了调用 否则不会生效(不调用也一样生效了,,,不明白) 
        NSString *resurlt = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"]; 
        //调用js方法 
    //    NSLog(@"---调用js方法--%@  %s  jsMehtods_result = %@",self.class,__func__,resurlt); 
    }
  • - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{ 
        //将url转换为string 
        NSString *requestString = [[request URL] absoluteString]; 
    //    NSLog(@"requestString is %@",requestString); 
         
        //hasPrefix 判断创建的字符串内容是否以pic:字符开始 
        if ([requestString hasPrefix:@"myweb:imageClick:"]) { 
            NSString *imageUrl = [requestString substringFromIndex:@"myweb:imageClick:".length]; 
    //        NSLog(@"image url------%@", imageUrl); 
             
            if (bgView) { 
                //设置不隐藏,还原放大缩小,显示图片 
                bgView.hidden = NO; 
                imgView.frame = CGRectMake(10, 10, SCREEN_WIDTH-40, 220); 
                [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")]; 
            } 
            else 
                [self showBigImage:imageUrl];//创建视图并显示图片 
             
            return NO; 
        } 
        return YES; 
    }
  • 创建放大图片的视图

  • #pragma mark 显示大图片 
    -(void)showBigImage:(NSString *)imageUrl{ 
        //创建灰色透明背景,使其背后内容不可操作 
        bgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)]; 
        [bgView setBackgroundColor:[UIColor colorWithRed:0.3 
                                                   green:0.3 
                                                    blue:0.3 
                                                   alpha:0.7]]; 
        [self.view addSubview:bgView]; 
         
        //创建边框视图 
        UIView *borderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH-20, 240)]; 
        //将图层的边框设置为圆脚 
        borderView.layer.cornerRadius = 8; 
        borderView.layer.masksToBounds = YES; 
        //给图层添加一个有色边框 
        borderView.layer.borderWidth = 8; 
        borderView.layer.borderColor = [[UIColor colorWithRed:0.9 
                                                        green:0.9 
                                                         blue:0.9 
                                                        alpha:0.7] CGColor]; 
        [borderView setCenter:bgView.center]; 
        [bgView addSubview:borderView]; 
         
        //创建关闭按钮 
        UIButton *closeBtn = [UIButton buttonWithType:UIButtonTypeCustom]; 
    //    [closeBtn setImage:[UIImage imageNamed:@"close.png"] forState:UIControlStateNormal]; 
        closeBtn.backgroundColor = [UIColor redColor]; 
        [closeBtn addTarget:self action:@selector(removeBigImage) forControlEvents:UIControlEventTouchUpInside]; 
        [closeBtn setFrame:CGRectMake(borderView.frame.origin.x+borderView.frame.size.width-20, borderView.frame.origin.y-6, 26, 27)]; 
        [bgView addSubview:closeBtn]; 
         
        //创建显示图像视图 
        imgView = [[UIImageView alloc] initWithFrame:CGRectMake(10, 10, CGRectGetWidth(borderView.frame)-20, CGRectGetHeight(borderView.frame)-20)]; 
        imgView.userInteractionEnabled = YES; 
        [imgView setImageWithURL:[NSURL URLWithString:imageUrl] placeholderImage:LOAD_IMAGE(@"house_moren")]; 
        [borderView addSubview:imgView]; 
         
        //添加捏合手势 
        [imgView addGestureRecognizer:[[UIPinchGestureRecognizer alloc]initWithTarget:self action:@selector(handlePinch:)]]; 
         
    }
  • 实现关闭和捏合手势的方法

  • //关闭按钮 
    -(void)removeBigImage 
    { 
        bgView.hidden = YES; 
    } 
     
    - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer 
    { 
        //缩放:设置缩放比例 
        recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale); 
        recognizer.scale = 1; 
    }

效果图如下

iOS开发 之 WebView点击图片看大图效果详解手机开发

原创文章,作者:Maggie-Hunter,如若转载,请注明出处:https://blog.ytso.com/tech/aiops/3283.html

(0)
上一篇 2021年7月16日 14:27
下一篇 2021年7月16日 14:27

相关推荐

发表回复

登录后才能评论