问题:iOS手机上传图片,竖向翻转,横向不翻转;安卓手机上传图片不翻转。
解决:
1、下载exif.js文件(https://download.csdn.net/download/qq_42617840/90493067)
2、js中调用获取旋转角度
<input type="file" class="hide" id="upload" onchange="changepic(this)"
accept="image/jpg,image/jpeg,image/png,image/PNG" name="picpath" >
<script src="js/exif.js"></script>
<script type="text/javascript">
function changepic() {
var reads = new FileReader();
reads.readAsDataURL(f);
reads.onload = function(e) {
const dataUrl = e.target.result;
const img = new Image();
img.src = dataUrl;
img.onload = function() {
EXIF.getData(img, function() {
const orientation = EXIF.getTag(this, "Orientation");
let rotationAngle = 0;
switch (orientation) {//旋转角度(顺时针)
case 3:
rotationAngle = 180;
break;
case 6:
rotationAngle = 90;
break;
case 8:
rotationAngle = -90;
break;
default:
rotationAngle = 0;
break;
}
var form = new FormData();
form.append("picpath", f);
form.append("rotationAngle", rotationAngle);
$.ajax({
url : 'UploadOnePhoto.mdq',
type : 'POST',
data : form,
processData : false,
contentType : false,
success : function(data) {
……//上传后操作
}
});
}
}
</script>
3、Java后台根据前端传入的旋转角度调整
public class UploadAction extends BaseAction {
private File picpath;
private String picpathFileName; // 文件名
public void UploadOnePhoto() {
JSONObject validatorMsg = new JSONObject();
try {
boolean vertify = true;
String imgfileType = null;
if (picpath == null) {
validatorMsg.put("result", 0);
validatorMsg.put("msg", "文件不存在");
vertify = false;
} else {
imgfileType = ImageUtils.getFileType(picpathFileName);
imgfileType = imgfileType.toLowerCase();
if (!"jpg".equals(imgfileType) && !"png".equals(imgfileType)
&& !"jpeg".equals(imgfileType) && !"gif".equals(imgfileType)) {
validatorMsg.put("result", 0);
validatorMsg.put("msg", "上传文件格式不正确");
vertify = false;
} else {
long s = FileUtil.getFileSizes(picpath);
if (s > (1048576 * 10)) {//10M
validatorMsg.put("result", 0);
validatorMsg.put("msg", "文件不能大于10M");
vertify = false;
}
}
}
if (vertify) {
try {
int rotationAngle = ParamsUtil.getInteger(getRequest(), "rotationAngle"); //旋转角度
boolean tumable = ParamsUtil.getBoolean(getRequest(),
"tumable");
User user = UserContext.getContext().getUser();
// 用户上传默认地址
String fileImgPath = sc.getValue("BannerPhoto");
if (Validator.isNotNull(fileImgPath)) {
// 获得照片路径
String servletPath = ServletActionContext
.getServletContext().getRealPath("/");
File baseDir = new File(servletPath, fileImgPath);
if (!baseDir.isDirectory()) {
baseDir.mkdirs();
}
try {
File destFile = ImageUtils.saveFile(picpath,
baseDir, picpathFileName, picpathFileName);
if(rotationAngle==0&&imgfileType.equals("jpeg")){//前端获取旋转角度为0且图片为JPEG时后端再确认旋转角度(双重保险)
rotationAngle = PicUtil.getRotateAngleForPhoto(picpath.getPath());
}
if(rotationAngle!=0){//翻转图片
PicUtil.rotatePhonePhoto(destFile.getPath(), rotationAngle);
}
validatorMsg.put("result", 1);
validatorMsg.put("msg", "图片上传成功");
validatorMsg.put("photo", destFile.getName());
validatorMsg.put("path", fileImgPath);
} catch (IOException e) {
validatorMsg.put("result", 0);
validatorMsg.put("msg", "图片上传失败");
}
} else {
validatorMsg.put("result", 0);
validatorMsg.put("msg", "图片上传失败");
}
} catch (Exception e) {
e.printStackTrace();
validatorMsg.put("result", 0);
validatorMsg.put("msg", "图片上传失败");
}
}
} catch (Exception e) {
e.printStackTrace();
validatorMsg.put("result", 0);
validatorMsg.put("msg", "图片上传失败");
}
PrintWriter pw = null;
try {
pw = this.getPrintWriter();
pw.write(validatorMsg.toString());
pw.flush();
pw.close();
} catch (IOException e) {
log.info("--UploadOnePhoto error!");
}
}
public File getPicpath() {
return picpath;
}
public void setPicpath(File picpath) {
this.picpath = picpath;
}
public String getPicpathFileName() {
return picpathFileName;
}
public void setPicpathFileName(String picpathFileName) {
this.picpathFileName = picpathFileName;
}
}