关于移动端H5上传图片的一些总结
我们这里只罗列问题
这个需求,利用H5标签完全可以做到,那么问题是什么
capture 捕获 ,我们把这个值设置为'camera',而我们要设置这个属性的原因是什么呢?客户希望用户上传的图片是现拍的。。。。。。
此时就会遇到两个问题,能不能做得和 app 一样,尤其是针对证件,答案是不能(上一篇日志有说到,感兴趣的往回翻),那么第二个方案就来了,capture 设置为 camera,此时,问题就来了,下面的问题,都是暂时无法调和的,如果有同学解决的,欢迎留言
1,兼容性问题
据我们测试,ios10以下机型,不支持该参数,就会发生,用户还是可以选择打开本地图库或拍照,而,ios11以上用户都是直接打开摄像头,安卓基本上都是直接打开摄像头,发现部分机型,可以选择打开美图秀秀等第三方软件,但没有本地照片的选项,原因是手机厂商的系统集成了这些软件的部分功能,用户点击这些第三方软件后会出现没有返回图片的情况,这块最好是在用户操作前,给出恰当的提示
2,页面进程被关闭
这个问题的具体描述是这样的,用户由浏览器页面打开相机后,由于,现在手机相机的拍照功能越来越强大,用到的内存也会相应的扩大,此时就会出现多个进程抢内存资源的情况出现,系统的做法一般是杀掉随机某个进程,如果正好杀掉的是浏览器进程,那么拍完照后,返回页面,浏览器重新启动,页面被重新渲染,无法获取图片,无解(sessionStorage等不会被清除,打好标记,尽量友好的提示用户把),经测试,打开图片库占用内存会小得多,没有测出此类bug
3,这点是对开发者而言,有点恶心的东西了,如果一个页面对于上传图片有多个触点,那么,每个触点都需要单独写,而不能够通过js的方式调用,由于安全策略的原因,js模拟点击是被禁掉的,所以大家不用尝试了
这个需求,利用H5标签完全可以做到,那么问题是什么
capture 捕获 ,我们把这个值设置为'camera',而我们要设置这个属性的原因是什么呢?客户希望用户上传的图片是现拍的。。。。。。
此时就会遇到两个问题,能不能做得和 app 一样,尤其是针对证件,答案是不能(上一篇日志有说到,感兴趣的往回翻),那么第二个方案就来了,capture 设置为 camera,此时,问题就来了,下面的问题,都是暂时无法调和的,如果有同学解决的,欢迎留言
1,兼容性问题
据我们测试,ios10以下机型,不支持该参数,就会发生,用户还是可以选择打开本地图库或拍照,而,ios11以上用户都是直接打开摄像头,安卓基本上都是直接打开摄像头,发现部分机型,可以选择打开美图秀秀等第三方软件,但没有本地照片的选项,原因是手机厂商的系统集成了这些软件的部分功能,用户点击这些第三方软件后会出现没有返回图片的情况,这块最好是在用户操作前,给出恰当的提示
2,页面进程被关闭
这个问题的具体描述是这样的,用户由浏览器页面打开相机后,由于,现在手机相机的拍照功能越来越强大,用到的内存也会相应的扩大,此时就会出现多个进程抢内存资源的情况出现,系统的做法一般是杀掉随机某个进程,如果正好杀掉的是浏览器进程,那么拍完照后,返回页面,浏览器重新启动,页面被重新渲染,无法获取图片,无解(sessionStorage等不会被清除,打好标记,尽量友好的提示用户把),经测试,打开图片库占用内存会小得多,没有测出此类bug
3,这点是对开发者而言,有点恶心的东西了,如果一个页面对于上传图片有多个触点,那么,每个触点都需要单独写,而不能够通过js的方式调用,由于安全策略的原因,js模拟点击是被禁掉的,所以大家不用尝试了
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」