ios图片上传翻转问题解决

最新推荐文章于 2024-04-18 10:52:11 发布

weixin_34146986

最新推荐文章于 2024-04-18 10:52:11 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

文章标签：移动开发 swift javascript ViewUI

原文链接：https://my.oschina.net/u/360078/blog/679536

本文介绍了解决iOS设备上传头像时出现翻转现象的方法。通过使用metadata-extractor解析图片元数据，确定翻转角度，并利用Java图形处理API进行校正。

2019独角兽企业重金招聘Python工程师标准>>>

开发微信服务，有个上传头像的功能，前端用html5的方法来上传头像

<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-extractor

maven引用如下

<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方法来翻转

1.得到角度

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.调用的翻转方法

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方法

int angle = getRotateAngleForPhoto(sourcePath);
if (getRotateAngleForPhoto(sourcePath) > 0) {
	ImageUtil.rotate(new File(smallPath),angle, path, smallFileName);
}

其中smallPath是源文件地址，angle是向右翻转角度，path是目标文件夹，smallFileName是最终的文件名

转载于:https://my.oschina.net/u/360078/blog/679536