jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

日期：2020-06-09 栏目：程序人生浏览：次

图片上传步骤：

1.用户选择图片

2.将图片传入后台：用户选择图片的时候选择的是各种各样的，但是我们的网页显示图片大小是有限的，所以我们就要在用户选择图片之后将图片添加到后台进行压缩，压缩成我们想要的大小，之后再显示到页面才好

3.利用jcrop裁剪工具对图片进行裁剪并且实时预览

4.点击确定按钮将裁剪用到的参数传入后台，后台图片进行剪切，之后缩放成我们需要的格式

5.最后将图片路径传到前台进行展示

前台页面代码为：

1.选择图片

2.提交：首先大家知道文件上传的时候用到的标签为：<input type="file"/> 但是有时候我们需要用ajax提交文件并且异步提交，我们如果是用form表单提交的话就不是异步，这样我们回到页面就刷新页面，非常的不方便，但是现在ajax还不能支持文件提交的方式，这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件，代码为：

$("#fileUp").<span>ajaxSubmit</span>({ type: "POST", url:"/file/img/upload", dataType: "json", contentType:"application/json", success: function(parameter){ $("#target2").attr('src','/upload/'+parameter.fileName); $("#filePathInput").val('/upload/'+parameter.fileName); if($("#format").text()=="重新上传"){ jcrop_api.destroy() } $("#format").text("重新上传"); //启动jcrop支持 openJcrop('/upload/'+parameter.fileName); }, error : function(data) { alert("ajax传输发生错误！！！"); } });

这样就能将文件用ajax的方式提交到后台，注意这里用的是ajaxSubmit，这个方法对应jquery-form.js，后台代码为：

package com.quanshi.ums.gate.view.rest.controllers; import java.io.IOException; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.RequestParam; import org.springframework.web.bind.annotation.ResponseBody; import org.springframework.web.multipart.MultipartFile; import com.quanshi.ums.gate.persistence.entities.Parameters; import com.quanshi.ums.gate.view.rest.ImgEditor; /** * 图像上传和修改相关类 * @author kunpeng.zhao * */ @Controller @RequestMapping(value="/file") public class FileEditorController { <span> </span>ImgEditor imgEditor = new ImgEditor(); <span> </span>public String filePathFinal = ""; <span> </span>private Logger logger = LoggerFactory.getLogger(FileEditorController.class); <span> </span>@RequestMapping(value="/img/cutandscale",method=RequestMethod.POST) <span> </span>public @ResponseBody int cutAndscaleimg( <span> </span>@RequestParam("w") int w, <span> </span>@RequestParam("h") int h, <span> </span>@RequestParam("x") int x, <span> </span>@RequestParam("y") int y <span> </span>){ <span> </span>imgEditor.cut(filePathFinal,filePathFinal,x,y,w,h); <span> </span>imgEditor.scale(filePathFinal, filePathFinal, 110, 110, false); <span> </span>return 1; <span> </span>} <span> </span> <span> </span> @RequestMapping(value="/img/upload",method=RequestMethod.POST) public @ResponseBody Parameters addImage( <span> </span>@RequestParam("userphoto") MultipartFile file, <span> </span>HttpServletRequest request, <span> </span>HttpServletResponse response, <span> </span>HttpSession session <span> </span>){ <span> </span>String filePath = ""; <span> </span>try { <span> </span>//上传原图 <span> </span>filePath = imgEditor.uploadFile(file, request,session); <span> </span>filePathFinal = filePath; <span> </span>//将图片压缩成指定大小 <span> </span>imgEditor.zoomImage(filePath,filePath,400,400); <span> </span>} catch (IOException e) { <span> </span>e.printStackTrace(); <span> </span>} logger.info("filePath:" + filePath); Parameters parameter = new Parameters(); parameter.setFileName(imgEditor.getFileName(file,request,session)); <span> </span>return parameter; } }

我在这规定图片在前台展示的大小为400*400，用到的图片裁剪压缩等的工具类为：

转载注明出处：https://www.heiqu.com/wzgwzj.html

jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

相关推荐