正文
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) ;
};
}
这样，后台也可以通过读取表单数据来获取内容了
