实现思路
- 使用jcrop插件手机要裁剪图片的坐标
- 将收集到的参数传递到后台,在后台使用java图形对象绘制图像进行裁剪
- 后台处理流程:
1、将上传的图片按按照比例进行压缩后上传到文件服务器,并且将压缩后的图片保存在本地临时目录中。
2、将压缩后的图片回显到页面,使用jcrop进行裁剪,手机裁剪坐标(x,y,width,height)
- @paramx 目标切片起点坐标X
- @param y 目标切片起点坐标Y
- @param width 目标切片宽度
- @param height 目标切片高度
3、后台处理裁剪裁剪,重新上传
jsp页面
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>上传用户头像</title>
<link href="${pageContext.request.contextPath}/js/cutImg/css/master.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/js/cutImg/css/upload.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/js/cutImg/css/jquery.rollbar.css" rel="stylesheet" />
<link href="${pageContext.request.contextPath}/js/cutImg/css/jquery.Jcrop.css" rel="stylesheet" />
</head>
<body>
<div class="user_upload">
<form id="uploadImgFrom" enctype="multipart/form-data" method="post">
<div class="upload">
<div class="upload_left">
<div class="pic">
<div class="pic2" id="pic2" >
<div id="uploadFile">
<div class="upload_btn" style="margin-left: 75px;">
<a href="javascript:;" id="upText" style="color:red;">上传头像</a>
</div>
<p>
支持jpg、png格式<br />
图片小于2M
</p>
</div>
<!--回显示图片-->
<img src="" name="photo" id="originalImg" alt=""/>
</div>
</div>
<p class="up_reload" id="up_reload" style="display: none;">
<a href="javascript:;" style="color: red">重新上传</a>
</p>
<input type="hidden" name="picval" id="picval" />
<input type="hidden" name="origpicval" id="origpicval" value="" />
<input type="hidden" name="temporigpic" id="temporigpic" />
<input type="hidden" name="fileID" id="fileID" size="100" />
<input type="hidden" name="fileUrl" id="fileUrl" size="100" />
<input type="hidden" name="imgHeight" id="imgHeight" size="100" />
<input type="hidden" name="imgWidth" id="imgWidth" size="100" />
</div>
<div class="upload_right">
<div class="upload_view_pic" style="width: 300px; height: 230px; border: solid 1px
<img id="preview_1" src="${pageContext.request.contextPath}/images/4-3.jpg"/>
</div>
<p>
400 x 300像素
</p>
<%--<div class="upload_view_pic" style="width: 80px; height: 80px; border: solid 1px
<img id="preview_2" src=${pageContext.request.contextPath}/images/4-3.jpg />
</div>
<p>
80 x 80像素
</p>--%>
<p>
拖拽或缩放,生成自己满意的头像
</p>
</div>
<%-- <div id="img_description">
<textarea
</div>--%>
<div class="upload_b">
<font id="upalert"></font>
</div>
</div>
<input type="hidden" name="x" id="x" size="5" />
<input type="hidden" name="y" id="y" size="5" />
<input type="hidden" name="w" id="w" size="5" />
<input type="hidden" name="h" id="h" size="5" />
<input type="hidden" name="imgUrl" id="imgUrl"/>
<input type="hidden" name="imgId" id="imgId"/>
<div class="upload_submit_contain">
<div class="upload_submit" id="saveImage">
<a href="javascript:;" style="color: red">保存头像</a>
</div>
</div>
</form>
</div>
</body>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.form.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/check.js"></script>
<script src="${pageContext.request.contextPath}/js/cutImg/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/cutImg/js/jquery.form.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath}/js/cutImg/js/jquery-custom-file-input.js" type="text/jav