h5 图片上传-h5上传拍照画质不好怎么办

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

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

通过

WebView

加载

h5

页面,监听

WebView

对应的方法,实现自己的逻辑。

当点击 input 标签的时候会调用

WebChromeClient

的 onShowFileChooser() 方法(5.0+)或者 openFileChooser() 方法(3.0+)在改方法中处理自己逻辑,这里是弹出一个原生的选择框,选择从相册还是拍照获取图片。

拍照和打开相册功能封装到了

PhotoUtils

工具类中了。

file_

从相册中选择

onActivityResult()

方法处理

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

h5上传拍照画质不好怎么办

移动端h5嵌入安卓app,vue2框架,vant组件库,axios网络库

h5实现拍照上传图片的功能,用原生HTML标签<input>调起相机进行拍照

已经针对app开放相机使用权限

问题现象:安卓手机app中h5调起相册进行照片上传成功,调起相机拍照后进行照片上传失败

排查过程:

h5增加日志打印工具vconsole进行日志打印,看看上传过程中是否有什么问题,打印发现axios报错network_error,接口返回状态码0

查看axios源码,并不能太明显的看出问题的原因,于是将上传接口改为原生fetch调用,发现接口竟然调通了,但是后端返回了errorcode,赶忙咨询后端大佬,结果等待许久并未得到回复

猜测可能是拍照没有拿到图片内容,或者安卓手机拍照生成图片的格式不被后端接口支持,于是想打印上传接口formdata,但是发现vconsole中没有办法看出formdata是否为空(相册上传成功时打印也为空)

于是转向network查看接口,发现相册上传接口需要3s+的时间,而相机拍照上传只需要100ms左右,印证了我的想法,确实没有拿到图片数据

但是我想相机的权限已经给app开通了呀,还会有什么问题呢?经过一系列的咨询和查资料,发现安卓手机拍照上传还需要开通存储权限:安卓内外存储存储权限

安卓手机存储分为内部存储和外部存储

内外存储分别分为私有存储和公共存储

安卓4.4版本之后默认情况下应用只能访问属于应用的私有存储部分

访问公共存储需要申请app的存储权限,而相机拍照后存储位置就在公共存储部分

打开app存储权限后,解决问题

h5开发,有上传图片需求。

但在真机调试时,ios系统的可以上传成功并显示,安卓系统上传图片成功但不显示图片。

排查好久,发现原来是因为系统不一样, 返回base64码不一样。

后端是直接根据 返回的base64码前几位判断解码,所以安卓系统会回显不出来图片。

解决:截取base64码前四位,判断是否等于 data ,如果不是则加上对应的前缀即可。