Webview中h5上传图片踩坑记录

PatWu16

前段时间开发端内h5项目,用到了h5上传图片,现记录下遇到的坑。

端内h5上传图片问题归纳:
1、Webview中使用原生h5 input file上传图片时android只能单选、ios只能多选;android上还存在的一个问题为:点击上传按钮进入图片选择页后,如果取消选择,返回项目,则无法再次上传,会波及到整个webview,其他h5页面也无法上传,只有关闭此webview重新进入才可以上传——此问题需端原生修改方法覆盖;
2、Jsdk chooseImage方法选择图片,android选择相册和拍照时无返回数据;
3、Android部分机型(Galaxy S8 Android 7.0)上传图片数量过多时导致整个app奔溃、重启——此问题是webview申请渲染内存失败导致,端原生添加android:hardwareAccelerated=“false”配置,关闭硬件加速后解决;

上传图片建议:
1、交互优化:缩略图与预览图分别展示,选择后即上传,上传完成后显示网络图片;本地缩略图使用压缩后base64,上传完成后使用又拍云配置url!percent20(需根据配置确定)
2、上传File文件格式:建议使用File格式上传,因为文件转为base64后大小会变为原来的4/3倍
3、前端适当压缩:压缩会增加部分处理时间、减低清晰度,但可以减少上传时间、回显时间,提升用户体验,具体可根据项目情况确定,以下为不同压缩比例清晰度对比,可供参考(办公wifi):

压缩比例压缩清晰度(canvas)图片尺寸大小上传时间上传格式缩略图尺寸大小
100%-图片3264*24482.75MB6.5sFile图片652*489111.08KB
91.6%0.8图片(原图-同上)3264*24483.3MB上传失败,server对图片大小限制缘故Base64---
100%1图片2000*15004.11MB上传失败,server对图片大小限制缘故Base64---
28.6%0.8图片2000*15001.03M-754.93 KB2.2sBase64图片400*30043.73KB
13.1%0.5图片2000*1500515.04KB-369.38 KB1.4sBase64图片400*30043.77 KB
7.1%0.3图片2000*1500280.21 KB-202.35 KB979msBase64图片400*30044.31 KB
4.9%0.1图片2000*1500190.39 KB-138.56 KB763msBase64图片400*30043.95 KB
12.4%0.8图片1500*1125493.32 KB-351.12 KB1.3sBase64图片300*22525.62 KB
3.5%0.3图片1500*1125139.22 KB-100.92 KB589msBase64图片300*22525.80 KB
8.97%0.8图片1000*750277.03KB-196.37 KB866msBase64图片200*15012.84KB
30%1图片1000*7501.08MB-759.61 KB2.3sBase64图片200*15012.92KB
3.6%0.5图片1000*750135.75 KB-96.66 KB612msBase64图片200*15012.81 KB

备注:图片清晰度影响因素较多,表中数据仅供参考
建议:适当减小图片尺寸可以大幅降低图片大小,canvas清晰度配置0.5、0.3时性价比比较高,但最终还是需要根据场景和业务需要确定合适的压缩参数
4、不同项目可以针对性配置又拍云缩略图,访问方式参照url!percent20,端内目前还不支持webp格式,端外可配置webp好处

阅读 3.3k

仰望星空,脚踏实地

49 声望
4 粉丝
0 条评论

仰望星空,脚踏实地

49 声望
4 粉丝
文章目录
宣传栏