解决图片上传翻转问题

问题: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后台根据前端传入的旋转角度调整

      翻转图片工具类:https://download.csdn.net/download/qq_42617840/90498323

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;
	}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值