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>

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