iOS拦截H5的input标签,实现图片处理

HTML的input标签在 type = "file" 时,即变为文件上传控件,浏览器会去监听这个标签,根据标签的另外一个 accept 字段的内容去调取各个平台的相关系统资源,如图片,视频,声音等,iOS也不例外。通过这个标签,移动端的H5页面就有直接获取系统资源的能力。但是有时候我们并不想让H5拿到原始的文件,或者是希望能够加工一下。比如:文件的压缩,文件格式转换,文件的编辑等。

<form>
    <input type="file" accept="image/gif, image/jpeg"/>
</form>

也许大部分情况下我们会直接采用JS交互的方式。这种方式可定义和可控的程度都比较高,弊端也就是需要交互的地方都要跟H5协商好每个页面去写交互代码。

本文通过拦截的方式,笔者不认为是一种可靠的方案,因为随着iOS系统的升级很可能就变了,不利于项目的稳定,给维护带来麻烦。不过作为另外一种解决问题的思路,感兴趣还是可以看看的。


先以图片的获取为例

1. 寻找切入口

通过Debug View Hierarchy工具查看视图树寻找点击H5标签的弹窗
第一层
第一层
显然这个ActionSheet无法决定最终是哪一张图片,这个切入点不合适,我们再往里面看。
html>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章