移动端上传头像-相册、拍摄-旋转

<div id="upPic">
<div id="upPicCont">
<img id="susPic" src=""/>
</div>
<canvas id="myCanvas" style="50px;height: 50px;display: none;"></canvas>
<img style="display: none;" alt="preview" src="" id="myImage"/>
<div class="buttonCommonDiv">
<input type="file" id="xFile" capture="camera" accept="image/*" class="xFile" >
<a href="javascript:;" id="shoot" class="buttonCommon">拍照</a>
</div>
<div class="buttonCommonDiv">
<input type="file" id="imgInp" accept="image/*" class="imgInp" >
<a href="javascript:;" id="camera" class="buttonCommon">从相册中选择</a>
</div>
<a href="javascript:;" id="picConcel" class="buttonCommon">取消</a>
<div class="weui-loadmore" style="display: none;">
<i class="weui-loading"></i>
<span class="weui-loadmore__tips" style="color: #fff;">正在上传</span>
</div>
</div>

　　var file;

　　//拍摄
$("#xFile").change(function(){
readFile(this);
if(file){
EXIF.getData(file, function() {
var Orientation = EXIF.getTag(this, 'Orientation');
if(Orientation && Orientation != 1){//图片角度不正确
fileFun(Orientation,file)
upPic (file);
}else{
//不需处理直接上传
fileFun(Orientation,file)
upPic (file);
}
});
}
});

//相册
$("#imgInp").change(function(){
readFile(this);
if(file){
EXIF.getData(file, function() {
var Orientation = EXIF.getTag(this, 'Orientation');
if(Orientation && Orientation != 1){//图片角度不正确
fileFun(Orientation,file)
upPic (file);
}else{
//不需处理直接上传
fileFun(Orientation,file)
upPic (file);
}
});
}
});

function readFile(obj){
// 获取input里面的文件组
file=obj.files[0];
}

//图片处理函数
function fileFun(Orientation,file){
var reader = new FileReader();
var image = new Image();
reader.readAsDataURL(file);

reader.onload = function (file) {
image.src = file.target.result;
image.onload = function () {
var imgWidth = this.width,
imgHeight = this.height; //获取图片宽高
var canvas=document.getElementById("myCanvas");
var ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
if(Orientation && Orientation != 1){
switch(Orientation){
case 6: // 旋转90度
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(Math.PI / 2);
ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
break;
case 3:// 旋转180度
ctx.rotate(Math.PI);
ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
break;
case 8: // 旋转-90度
canvas.width = imgHeight;
canvas.height = imgWidth;
ctx.rotate(3 * Math.PI / 2);
ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
break;
}
}else{
ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
}
var dataurl=canvas.toDataURL("image/jpeg", 0.2);//canvase 转为base64
$("#myImage").attr("src",dataurl);
$("#myImage").change(function(){
readFile(this);
});
}
}
}

// 上传图片
function upPic (file){
var formData = new FormData();
formData.append("file",file);
formData.append("fileType",'image');
formData.append("token",getCookie("token"));

$('.weui-loadmore').show();
document.body.onselectstart = function () {
return false;
};

$.ajax({
url:'${base}/mobile/file/upload.jhtml',
type:"POST",
data:formData,
processData:false,
contentType:false,
success:function(response){
$('.weui-loadmore').hide();

if(response.state === 'SUCCESS'){
$('.personalHeadSculpture').attr('src', response.url);
picConcel();
}else{
infoAlert("连接网络失败，请重试。");
picConcel();
}
},
error:function(e){
infoAlert("连接网络失败，请重试。");
picConcel();
}
});
}

</script>