关于javascript:Webview中h5上传图片踩坑记录

8次阅读

共计 1535 个字符,预计需要花费 4 分钟才能阅读完成。

前段时间开发端内 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 益处

正文完
 0