ios图片上传翻转有关问题解决
ios图片上传翻转问题解决
开发微信服务,有个上传头像的功能,前端用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.得到角度
privateintgetRotateAngleForPhoto(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) {
case6:
angle = 90;
break;
case3:
angle = 180;
break;
case8:
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方法
intangle = getRotateAngleForPhoto(sourcePath);
if (getRotateAngleForPhoto(sourcePath) > 0) {
ImageUtil.rotate(new File(smallPath),angle, path, smallFileName);
}
其中smallPath是源文件地址,angle是向右翻转角度,path是目标文件夹,smallFileName是最终的文件名
开发微信服务,有个上传头像的功能,前端用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.得到角度
privateintgetRotateAngleForPhoto(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) {
case6:
angle = 90;
break;
case3:
angle = 180;
break;
case8:
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方法
intangle = getRotateAngleForPhoto(sourcePath);
if (getRotateAngleForPhoto(sourcePath) > 0) {
ImageUtil.rotate(new File(smallPath),angle, path, smallFileName);
}
其中smallPath是源文件地址,angle是向右翻转角度,path是目标文件夹,smallFileName是最终的文件名