input-file 部分手機不能拍照問題

標籤：proc   ade   use   hub   image   github   app   ...   man   

曾經遇到一個需求，使用者拍身份證上傳驗證，

然後我卡在了拍照這個點上。

 

最初採用的是的 api，wx.chooseImage，

但隨後發現，返回的是一種只有才能預覽的 url 格式，

但驗證是要放在 PC 上進行的，等於儲存了這個 url 也沒法看呀。

然後詳細看了遍文檔，看上去好像是說可以先上傳到然後就可以下載到本地了，

於是又帶著吐槽啟用了另兩個 api，wx.uploadImage 和 wx.dowmloadImage。

萬萬沒想到，結局是，chooseImage 獲得 localIds 然後 uploadImage 得到 serverId，再 downloadImage 又變成了 localId。

思索了一下，也許這不是瀏覽器許可權的問題，因此找上後端一起討論這個問題。

才知，downloadImage 得後台人員去下，具體原因他也沒說明白...

好吧，稀裡糊塗算是走通了拍照和上傳驗證這個流程。

 

然而，正在我準備高興一下的時刻，對桌的同事跟我說，

剛才試了下，好像 input[type="file"] 好像在手機上相片選擇室會多一個拍照的按鈕。

然後我試了一下，天了嚕，心中有句 NMP 不知當講不當講，上面走 api 這條路又坑又麻煩好伐。

 

然而，正在我準備高興一下的時刻，又一個同事跟我說，

剛才試了下，好像My Phone不行耶，

然後集中試了一圈，確實有部分手機只有選取圖片沒有拍照這個選項，比如小米3/華為mate7等。

拔涼拔涼的，web 標準是多麼重要呀...

 

所以該項目只得還是選用了 api 這種方法，

小小慶幸一下客戶群還好都是基於平台，不然還得改成 webapp 了。

 

而隨著時間流逝，

最近在 github 上尋找蘋果機相容 getUserMedia 開啟手機網路攝影機（用於做個假 AR）的辦法。

一直無果所以向大佬彙報了一下，誰知之後他給我找來了一個 camera api。

試了一下，其實是個開啟拍照功能，但這樣跳出了瀏覽器，沒法加東西弄成 AR 呀。

但猛然想到，說不定能解決上次那個部分手機沒法拍照的問題，就去看了下源碼。

 

不禁百臉懵逼，一切的一切只因為 accept="image/*" 這個屬性！

<input type="file">      <!-- 部分手機沒有拍照選項 --><input type="file" accept="image/*">   <!-- 有了 -->

一時瞬間蒼老，不禁莞爾，感覺歲月弄人，可能這就是程式員的一生吧。

 

然而！這個故事還沒有完！！！

accept="image/*" 沒法使用 fileReader，

只能用 window.URL 的 createObjectURL，

也就意味著，它返回的是個 blob 類型的 url，沒法在其他頁面預覽了啊喂。

最後的最後，竟然還只能走 api 這條路了嗎，好不甘心呀，有待繼續尋找....

 

input 的案例

https://foreverz133.github.io/demos/single/input-file.html

的案例（當然你也只能在看到效果，代碼在 common.js 裡面）

http://goldcard.kdcer.com/User/BindingProcessStep2

 

好了，走了很多彎路，與大家同勉進步，麼麼噠

input-file 部分手機不能拍照問題