开发微信服务,有个上传头像的功能,前端用html5的方法来上传头像html
<img id="babyHead" src="$session.getAttribute('picUrl')" style="width:74px;height:74px;border-radius:37px;"/> <label class="camera"><i class="fa fa-camera" aria-hidden="true"></i> <input id="f1" name="f1" class="weui_uploader_input" type="file" capture="camera" accept="image/*" multiple="">
.on("change", "#f1", function () { $("#loadingToast").show() var fileName = $(this).val(); if (fileName.length > -1) { jQuery.ajaxFileUpload({ url:jQuery("#confirmUrl").val(), type: 'post', secureuri:false, fileElementId:'f1', data:{ type:'5'}, dataType:"json", success: function(data, status){ $('#babyHead').attr('src',data.url); $('#headUrl').val(data.url); $("#loadingToast").hide(); },error:function(data,status,e){ alert(e); } }); } else { alert("请选择图片上传!"); } });
上传到后端的头像居然会出现各类翻转,基本就是90度的倍数。前端
查找后得知是ios的拍照片时记录了拍摄的翻转角度。为了把这个角度纠正过来,在java中须要调用metadata-extractorhtml5
maven引用以下java
<dependency> <groupId>com.drewnoakes</groupId> <artifactId>metadata-extractor</artifactId> <version>2.9.1</version> </dependency>
网上不少引用2.3.1的作法,实际上已经不能用了,在2.9.1中原先老的ExifDirector变成了n个directory,我经过for循环挨个试出来,当ExifDirector为ExifIFD0Directory时,才能够调用ExifDirectoryBase.TAG_ORIENTATION来判断翻转的角度,具体方法以下面的代码,个人思路是获得翻转的数值:6,3,8来获得须要右转的角度:90,180,270,而后调用Graphics2D的rotate方法来翻转ios
1.获得角度ajax
private int getRotateAngleForPhoto(String filePath) { int angle = 0; File imgFile = new File(filePath); try { Metadata metadata = ImageMetadataReader.readMetadata(imgFile); for (Directory directory : metadata.getDirectories()) { if ("ExifIFD0Directory".equalsIgnoreCase(directory.getClass() .getSimpleName())) { if (directory .containsTag(ExifDirectoryBase.TAG_ORIENTATION)) { // Exif信息中方向 int orientation = directory .getInt(ExifDirectoryBase.TAG_ORIENTATION); logger.info("orientation=" + orientation); switch (orientation) { case 6: angle = 90; break; case 3: angle = 180; break; case 8: angle = 270; break; default: return 0; } } } } } catch (Exception e) { // TODO Auto-generated catch block e.printStackTrace(); } return angle; }
2.调用的翻转方法apache
import java.awt.Graphics2D; import java.awt.Image; import java.awt.Transparency; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import javax.imageio.ImageIO; import org.apache.commons.logging.Log; import org.apache.commons.logging.LogFactory; /** * 向右旋转angle角度 * @param img * @param angle * @return */ public static void rotate(File image, int angle,String targetFolderPath,String targetFileName) throws IOException { BufferedImage img = ImageIO.read(image); int w = img.getWidth(); int h = img.getHeight(); BufferedImage dimg = new BufferedImage(w, h, img.getType()); Graphics2D g = dimg.createGraphics(); g.rotate(Math.toRadians(angle), w / 2, h / 2); g.drawImage(img, null, 0, 0); commonIoWrite(targetFolderPath, targetFileName, dimg, g); }
3.根据翻转的角度来调用对应的rotate方法json
int angle = getRotateAngleForPhoto(sourcePath); if (getRotateAngleForPhoto(sourcePath) > 0) { ImageUtil.rotate(new File(smallPath),angle, path, smallFileName); }
其中smallPath是源文件地址,angle是向右翻转角度,path是目标文件夹,smallFileName是最终的文件名
后端