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

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

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

@interface ViewController ()<UIWebViewDelegate,UIImagePickerControllerDelegate,UINavigationControllerDelegate,JSDelegate>{
  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<NSString *,id> *)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片段代码:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
      <title></title>
      </head>
  <body>
    <div>
      <h3>JS与iOS交互</h3>
      <h4>JS页面获取iOS系统图片</h5>
        </div>
    <div>
      <input type = "button" style="width: 50%;height: 5%;" id="Button" value="打开相机获取图片" onclick="getIOSImage()"></button>
        </div><dir />
    <div>
      <img src="testImage.png" id="changeImage"style="width: 30%; height: 30%;" onclick="getIOSImage()"><!--src="图片的相对路径" 如果把html文件导入工程中，图片路径和OC一样只写图片名字和后缀就可以，（记得要先把图片添加到工程） 图片也可以实现按钮的方法getIOSImage -->
        </div>
    <span id="iosParame" style="width: 200px; height: 50%; color:orangered; font-size:15px" value="等待获取ios参数" >
      </div>
      <script>
        var getIOSImage = function(){
          var parameter = {'title':'JS调OC','describe':'这里就是JS传给OC的参数'};
          // 在下面这里实现js 调用系统原生api
          window.iosDelegate.getImage(JSON.stringify(parameter));// 实现数据的 json 格式字符串
        }
      // 这里是 iOS调用js的方法
      function setImageWithPath(arguments){
        document.getElementById('changeImage').src = arguments['imagePath'];
        document.getElementById('iosParame').innerHTML = arguments['iosContent'];
      }
      </script>
      </body>
</html>

Git地址