需要：携帯電話のカメラやフォトアルバム付きH5コール機能代替アバターを達成するために、
この機能は、非常に共通の特徴であるので、レコードを作ります。
1.画像IMGのファイル入力ボックスを追加
<INPUT TYPE = "FILE" ID = "FILE" 受け入れる= "画像/ *" 捕捉= 'カメラ' 倍数>
そして、それを隠します
1 < センター> 2 < IMG SRC = "images/[email protected]" クラス= "アバター" > 3 < 入力タイプ= "ファイル" ID = "ファイル" 受け入れる= "画像/ *" 捕捉= 'カメラ' 複数> 4 </ センター>
1 #FILE { 2 ディスプレイ：なし。 3 }
2.トリガイベントに画像ファイル入力ボックスをクリックをクリックします
$（ "アバター"）。クリックしてください（関数（）{ $（ "#FILE"）。トリガ（"クリック" ） }）
JSファイルによって3.アップロードされたコンテンツを取得し、base64エンコードに変換し、ページ画像上に表示
1つの // IOSは去掉属性キャプチャ 2 のvarファイル= document.querySelector（ '入力' ）。 3 であれば（getIos（））{ 4 file.removeAttribute（ "捕捉" ）。 5 } 6 関数getIos（）{ 7 VAR UA = navigator.userAgent.toLowerCase（）。 8 もし（ua.match（/ iPhone \ SOS / I）== "iPhoneのOS" ）{ 9 リターン 真。 10 } 他{ 11 リターン 偽。 12 } 13 }
1は // Base64でに変身 2（[変更] ,. ON $（ 'INPUT [タイプ=ファイル]'）関数（）{ 。3 VARのリーダー= 新しい新しいFileReaderの（）; 4 reader.onload = 機能（E）を{ 。5 コンソール.logの（reader.result）; // またはe.target.result同じで、base64でコードされている 6。 $（ "アバター"）ATTR（ "SRC" 、reader.result）; 7 } 8。 リーダー。 readAsDataURL（これは [0 .files ]） 。9 // filses入力[タイプ=ファイル]リスト・ファイルであり、ファイル[0]最初のファイルであり、これは、base64コードに最初の選択された画像ファイルであり、 10 } ）
4.結果ページの表示を実現
絵の前に置換効果：
絵後の代替効果：
