移动端web头像上传实现截取和照片方向修复

1 <div class="header-img">
2 <span id="uploadImg"><!-- 自定义头像上传 -->
3 </span>
4 <input accept="image/gif,image/jpeg,image/jpg,image/png,image/bmp" type="file" style="display:none;" id="uploadImgInput">
5 <img id="myimg" src="${ctx }/resource/wo/img/man_1.png">
6 </div>

  1 //头像上传
  2 $("#uploadImg").on(‘click‘,function(){
  3 //input file的change事件只能触发一次，因此每次点击头像后都将原input绑定的事件解除，重新赋值并绑定。
  4 $("#uploadImgInput").off(‘change‘);
  5 $(‘#uploadImgInput‘).val(‘‘);
  6 $("#uploadImgInput").on(‘change‘,uploadImgInputChangeHandler);
  7 $("#uploadImgInput").click();//手动触发input点击事件
  8 });
  9 //头像上传点击事件触发方法
 10 function uploadImgInputChangeHandler(){
 11 var input = this;
 12 if (input.files && input.files[0]) {
 13 var reader = new FileReader();
 14 reader.readAsDataURL(input.files[0]); //获取选中的第一个图片文件
 15 //获取照片方向角属性，也可用于用户旋转控制
 16 EXIF.getData(input.files[0], function() {
 17 // alert(EXIF.pretty(this));
 18 EXIF.getAllTags(this);
 19 //alert("Orientation:"+EXIF.getTag(this, ‘Orientation‘));
 20 pageData.Orientation = EXIF.getTag(this, ‘Orientation‘); //将方向信息存入对象中
 21 //return;
 22 });
 23 reader.onload = function (e) {
 24 $("#displayImgDiv").show();
 25 $("#popupContent").hide();
 26 $(‘#displayImg‘).attr(‘src‘, e.target.result);
 27 $(‘#displayImg‘)[0].onload = function(){
 28 //调用Jcrop进行图像截取，具体参数配置可查看相关教程
 29 $(‘#displayImg‘).Jcrop( {
 30 allowSelect: true,
 31 allowMove: true,
 32 allowResize: true,
 33 setSelect: [ 10, 10, screenWidth-10, screenWidth-10],
 34 aspectRatio: 1 ,
 35 minSize: [200, 200 ],
 36 maxSize: [screenWidth, screenWidth ],
 37 dragEdges: true,
 38 onSelect: updateCoords,//截取框每次移动后的调用的方法
 39 trackDocument: false
 40 } ,function(){
 41 pageData.jcropApi = this;//将jcrop对象存入全局变量中，以便后续获取
 42 }
 43 );
 44 }
 45 }
 46 }
 47 }
 48  
 49 //jcrop选框选择后处理事件
 50 function updateCoords(c){
 51 var img = document.getElementById("displayImg");
 52 var canvas = document.createElement(‘canvas‘);
 53 var ctx = canvas.getContext("2d");
 54 var imgW_ori = eval(img.width);//无视方向后的img标签中图片的原始方向角度的宽
 55 var imgH_ori = eval(img.height);//无视方向后的img标签中图片的原始方向角度的高
 56 var imgW_css = $(img).width();
 57 var imgH_css = $(img).height();
 58 //修复手机图像方向问题
 59 //1、坐标确定：由于img标签在浏览器中会根据Orientation属性自动调整展示方向
 60 //故修复方向实际上则是根据当前图像截取框与伪修复图像整体的位置，判断应该截取得区域于真实图片中的位置关系后，
 61 //对相关数据进行处理，canvas的drawImage一共有9个传参，其中需要根据方向调整的有4个：
 62 var sx,sy,sw,sh,wRatio,hRatio,tx,ty,degree;
 63 var Orientation = eval(pageData.Orientation);
 64 if(Orientation != 1 && typeof(Orientation)!="undefined" && Orientation != "" ){
 65 //如果方向角不为1，都需要进行旋转
 66 switch(Orientation){
 67 case 6://需要顺时针（向左）90度旋转
 68 //对于图片缩放过后，需获取图片实际缩放比例
 69 wRatio = imgW_ori/imgH_css;
 70 hRatio = imgH_ori/imgW_css;
 71 //alert(imgW_ori+","+imgH_ori+","+imgW_css+","+imgH_css);
 72 sx = c.y*wRatio;
 73 sy = (imgW_css-c.x-c.w)*hRatio;
 74 sw = c.h*wRatio;
 75 sh = c.w*hRatio;
 76 degree = 90 * Math.PI / 180;
 77 tx = 0;
 78 ty = -200;
 79 /* tx = 0;
 80 ty = -imgH_ori;
 81 canvas.width = imgH_ori;
 82 canvas.height = imgW_ori; */
 83 break;
 84 case 8://需要逆时针（向右）90度旋转
 85 wRatio = imgW_ori/imgH_css;
 86 hRatio = imgH_ori/imgW_css;
 87 sx = (imgH_css-c.y-c.h)*wRatio;
 88 sy = c.x*hRatio;
 89 sw = c.h*wRatio;
 90 sh = c.w*hRatio;
 91 degree = 3 * 90 * Math.PI / 180;
 92 tx = -200;
 93 ty = 0;
 94 /* tx = -imgW_ori;
 95 ty = 0;
 96 canvas.width = imgH_ori;
 97 canvas.height = imgW_ori; */
 98 break;
 99 case 3://需要180度旋转
100 wRatio = imgW_ori/imgW_css;
101 hRatio = imgH_ori/imgH_css;
102 sx = (imgW_css-c.x-c.w)*wRatio;
103 sy = (imgH_css-c.y-c.h)*hRatio;
104 sw = c.w*wRatio;
105 sh = c.h*hRatio;
106 degree = Math.PI;
107 tx = -200;
108 ty = -200;
109 /*tx = -imgW_ori;
110 ty = -imgH_ori;
111 canvas.width = imgW_ori;
112 canvas.height = imgH_ori; */
113 break;
114 }
115 }else{
116 wRatio = imgW_ori/imgW_css;
117 hRatio = imgH_ori/imgH_css;
118 sx = c.x*wRatio;
119 sy = c.y*hRatio;
120 sw = c.w*wRatio;
121 sh = c.h*hRatio;
122 tx = 0;
123 ty = 0;
124 }
125 var tempImage = new Image();//新建一个image对象，用于存放不带exif信息的图像数据，新建image的原因是若直接使用原来的image对象，会有图片展示区域与真实区域错位不一致从而导致无法获取正确的图像源数据
126 tempImage.src = img.src;
127 tempImage.onload = function(){//确保图像加载完毕后再进行下一步，不然可能会导致获取不到图片宽高
128 //将canvas画布的大小设为200x200大小并裁剪成圆形作为头像
129 canvas.width = 200;
130 canvas.height = 200;
131 ctx.arc(100, 100, 100, 0 ,2*Math.PI);
132 ctx.clip();
133 //alert("Orientation:"+Orientation+","+sx+","+sy+","+sw+","+sh+","+tx+","+ty+","+degree);
134 ctx.drawImage(tempImage, sx, sy, sw, sh, 0, 0, 200, 200); //在canvas中将裁剪后图片重新画出来
135 //ctx.drawImage(img, 0, 0, 3024, 4032, 0, 0, 200, 200);
136 var base64 = canvas.toDataURL(‘image/jpeg‘,0.5);
137 //window.open(base64);
138 //2、接下来进行旋转
139 var resultImg = new Image();//新建一个image对象，用于存放截图后的数据
140 resultImg.src = base64;
141 resultImg.onload = function(){
142 if(degree){
143 ctx.rotate(degree);//对方向进行修正
144 }
145 ctx.drawImage(resultImg, tx, ty);
146 pageData.base64 = canvas.toDataURL(‘image/jpeg‘);//将base64码存入全局变量中
147 //window.open(pageData.base64);
148 }
149 }
150 }