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);
  }</pre> </li> 
   
   
  - (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;
  }</pre> </li> 
   
   
   創建放大圖片的視圖 
   
   
   
   
  #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:)]];
      
  }</pre> </li> 
   
   
   實現關閉和捏合手勢的方法 
   
   
   
   
  //關閉按鈕
  -(void)removeBigImage
  {
      bgView.hidden = YES;
  }
  
  - (void) handlePinch:(UIPinchGestureRecognizer*) recognizer
  {
      //縮放:設置縮放比例
      recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
      recognizer.scale = 1;
  }</pre> </li> 
  </ul>
   效果圖如下