zkp小飞 通过本文主要向大家介绍了jcrop,裁剪上传图片,jcrop,裁剪后上传,java,jcrop,图片裁剪等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文介绍了头像裁剪上传功能，用到的技术有 jQuery，springmvc，裁剪插件用的是jcrop（中间遇到很多坑，最终跨越）。
图片上传步骤：
1.用户选择图片
2.将图片传入后台：用户选择图片的时候选择的是各种各样的，但是我们的网页显示图片大小是有限的，所以我们就要在用户选择图片之后将图片添加到后台进行压缩，压缩成我们想要的大小，之后再显示到页面才好
3.利用jcrop裁剪工具对图片进行裁剪并且实时预览
4.点击确定按钮将裁剪用到的参数传入后台，后台图片进行剪切，之后缩放成我们需要的格式
5.最后将图片路径传到前台进行展示
前台页面代码为：
<script src="js-jcrop/jquery.min.js"></script>
<script src="js-jcrop/jquery.Jcrop.js"></script>
<script src="js/jquery-form.js"></script>
<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
<style type="text/css">
/* 控制预览区域大小*/
#preview-pane .preview-container {
width: 110px;
height: 110px;
overflow: hidden;
}
#targetDiv{
width: 400px;
height: 400px;
background-color:#f7fdff;
}
</style>
<dl class="dialogBox D_uploadLogo">
<dt class="dialogHeader">
<span class="title">头像上传</span>
</dt>
<dd class="dialogBody">
<dl class="bisinessLogo">
<dt class="title">预览</dt>
<dd class="img">
<div id="preview-pane">
<div class="preview-container">
<img src="" id="target2" class="jcrop-preview" alt="未选择图片" />
</div>
</div>
</dd>
<dd class="tc">尺寸：110*110px</dd>
</dl>
<dl class="bisinessInfo">
<dt class="btnBox02">
<form id="fileUp" action="/file/img/upload" method="post" enctype="multipart/form-data" target="ifm">
<a class="btnGray" href="javascript:;">
<span class="text" id="format">选择图片</span>
<b class="bgR"></b>
<input type="file" id="file_upload" class="inputFile" name="userphoto"/>
<input type="hidden" id="w" name="w"/>
<input type="hidden" id="h" name="h"/>
<input type="hidden" id="x" name="x"/>
<input type="hidden" id="y" name="y"/>
</a>
</form>
</dt>
<dd class="info">
请从本地选择一张照片，支持jpg,png格式 <span id="msg"></span>
<div id="targetDiv">
<img src="" id="target" width="400" height="400" alt="未选择图片"/>
</div>
</dd>
</dl>
</dd>
<input type="hidden" id="filePathInput" value=""/>
<dd class="dialogBottom">
<a class="btnBlue btn_confirm" href="javascript:;" onclick="photoSummit();"><span class="text">确定</span><b class="bgR"></b></a>
<a class="btnGray btn_cancel" href="javascript:;" onclick="hideDialog();"><span class="text">取消</span><b class="bgR"></b></a>
</dd>
</dl>
1.选择图片
<img src="" id="target" width="400" height="400" alt="未选择图片"/>
2.提交：首先大家知道文件上传的时候用到的标签为：<input type="file"/> 但是有时候我们需要用ajax提交文件并且异步提交，我们如果是用form表单提交的话就不是异步，这样我们回到页面就刷新页面，非常的不方便，但是现在ajax还不能支持文件提交的方式，这时候我们就用到了jquery-form.js,这个文件支持我们用ajax提交文件，代码为：
$("#fileUp").<span style="color:#ff0000;">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 style="white-space:pre"> </span>ImgEditor imgEditor = new ImgEditor();
<span style="white-space:pre"> </span>public String filePathFinal = "";
<span style="white-space:pre"> </span>private Logger logger = LoggerFactory.getLogger(FileEditorController.class);
<span style="white-space:pre"> </span>@RequestMapping(value="/img/cutandscale",method=RequestMethod.POST)
<span style="white-space:pre"> </span>public @ResponseBody int cutAndscaleimg(
<span style="white-space:pre"> </span>@RequestParam("w") int w,
<span style="white-space:pre"> </span>@RequestParam("h") int h,
<span style="white-space:pre"> </span>@RequestParam("x") int x,
<span style="white-space:pre"> </span>@RequestParam("y") int y
<span style="white-space:pre"> </span>){
<span style="white-space:pre"> </span>imgEditor.cut(filePathFinal,filePathFinal,x,y,w,h);
<span style="white-space:pre"> </span>imgEditor.scale(filePathFinal, filePathFinal, 110, 110, false);
<span style="white-space:pre"> </span>return 1;
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>
<span style="white-space:pre"> </span>
@RequestMapping(value="/img/upload",method=RequestMethod.POST)
public @ResponseBody Parameters addImage(
<span style="white-space:pre"> </span>@RequestParam("userphoto") MultipartFile file,
<span style="white-space:pre"> </span>HttpServletRequest request,
<span style="white-space:pre"> </span>HttpServletResponse response,
<span style="white-space:pre"> </span>HttpSession session
<span style="white-space:pre"> </span>){
<span style="white-space:pre"> </span>String filePath = "";
<span style="white-space:pre"> </span>try {
<span style="white-space:pre"> </span>//上传原图
<span style="white-space:pre"> </span>filePath = imgEditor.uploadFile(file, request,session);
<span style="white-space:pre"> </span>filePathFinal = filePath;
<span style="white-space:pre"> </span&g