移动端拍照实现

HTML:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header" style="height:54px;">
<h4 class="modal-title" id="myModalLabel">拍照<input id="takepicture" type="file" accept="image/*" capture="camera" style="opacity:0;width:100%;margin-top:-30px;"></h4>
</div>

<div class="modal-body"  style="height:54px;">从手机相册选择<img id="pic" src=""><input id="upload" name="file" accept="image/*" type="file" style="display:none;width:100%;margin-top:-30px;" /></div>
</div>
<div class="modal-content content-a" data-dismiss="modal" aria-hidden="true">取消</div>
</div>

</div>

JS:已经实现

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/layer.js" ></script>
<script type="text/javascript" src="js/content.js" ></script>
<script src="js/city-picker.data.js"></script>
<script src="js/city-picker.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
//拍照
var takePictureOnclick = function() {
var takePicture = document.getElementById('takepicture');
takePicture.click();
}
var takePicture = document.getElementById('takepicture');
var takePictureUrl = function() {
takePicture.onchange = function(event) {
var files = event.target.files,
file;
if(files && files.length > 0) {
file = files[0];
try {
var URL = window.URL || window.webkitURL;
var blob = URL.createObjectURL(file);　　 // 获取照片的文件流
compressPicture(blob);　　 // 压缩照片
} catch(e) {
try {
var fileReader = new FileReader();
fileReader.onload = function(event) {　　　　 // 获取照片的base64编码
compressPicture(event.target.result);　　 // 压缩照片
};
fileReader.readAsDataURL(file);
} catch(e) {
alert(common.MESSAGE.title.error, '拍照失败,请联系客服或尝试更换手机再试!');
}
}
}
}
}();
var compressPicture = function(blob) {
var quality = 0.5,
image = new Image();
image.src = blob;
image.onload = function() {
var that = this;
// 生成比例
var width = that.width,
height = that.height;
width = width / 4;
height = height / 4;
// 生成canvas画板
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width;
canvas.height = height;
ctx.drawImage(that, 0, 0, width, height);
// 生成base64,兼容修复移动设备需要引入mobileBUGFix.js
var imgurl = canvas.toDataURL('image/jpeg', quality);
// 修复IOS兼容问题
if(navigator.userAgent.match(/iphone/i)) {
var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: width,
maxHeight: height,
quality: quality
});
imgurl = canvas.toDataURL('image/jpeg', quality);
}
// 上传照片
uploadPicture(imgurl);
};
};
//从手机相册中选择
$(function() {
$("#pic").click(function() {
$("#upload").click(); //隐藏了input:file样式后，点击头像就可以本地上传
$("#upload").on("change", function() {
var objUrl = getObjectURL(this.files[0]); //获取图片的路径，该路径不是图片在本地的路径
if(objUrl) {
$("#ImgPr").attr("src", objUrl); //将图片路径存入src中，显示出图片
}
});
});
});
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null;
if(window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if(window.Url != undefined) { // mozilla(firefox)
url = window.Url.createObjectURL(file);
} else if(window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}



var userid = window.localStorage["userId"];
function jz() {
$.post(URL + "user/queryUser", { "user.user_id": userid }, function(data) {
$("#name").val(data.user_name);
$("#account").html(data.user_account);
$("#idnum").val(data.user_idnumber);
var are = data.user_area;
if(null != are){
var arr = are.split("/");
$("#city-picker3").citypicker("reset");
            $("#city-picker3").citypicker("destroy");
            $("#city-picker3").citypicker({
              province: arr[0],
              city: arr[1],
              district: arr[2]
            });
}
});
}
function tj() {
var name = $("#name").val();
var area = $("#city-picker3").val();
var idnum = $("#idnum").val();
var par = { "user.user_id": userid, "user.user_name": name, "user.user_area": area, "user.user_idnumber": idnum };
$.post(URL + "user/update", par, function(data) {
console.log(data);
if("01" == data.resultCode) {
parent.layer.open({
time:2000,
content: "修改成功!",
end: function() {
window.location.href = "personal.html";
}
});
} else {
layer.alert("修改失败!");
}
});
}
</script>