问题背景:
某个H5页面中需要打开手机本地相册及照相机,用户选择某几张图片之后上传至服务器上。纯H5完成的话,当打开相机或者相册时,第一次会正常询问权限,但是如果用户点击了不允许之后,询问弹窗不再能弹出,H5处理不了。
当然简单粗暴地方式就是改为纯原生来写,不过我们的页面已用了很久,只是新增了一个上传的功能,所以还是延续当前页面,只不过改为原生和H5交互的方式,即e页面仍是H5页面,打开相册相机的弹窗改为由原生代码处理,最后将用户选择到的图片传给H5,由H5将数据传给服务端。
中间的交互不再赘述,网上到处都是,只是最后将拿到的数据传给H5这一步有一个小小的坑需注意;
第一步,将图片转化成字符串:
//当我们拿到图片之后,会将图片image转化成字符串
NSString *imageStr = [self encodeImageToBase64:image];
//将上述合法的字符串传给H5
[self p_toJSPramaWithImageBase64Str:imageStr];
此处,压缩转化中,base64EncodedStringWithOptions的options必须传NSDataBase64EncodingEndLineWithCarriageReturn,否则会失败!!!
// 将image转成5兆以内的二进制流,然后转化成base64的字符串
// #define ImageMaxLength 1024.0*1024.0*5 //5M
- (NSString *)encodeImageToBase64:(UIImage *)image {
NSData *imageData = [image compressWithMaxLength:ImageMaxLength];
return [imageData base64EncodedStringWithOptions:NSDataBase64EncodingEndLineWithCarriageReturn];
}
压缩图片
//压缩到多少以内 1024.0*1024.0*5 5兆以内
-(NSData *)compressWithMaxLength:(NSUInteger)maxLength
{
// Compress by quality
CGFloat compression = 1;
NSData *data = UIImageJPEGRepresentation(self, compression);
//NSLog(@"Before compressing quality, image size = %ld KB",data.length/1024);
if (data.length < maxLength) return data;
CGFloat max = 1;
CGFloat min = 0;
for (int i = 0; i < 6; ++i) {
compression = (max + min) / 2;
data = UIImageJPEGRepresentation(self, compression);
//NSLog(@"Compression = %.1f", compression);
//NSLog(@"In compressing quality loop, image size = %ld KB", data.length / 1024);
if (data.length < maxLength * 0.9) {
min = compression;
} else if (data.length > maxLength) {
max = compression;
} else {
break;
}
}
//NSLog(@"After compressing quality, image size = %ld KB", data.length / 1024);
if (data.length < maxLength) return data;
UIImage *resultImage = [UIImage imageWithData:data];
// Compress by size
NSUInteger lastDataLength = 0;
while (data.length > maxLength && data.length != lastDataLength) {
lastDataLength = data.length;
CGFloat ratio = (CGFloat)maxLength / data.length;
//NSLog(@"Ratio = %.1f", ratio);
CGSize size = CGSizeMake((NSUInteger)(resultImage.size.width * sqrtf(ratio)),
(NSUInteger)(resultImage.size.height * sqrtf(ratio))); // Use NSUInteger to prevent white blank
UIGraphicsBeginImageContext(size);
[resultImage drawInRect:CGRectMake(0, 0, size.width, size.height)];
resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
data = UIImageJPEGRepresentation(resultImage, compression);
//NSLog(@"In compressing size loop, image size = %ld KB", data.length / 1024);
}
//NSLog(@"After compressing size loop, image size = %ld KB", data.length / 1024);
return data;
}
第二步将数据传给H5:
iosSelectImageSuc为和h5约定好的方法
此处要点:字符串必须要拼接 data:image/jpg;base64,否则依然会失败!!!!
- (void)p_toJSPramaWithImageBase64Str:(NSString *)imageBase64Str {
//oc调js,将图片传给H5
NSString *str = [@"data:image/jpg;base64," stringByAppendingString:imageBase64Str];
NSString *jsStr = [NSString stringWithFormat:@"%@('%@')",@"iosSelectImageSuc",str];
[self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
NSLog(@"%@--%@",result,error);
}];
}