H5调用相机和相册更换头像

需求：H5调用手机的相机和相册从而实现更换头像的功能

这个功能是很常用的一个功能，因此做一个记录。

1.在头像img下加一个文件输入框

<input type="file" id="file" accept="image/*" capture='camera' multiple>

并隐藏之

1 <center>
2    <img src="images/[email protected]" class="avatar">
3    <input type="file" id="file" accept="image/*" capture='camera' multiple>
4 </center>

1 #file {
2    display: none;
3 }

2.点击头像触发文件输入框点击事件

$(".avatar").click(function(){
    $("#file").trigger("click")
})

3.通过js拿到上传的文件内容，转成base64编码并显示图片在页面上

 1 //ios去掉capture属性
 2 var file = document.querySelector('input');
 3 if (getIos()) {
 4   file.removeAttribute("capture");
 5 }
 6 function getIos() {
 7   var ua = navigator.userAgent.toLowerCase();
 8   if (ua.match(/iPhone\sOS/i) == "iphone os") {
 9      return true;
10   } else {
11      return false;
12   }
13 }

 1 //转成base64
 2 $('input[type=file]').on('change', function () {
 3     var reader = new FileReader();
 4     reader.onload = function (e) {
 5         console.log(reader.result);  //或者 e.target.result都是一样的，都是base64码
 6         $(".avatar").attr("src", reader.result);
 7      }
 8     reader.readAsDataURL(this.files[0])
 9     //filses就是input[type=file]文件列表，files[0]就是第一个文件，这里就是将选择的第一    个图片文件转化为base64的码
10 }) 

4.实现效果页面展示

更换头像前的效果：

 更换头像后的效果：