解决移动端上传图片出现旋转的问题并且压缩图片上传

 

<div class="studentPic">
<span class="spanTitle">学生证照片</span>
<span class="spanImg"><img class="studentImg" src="img/addPic.jpg" /><input type="file" id="studentIdInput" class="personalPic" onchange="changestudentId(event)" accept="image/jpg,image/jpeg,image/png,image/PNG"></span>
</div>

 

function changestudentId(evt){//身份证正面
var imgFile = evt.target.files[0];
var orientation = null;
EXIF.getData(imgFile, function() {    //EXIF文件需要自己下载引入
orientation = EXIF.getTag(this, 'Orientation');
var reader = new FileReader();
reader.readAsDataURL(imgFile);
reader.onload = function(){
var result = this.result;
var img = $('.studentImg')[0];
img.src = result;
img.onload = function(){
imgArr[2] = compressAndRotateImg(img,300,0.6,orientation);  //压缩图片并且旋转图片的关键函数
};
}
});
}

/*
* img:图片img元素
* width:压缩的图片的宽度
* quality:图片的质量
* orientation:旋转的角度值
*/
function compressAndRotateImg(img,width,quality,orientation){ //图片压缩加旋转
var height=width/img.width*img.height;
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = width+20;
canvas.height = height+20;
if(orientation=='8'){
ctx.rotate(-90*Math.PI/180);
}else if(orientation=='3'){
ctx.rotate(-180*Math.PI/180);
}else if(orientation=='6'){
ctx.rotate(-270*Math.PI/180);
}
var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
for(var i = 0; i < imageData.data.length; i += 4) {
// 当该像素是透明的,则设置成白色
if(imageData.data[i + 3] == 0) {
imageData.data[i] = 255;
imageData.data[i + 1] = 255;
imageData.data[i + 2] = 255;
imageData.data[i + 3] = 255;
}
}
ctx.putImageData(imageData, 0, 0);
if(orientation=='8'){
ctx.drawImage(img, -width, 0,width,height);
}else if(orientation=='3'){
ctx.drawImage(img, -width, -height,width,height);
}else if(orientation=='6'){
ctx.drawImage(img, 0, -height,width,height);
}else{
ctx.drawImage(img, 0, 0,width,height);
}
var base64 = canvas.toDataURL('image/jpeg', quality);
return base64
}