H5调用本地相册/相机上传图片

Posted 2023-04-05

参考技术A

在开发中有时候会用到H5调用本地图片或者相机，像第三方的实名认证，在线客服等等都需要上传图片。H5中只需要通过 <input> 调用即可，ios是可以的实现的，不需要自己处理，除非客户端压缩图片，但是android中需要自己处理，比较坑，本文记录H5调用本地图片或者相机的实现过程以及遇到的问题。

H5主要是通过 input 标签来获取图片

通过 WebView 加载 h5 页面，监听 WebView 对应的方法，实现自己的逻辑。

当点击 input 标签的时候会调用 WebChromeClient 的 onShowFileChooser() 方法（5.0+）或者 openFileChooser() 方法（3.0+）在改方法中处理自己逻辑，这里是弹出一个原生的选择框，选择从相册还是拍照获取图片。

拍照和打开相册功能封装到了 PhotoUtils 工具类中了。

file_paths.xml

从相册中选择

onActivityResult() 方法处理

这里使用 Luban 压缩以后再上传的

iOS开发-iOS调用相机调用相册将图片保存到本地相册

设置头部代理

<UINavigationControllerDelegate, UIImagePickerControllerDelegate>

1.调用相机

检测前置摄像头是否可用

- (BOOL)isFrontCameraAvailable{
    return [UIImagePickerController isCameraDeviceAvailable:UIImagePickerControllerCameraDeviceFront];
}

检测后置摄像头是否可用

- (BOOL)isRearCameraAvailable{
    return [UIImagePickerController isCameraDeviceAvailable:UIImagePickerControllerCameraDeviceRear];
}

调用相机

///调用相机
- (void)persentImagePicker{
    if (!_imagePickerG) {
        ///初始化相机
        _imagePickerG = [[UIImagePickerController alloc]init];
        ///代理
        _imagePickerG.delegate = self;
    }
    
    // 前面的摄像头是否可用
    if ([self isFrontCameraAvailable]) {
        _imagePickerG.sourceType = UIImagePickerControllerSourceTypeCamera;
    }
    // 后面的摄像头是否可用
    else if ([self isFirstResponder]){
        _imagePickerG.sourceType = UIImagePickerControllerSourceTypeCamera;
    }
    else{
        [SVProgressHUD showErrorWithStatus:@"没有相机可用~"];
        return;
    }
    ///允许拍照后裁剪
    _imagePickerG.allowsEditing = YES;
    [self.navigationController presentViewController:_imagePickerG animated:YES completion:nil];
}

2.调用相册

///调用本地相册
- (void)persentImagePicker{
    if (!_imagePickerG) {
        ///初始化相机
        _imagePickerG = [[UIImagePickerController alloc]init];
        ///代理
        _imagePickerG.delegate = self;
    }
    ///相册
    _imagePickerG.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    _imagePickerG.allowsEditing = YES;
    [self.navigationController presentViewController:_imagePickerG animated:YES completion:nil];
}

3.代理事件

///取消选择图片（拍照）
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{
    [picker dismissViewControllerAnimated:YES completion:nil];
}

///选择图片完成（从相册或者拍照完成）
- (void)imagePickerController:(UIImagePickerController *)picker didFinishPickingMediaWithInfo:(NSDictionary<NSString *,id> *)info{
    UIImage *image = [info objectForKey:UIImagePickerControllerOriginalImage];///原图
    //获取修剪后的图片
    UIImage *imageUp = [info objectForKey:UIImagePickerControllerEditedImage];
}

4.将图片保存到本地

///保存图片到本地相册
-(void)imageTopicSave:(UIImage *)image{
    UIImageWriteToSavedPhotosAlbum(image, self, @selector(image: didFinishSavingWithError: contextInfo:), nil);
}
- (void)image:(UIImage *)image didFinishSavingWithError:(NSError *)error contextInfo:(void *)contextInfo{
    if (error == nil) {
        
    }
    else{
        ///图片未能保存到本地
    }
}