JS和OC交互问题之-JS怎么调用相册

最近开发中做H5和OC混编开发,需要通过JS调用iPhone的相册,并把图片传给Web端,然后显示在Web端,具体代码如下所示:
OC片段代码:

@protocol JSDelegate 
- (void)getImage:(id)parameter;
@end

@interface ViewController (){
  int indextNumb;// 交替图片名字
  UIImage *getImage;//获取的图片
}
@property(strong, nonatomic) JSContext *jsContext;
@property(retain, nonatomic) UIWebView *myWebView;
@end

@implementation ViewController
#pragma mark - life cycle
- (void)viewDidLoad {
  [super viewDidLoad];
  [self setupWebView];
  }

#pragma private methond
- (void)setupWebView{
  if (!self.myWebView) {
    //初始化 WebView
    self.myWebView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    self.myWebView.backgroundColor = [UIColor colorWithRed:1.000 green:1.000 blue:0.400 alpha:1.000];
    // 代理
    self.myWebView.delegate = self;
    NSURL *path = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];
    [self.myWebView loadRequest:[NSURLRequest requestWithURL:path]];
    [self.view addSubview:self.myWebView];
  }
}

#pragma mark UIWebViewDelegate  
// 加载完成开始监听js的方法
- (void)webViewDidFinishLoad:(UIWebView *)webView{
  self.jsContext = [self.myWebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
  self.jsContext[@"iosDelegate"] = self;
  self.jsContext.exceptionHandler = ^(JSContext *context, JSValue *exception){
    context.exception = exception;
    NSLog(@"获取 self.jsContext 异常信息：%@",exception);
  };
}

#pragma mark - JSDelegate
- (void)getImage:(id)parameter{
  // 把 parameter json字符串解析成字典
  NSString *jsonStr = [NSString stringWithFormat:@"%@", parameter];
  NSDictionary *jsParameDic = [NSJSONSerialization JSONObjectWithData:[jsonStr dataUsingEncoding:NSUTF8StringEncoding ] options:NSJSONReadingAllowFragments error:nil];
  NSLog(@"js传来的json字典: %@", jsParameDic);
  for (NSString *key in jsParameDic.allKeys)
  {
    NSLog(@"jsParameDic[%@]:%@", key, jsParameDic[key]);
  }
  [self beginOpenPhoto];
}
- (void)beginOpenPhoto
{
  // 主队列 异步打开相机
  dispatch_async(dispatch_get_main_queue(), ^{
    [self takePhoto];
  });
}

#pragma mark 取消选择照片代理方法 
- (void) localPhoto
{
  UIImagePickerController *imagePicker = [[UIImagePickerController alloc]init];
  imagePicker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
  imagePicker.delegate = self;
  [self presentViewController:imagePicker animated:YES completion:nil];
}
#pragma mark      //打开相机拍照
- (void) takePhoto
{
  UIImagePickerControllerSourceType sourceType = UIImagePickerControllerSourceTypeCamera;
  if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera])
  {
    UIImagePickerController *picker = [[UIImagePickerController alloc]init];
    picker.delegate = self;
    picker.allowsEditing = YES;
    picker.sourceType = sourceType;
    picker.modalTransitionStyle = UIModalTransitionStyleCoverVertical;
    [self presentViewController:picker animated:YES completion:nil];
  }
  else
  {
    NSLog(@"模拟器中不能打开相机");
    [self localPhoto];
  }
}

//  选择一张照片后进入这里
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary *)info
{
  NSString *type = [info objectForKey:UIImagePickerControllerMediaType];
  //  当前选择的类型是照片
  if ([type isEqualToString:@"public.image"])
  {
    // 获取照片
    getImage = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
    NSLog(@"===Decoded image size: %@", NSStringFromCGSize(getImage.size));
    // obtainImage 压缩图片 返回原尺寸
    indextNumb = indextNumb == 1?2:1;
    NSString *nameStr = [NSString stringWithFormat:@"Varify%d.jpg",indextNumb];
    [SaveImage_Util saveImage:getImage ImageName:nameStr back:^(NSString *imagePath) {
      dispatch_async(dispatch_get_main_queue(), ^{
        NSLog(@"图片路径：%@",imagePath);
        /**
         *  这里是IOS 调 js 其中 setImageWithPath 就是js中的方法 setImageWithPath(),参数是字典
         */
        JSValue *jsValue = self.jsContext[@"setImageWithPath"];
        [jsValue callWithArguments:@[@{@"imagePath":imagePath,@"iosContent":@"获取图片成功，把系统获取的图片路径传给js 让html显示"}]];
      });
    }];
    [picker dismissViewControllerAnimated:YES completion:nil];
  }
}

HTML片段代码:

  
    
      
      
  
    

      
JS与iOS交互
      
JS页面获取iOS系统图片
        
    

      
        

    

      
        
    
      

Git地址