MUI 拍照或選取照片上傳作為頭像

1.第一種方法是用H5來實現的

　　HTML：

<label>
　　　　<input style="opacity: 0;" type="file" accept="image/*" id="head_img_change"/>
　　　　<img id="headimg" src="img/erma_search_goods_detail.png">
</label>

 

　　JQ：

$(function(){

　　　　$("#head_img_change").change(function() {
　　　　　　var $file = $(this);
　　　　　　var fileObj = $file[0];
　　　　　　var windowURL = window.URL || window.webkitURL;
　　　　　　var dataURL;
　　　　　　var $img = $("#headimg");
　　　　　　if(fileObj && fileObj.files && fileObj.files[0]){
　　　　　　　　dataURL = windowURL.createObjectURL(fileObj.files[0]);
　　　　　　　　$img.attr('src',dataURL);
　　　　　　}else{
　　　　　　　　dataURL = $file.val();
　　　　　　　　var imgObj = document.getElementById("headimg");
　　　　　　　　// 1、在設置filter屬性時，元素必須已經存在在DOM樹中，動態創建的Node，也需要在設置屬性前加入到DOM中，先設置屬性再加入，無效；
　　　　　　　　// 2、src屬性需要像下面的方式添加，上面的兩種方式添加，無效；
　　　　　　　　imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
　　　　　　　　imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
　　　　　　}
　　　　});

　　})

 

　　說明：1）外部加個label是為了把讓用戶點擊的時候在范圍內的都會觸發input

　　　　　2）H5  input file上傳圖片，調用API:<input type="file" accept="image/*;capture=camera">直接調用相機
　　　　　　　　　　　　　　　　　　　　　　 <input type="file" accept="image/*" />調用相機、圖片或者相冊

　　　　　　　注：部分android機只能調用本地相冊，相機調用不了或者只能調用相機，不能調用相冊。

　　　　　3）此方法是網上的一種方法，做了兼容的，IE6以上都能正常運行。

 

2.第二種方法：MUI h5+

 　　不用引入mui.js或mui.min.js，直接在hbuilder這個IDE中新建移動app，然后在頁面中直接調用方法就行了，當然，需要在manifest.json中先配置權限，然后真機調試才能看到效果。點擊這里是拍照調用方法的文檔

function getImage(){
    var cameraObj = plus.camera.getCamera();
    cameraObj.captureImage(function(path){
        CompressImage(path)
    }, function(e){
        console.log('取消拍照');
    }, {
        filename:'_doc/pic/',
        index:1
    });
}
function CompressImage(path){
    plus.zip.compressImage( {
        src:path,
        dst:path,
        overwrite:true,
        quality:60,
        rotate:90
    }, function(event){
        var _src=event.target;
        mui.confirm("是否保存該圖片","溫馨提示",["否","是"],function(e){
            console.log(_src)
            if(e.index){
                plus.gallery.save(_src, function(evt){
                    $(".box").append('<img src="'+evt.file+'">');
                    mui.alert('保存成功'+evt.file);
                    
                }, function(err){
                    mui.alert('保存失敗: '+JSON.stringify(err));
                    
                });
            }
        })

        console.log(event.size)
    }, function(err){
        
    });
}

 說明： 

　　getImage（）是點擊拍照按鈕之后觸發的事件。CompressImage(path)是壓縮圖片的事件。

　　拍照上傳需要用到5+的api。plus.camera.getCamera()是獲取到camera攝像頭對象

　　該對象有三個方法，其中一個是captureImage，它有三個參數，captureImage(successCB, errorCB, option)

　　　　successCB：拍照操作成功的回調函數（必選）CameraSuccessCallback

　　　　errorCB：拍照操作失敗的回調函數（可選）CameraErrorCallback

　　　　option：攝像頭拍照參數（必選）CameraOption。

　　　　option這個對象的屬性：filename: 拍照或攝像文件保存的路徑；

　　　　　　　　　　　　　　　index: 拍照或攝像默認使用的攝像頭，1表示主攝像頭（后），2表示輔攝像頭（前）　

　

　　compressImage是圖片壓縮的方法，屬於5+里的zip接口。plus.zip.compressImage( options, successCB, errorCB)，它也有三個參數，具體的參數信息可查看這里。

  plus.gallery.save是保存文件到本地的方法，屬於5+里的gallery接口，plus.gallery.save( path, successCB, errorCB )。它也有三個參數，具體的參數信息可查看這里。

　在上面的compressImage方法中，我加入了rotate：90的屬性，是因為手持設備不同方向所拍攝的照片方向不同，照片的方向都會不同，但相冊中會自動糾正，這一問題在ios和android中都存在。
　一般你只要豎直拍攝的照片，在頁面上顯示的時候就會自動旋轉90度的樣子。所以這里強制旋轉90度，適用於大部分情況，但是如果拍攝的時候橫着拍，或者180度倒着拍就不行了。
　可以考慮使用Exif.js來獲取圖片的拍照方向，然后設置旋轉就能解決問題。

　拍照完成了，上傳的話，就可以用canvas把圖片編碼成base64，然后在后台解碼base64就行了。也可以考慮使用5+api中的uploader來上傳

　這里有我自己總結的 5+ runtime 常用api，里面有詳細的說明


第三種方法是通過form表單來實現：只需兩步
第一步：html

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" onchange="uploadImg(this,'behindeImg')" class="comFileBtn"  accept="image/*"/>
</form>

第二步：js 

//上傳圖片
//that是該input，imgName是圖片要顯示的src的位置
function uploadImg(that,imgName){
    var reads= new FileReader();
    var fileObj=that.files[0];
    var imageType = /^image\//;
    //是否是圖片，如果input沒加accept屬性，這里也可以判斷
    if (!imageType.test(fileObj.type)) {
        alert("請選擇圖片！");
        return;
    }
    //讀取完成
    reads.readAsDataURL(fileObj);
    reads.onload = function(e) {
        //圖片路徑設置為讀取的圖片
        $("#"+imgName).attr('src',e.target.result) ;
    };
}

 這樣，后台也可以通過讀取表單數據來獲取內容了