MUI 拍照或选取照片上传作为头像

Posted 2020-08-19 努力┗(｀O′)┛奋斗！

1.第一种方法是用H5来实现的

　　html：

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

 

　　JQ：

 1 $(function(){
 2 
 3 　　　　$("#head_img_change").change(function() {
 4 　　　　　　var $file = $(this);
 5 　　　　　　var fileObj = $file[0];
 6 　　　　　　var windowURL = window.URL || window.webkitURL;
 7 　　　　　　var dataURL;
 8 　　　　　　var $img = $("#headimg");
 9 　　　　　　if(fileObj && fileObj.files && fileObj.files[0]){
10 　　　　　　　　dataURL = windowURL.createObjectURL(fileObj.files[0]);
11 　　　　　　　　$img.attr(\'src\',dataURL);
12 　　　　　　}else{
13 　　　　　　　　dataURL = $file.val();
14 　　　　　　　　var imgObj = document.getElementById("headimg");
15 　　　　　　　　// 1、在设置filter属性时，元素必须已经存在在DOM树中，动态创建的Node，也需要在设置属性前加入到DOM中，先设置属性再加入，无效；
16 　　　　　　　　// 2、src属性需要像下面的方式添加，上面的两种方式添加，无效；
17 　　　　　　　　imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
18 　　　　　　　　imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
19 　　　　　　}
20 　　　　});
21 
22 　　})

 

　　说明：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) ;
    };
}

 这样，后台也可以通过读取表单数据来获取内容了