newImg('.rich_img'); function newImg(className) { var Orientation=1; var imageObj = new Image(); imageObj.setAttribute('crossOrigin', 'anonymous');//解决图片跨域问题,跨域会导致toDataURL失败 imageObj.src = $(className).attr('src'); imageObj.οnlοad=function(){ var Orientation=1; var cvs=document.createElement('canvas'); var ctx=cvs.getContext('2d'); var scale=1;//预留压缩比 var size=this.size; cvs.width=this.width*scale; cvs.height=this.height*scale;//计算等比缩小后图片宽高 EXIF.getData(imageObj,function() { Orientation=EXIF.getTag(this,"Orientation"); if(Orientation&&Orientation!=1){ switch(Orientation){ /** *这边主要是获取到要加载标签的宽和高,用来给画布设置大小,这里cvs是预支的画布,ctx是重画的图像。 */ case 6:// 旋转90度 var fatherWidth=parseFloat($(className).css('width')); var fatherheight=parseFloat($(className).css('height')); scale=fatherWidth/this.width; heightScale=fatherheight/this.height; cvs.width=fatherheight*1; var x=this.height*scale/2; //旋转后的画布高度 cvs.height=fatherWidth; ctx.rotate(Math.PI/2); // (0,-imgHeight) 获得的起始点 ctx.drawImage(this,0,-this.height*scale-(fatherWidth/1.4-x),fatherWidth,fatherheight); break; case 3:// 旋转180度 ctx.rotate(Math.PI); ctx.drawImage(this,this.width*scale,-this.height*scale,this.width*scale,this.height*scale); break; case 8:// 旋转-90度 cvs.width=this.height*scale; cvs.height=this.width*scale; ctx.rotate(3*Math.PI/2); ctx.drawImage(this,-this.width*scale,0,this.width*scale,this.height*scale); break; } }else{ ctx.drawImage(this,0,0,cvs.width,cvs.height); } var newImageData=cvs.toDataURL(this,1); //重新定向加载url地址 $(className).attr('src',newImageData); }); }; }
注:浏览器访问和手机访问会有所不同,画布宽高还是要根据实际调整!!! 需引入exif.js