Posted in Javascript onNovember 05, 2016
本文介绍了头像裁剪上传功能，用到的技术有 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>//将图片压缩成指定大小
<span style="white-space:pre"> </span>imgEditor.zoomImage(filePath,filePath,400,400);
<span style="white-space:pre"> </span>} catch (IOException e) {
<span style="white-space:pre"> </span>e.printStackTrace();
<span style="white-space:pre"> </span>}
logger.info("filePath:" + filePath);
Parameters parameter = new Parameters();
parameter.setFileName(imgEditor.getFileName(file,request,session));
<span style="white-space:pre"> </span>return parameter;
}
}
我在这规定图片在前台展示的大小为400*400，用到的图片裁剪压缩等的工具类为：
package com.quanshi.ums.gate.view.rest;
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException;
import java.text.SimpleDateFormat;
import java.util.Date;
import javax.imageio.ImageIO;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import org.springframework.security.core.context.SecurityContextHolder;
import org.springframework.web.multipart.MultipartFile;
public class ImgEditor {
/**
* 改变图片尺寸
* @param srcFileName 源图片路径
* @param tagFileName 目的图片路径
* @param width 修改后的宽度
* @param height 修改后的高度
*/
public void zoomImage(String srcFileName,String tagFileName,int width,int height){
try {
BufferedImage bi = ImageIO.read(new File(srcFileName));
BufferedImage tag=new BufferedImage(width,height, BufferedImage.TYPE_INT_RGB);
tag.getGraphics().drawImage(bi, 0, 0, width, height, null);
ImageIO.write(tag, "jpg", new File(tagFileName));//画图
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 缩放图像（按高度和宽度缩放）
* @param srcImageFile 源图像文件地址
* @param result 缩放后的图像地址
* @param height 缩放后的高度
* @param width 缩放后的宽度
* @param bb 比例不对时是否需要补白：true为补白; false为不补白;
*/
public void scale(String srcImageFile, String result, int height, int width, boolean bb) {
try {
double ratio = 0.0; // 缩放比例
File f = new File(srcImageFile);
BufferedImage bi = ImageIO.read(f);
Image itemp = bi.getScaledInstance(width, height, bi.SCALE_SMOOTH);
// 计算比例
if ((bi.getHeight() > height) || (bi.getWidth() > width)) {
if (bi.getHeight() > bi.getWidth()) {
ratio = (new Integer(height)).doubleValue()
/ bi.getHeight();
} else {
ratio = (new Integer(width)).doubleValue() / bi.getWidth();
}
AffineTransformOp op = new AffineTransformOp(AffineTransform
.getScaleInstance(ratio, ratio), null);
itemp = op.filter(bi, null);
}
if (bb) {//补白
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
g.setColor(Color.white);
g.fillRect(0, 0, width, height);
if (width == itemp.getWidth(null))
g.drawImage(itemp, 0, (height - itemp.getHeight(null)) / 2,
itemp.getWidth(null), itemp.getHeight(null),
Color.white, null);
else
g.drawImage(itemp, (width - itemp.getWidth(null)) / 2, 0,
itemp.getWidth(null), itemp.getHeight(null),
Color.white, null);
g.dispose();
itemp = image;
}
ImageIO.write((BufferedImage) itemp, "JPEG", new File(result));
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 图像切割(按指定起点坐标和宽高切割)
* @param srcImageFile 源图像地址
* @param result 切片后的图像地址
* @param x 目标切片起点坐标X
* @param y 目标切片起点坐标Y
* @param width 目标切片宽度
* @param height 目标切片高度
*/
public void cut(String srcImageFile, String result,
int x, int y, int width, int height) {
try {
// 读取源图像
BufferedImage bi = ImageIO.read(new File(srcImageFile));
int srcWidth = bi.getHeight(); // 源图宽度
int srcHeight = bi.getWidth(); // 源图高度
if (srcWidth > 0 && srcHeight > 0) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,
Image.SCALE_DEFAULT);
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
ImageFilter cropFilter = new CropImageFilter(x, y, width, height);
Image img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(),
cropFilter));
BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, width, height, null); // 绘制切割后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", new File(result));
}
} catch (Exception e) {
e.printStackTrace();
}
}
//获得文件名字
public String getFileName(MultipartFile file, HttpServletRequest request,HttpSession session){
String FILE_PATH = session.getServletContext().getRealPath("/") + "upload";
String fileName = file.getOriginalFilename();
String[] suffixNameArr = fileName.split("\\.");
String suffixName = suffixNameArr[suffixNameArr.length-1];
String userName = SecurityContextHolder.getContext().getAuthentication().getName();
return getTime() + userName+"."+suffixName;
}
//文件上传,返回文件路径
public String uploadFile(MultipartFile file, HttpServletRequest request,HttpSession session) throws IOException {
String FILE_PATH = session.getServletContext().getRealPath("/") + "upload";
String fileName = getFileName(file,request,session);
File tempFile = new File(FILE_PATH, fileName);
if (!tempFile.getParentFile().exists()) {
tempFile.getParentFile().mkdir();
}
if (!tempFile.exists()) {
tempFile.createNewFile();
}
file.transferTo(tempFile); //将上传文件写到服务器上指定的文件。
return FILE_PATH + "\\" + tempFile.getName();
}
/* public static File getFile(String fileName) {
return new File(FILE_PATH, fileName);
} */
public String getTime(){
Date date = new Date();
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");//设置日期格式
String nowTime = df.format(date).toString();
return nowTime;
}
}
这样就将图片要裁剪的图片路径返回页面展示
3.之后就是图片裁剪了，图片裁剪功能我找了好多插件，最后锁定jcrop，也是因为它的demo打动了我(太好看了),之后就是导入文件，在我这里，我在页面接收后台返回来的图片路径之后启用jcrop，也就是openJcrop（）方法，这样就可以加载jcrop插件了，具体大家想进一步了解这个裁剪工具，请到官网细细的研究，我就不再做过多的谈论了。
大家注意，在这里有个大坑，真的是大坑，就是重新选择图片的时候，被jcrop加载过的img的src是不能被修改的，这个当初卡了我好长时间，被jcrop加载一次jcrop就会生成一个自己的编辑对象（我自己的理解），这时候就和原来的img没有关系了，直到最后细细研究api才找到了一个方法，唯一的方法就是将这个jcrop销毁，就是jcrop_api.destroy(),这个有很大的学问，我就提示一点，就是将jcrop_api声明为全局变量，下面贴出js代码（和上边的html是在一个文件下）：
<script type="text/javascript">
$(function(){
var jcrop_api;
});
$("#file_upload").change(function() {
$("#msg").text('');
var oFile = $(this)[0].files[0];
//判断上传文件大小
if (oFile.size > 1*1024*1024) {
$("#msg").text('你选择了太大的文件，请选择一个1M以下的图像文件').css('color','red');
$(this).val("");
return;
}
//判断类型
var filepath=$(this).val();
var extStart=filepath.lastIndexOf(".");
var ext=filepath.substring(extStart,filepath.length).toUpperCase();
if(ext!=".JPEG"&&ext!=".PNG"&&ext!=".JPG"){
$("#msg").text('请选择一个有效的图像文件(jpg,png是允许的)').css('color','red');
$(this).val("");
return;
}
$("#fileUp").ajaxSubmit({
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传输发生错误！！！");
}
});
});
function photoSummit(){
//alert($("#w").val()+","+$("#h").val()+","+$("#x").val()+","+$("#y").val());
//$("#fileUp").attr("action", "/file/img/upload").submit();
if($("#w").val()>0 && $("#h").val()>0){
$("#fileUp").ajaxSubmit({
type: "POST",
url:"/file/img/cutandscale",
dataType: "json",
contentType:"application/json",
success: function(data){
$("#msg").text('上传头像成功！！！').css('color','red');
//alert($("#filePathInput").val());
window.parent.back($("#filePathInput").val());
},
error : function(data) {
alert("ajax传输发生错误！！！");
}
});
}else{
$("#msg").text('请用鼠标截取图片').css('color','red');
}
}
//启动jcrop
function openJcrop(imgPath){
//启动jcrop支持
var boundx,boundy,
xsize = $('#preview-pane .preview-container').width(),
ysize = $('#preview-pane .preview-container').height();
$('#target').Jcrop({
minSize: [110, 110],
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
jcrop_api.setImage(imgPath);
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$('#preview-pane .preview-container img').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
$("#w").val(c.w);
$("#h").val(c.h);
$("#x").val(c.x);
$("#y").val(c.y);
}
};
}
</script>
这样我们就完成了编辑功能，之后我们点击提交就会将w,h,x,y参数传到后台。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
- Author -
zkp小飞声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@