JS调用jcrop
<div class="form-group">
<div class="col-md-2 control-label"></div>
<div class="controls col-md-8 controls">
<a id="upload-picture-btn" class="btn btn-primary"
data-uploadurl="setting/avatar_save"
data-goto-url="setting/avatar_crop.html"><spring:message code="faculty_set_pic_upload_new"></spring:message></a>
</div>
</div>将图片存入OSS中cache文件夹
@ResponseBody
@RequestMapping(value = "/avatar_save")
public Message avatarSave(@RequestParam("file") MultipartFile file ,MultipartHttpServletRequest multipartHttpServletRequest) {
logBefore(logger, "上传头像的第一步");<span style="white-space:pre"> </span><p class="p1"><span class="s1"><span style="white-space:pre"> </span>static</span><span class="s2"> </span><span class="s1">final</span><span class="s2"> String </span>OSS_DIR_STUDENT<span class="s2"> = </span><span class="s3">"student/"</span><span class="s2">;</span></p><p class="p1"><span class="s1"> <span style="white-space:pre"> </span></span>static<span class="s1"> </span>final<span class="s1"> String </span><span class="s2">OSS_DIR_CACHE</span><span class="s1"> = </span><span class="s3">"cache/"</span><span class="s1">;</span></p><pre name="code" class="java"><span style="white-space:pre"> </span>//获取页面参数 PageData pd = this.getPageData();
Message message = new Message();
HttpServletRequest request=this.getRequest();
try {
//判断有没有登陆
if(!islogin()){
message.message="没有登录".toString();
return message;
}
if(!isimg(file)){
message.message="格式不对".toString();
return message;
} //缓存图片，因为可能只上传不裁剪
String cacheimg_browerpath;
String fileName = pd.get("students_ID")+"_cache"+getExtName(file);
cacheimg_browerpath = FileUpload.uploadFileObject2OSSByClientStream(file.getInputStream(), Const.OSS_ENDPOINT, Const.OSS_STATIC_BUCKETNAME,
Const.OSS_DIR_CACHE+fileName);
//记录文件全路径和名字到session,和显示路径
request.getSession().setAttribute("cacheimg_name", pd.get("students_ID")+"_cache"+getExtName(file));
request.getSession().setAttribute("cacheimg_ExtName",getExtName(file));
request.getSession().setAttribute("cacheimg_browerpath", cacheimg_browerpath);
//得到图片实际长宽
// 初始化OSSClient
OSSClient client = new OSSClient(Const.OSS_ENDPOINT, Const.OSS_ACCESSKEYID, OSS_ACCESSKEYSECRETS);
// 获取Object，返回结果为OSSObject对象
OSSObject object = client.getObject(OSS_STATIC_BUCKETNAME, OSS_DIR_CACHE+fileName);
InputStream is= object.getObjectContent();
BufferedImage sourceImg =ImageIO.read(is);
int natural_width=sourceImg.getWidth();
int natural_height=sourceImg.getHeight();
sourceImg.flush();
is.close();
client.shutdown();
is=null;
request.getSession().setAttribute("cacheimg_natural_width",natural_width);
request.getSession().setAttribute("cacheimg_natural_height",natural_height);
} catch (Exception e) {
logger.error(e.toString(), e);
}
return message;
}JS
<span style="white-space:pre"> </span><form id="avatar-crop-form" method="post">
<div class="form-group clearfix">
<div class="col-md-offset-2 col-md-8 controls">
<img src="${sessionScope.cacheimg_browerpath}" id="avatar-crop"
data-cropurl="setting/avatar_crop_edit"
width="${(270/sessionScope.cacheimg_natural_height)*sessionScope.cacheimg_natural_width}"
height="270" data-natural-width="${sessionScope.cacheimg_natural_width}"
data-natural-height="${sessionScope.cacheimg_natural_height}" />
<div class="help-block"><spring:message code="faculty_picture_crop_tips" ></spring:message></div>
</div>
</div>
<div class="form-group clearfix">
<div class="col-md-offset-2 col-md-8 controls">
<a class="btn btn-fat btn-primary" id="upload-avatar-btn"
data-goto-url="setting/avatar.html"><spring:message code="courseManage_save" ></spring:message></a>
<a href="setting/avatar.html" class="go-back btn btn-link"><spring:message code="faculty_picture_crop_rechoose" ></spring:message></a>
</div>
</div>
</form>后台逻辑
<span style="white-space:pre"> </span>/**
* 手动裁剪图片
*/
@ResponseBody
@RequestMapping(value = "/avatar_crop_edit")
public Message imgCrop() {
logBefore(logger, "上传头像的第二步");
// 获取页面参数 PageData pd = this.getPageData();
Message message = new Message();
HttpServletRequest request=this.getRequest();
try {
//判断有没有登陆
if(!islogin()){
message.message="没有登录".toString();
return message;
}
//裁剪开始的点
Double x=Double.parseDouble(pd.get("x").toString());
Double y=Double.parseDouble(pd.get("y").toString());
//截到的长宽
Double w=Double.parseDouble(pd.get("w").toString());
Double h=Double.parseDouble(pd.get("h").toString());
//浏览器上显示的大小
Double width=Double.parseDouble(pd.get("width").toString());
Double height=Double.parseDouble(pd.get("height").toString());
//得到文件全路径
String cacheimg_ExtName=request.getSession().getAttribute("cacheimg_ExtName").toString();
String fileName = (String) request.getSession().getAttribute("cacheimg_name");
//得到图片实际长宽
OSSClient client = new OSSClient(Const.OSS_ENDPOINT, Const.OSS_ACCESSKEYID, Const.OSS_ACCESSKEYSECRETS);
InputStream is=client.getObject(Const.OSS_STATIC_BUCKETNAME,Const.OSS_DIR_CACHE+fileName).getObjectContent();
BufferedImage sourceImg =ImageIO.read(is);
int real_width=sourceImg.getWidth();
int real_height=sourceImg.getHeight();
sourceImg.flush();
is.close();
is=null;
client.shutdown();
//计算比例
double width_rate=(double)real_width/width;
double height_rate=(double)real_height/height;
//裁剪
String uuid = UuidUtil.get32UUID();
String OSSName = uuid+cacheimg_ExtName;
ImageCut imageCut = new ImageCut((int)(x*width_rate),(int)( y*height_rate),(int) (w*width_rate),(int) (h*height_rate));
String OSSUrl = imageCut.cut(Const.OSS_DIR_CACHE+fileName,OSSName);//裁剪的重点
//删除cache照片
FileUpload.deleteFile(Const.OSS_ENDPOINT, Const.OSS_STATIC_BUCKETNAME,Const.OSS_DIR_CACHE+fileName);
//删除旧图片
pd.put("students_ID", this.getStudents_ID());
if (this.getStudents().getStudents_Photo() != null && this.getStudents().getStudents_Photo()!= "") {
fileName = this.getStudents().getStudents_Photo().split(Const.OSS_DIR_STUDENT)[1];
FileUpload.deleteFile(Const.OSS_ENDPOINT, Const.OSS_STATIC_BUCKETNAME,Const.OSS_DIR_STUDENT+fileName);
}
//保存新头像地址到数据库
pd.put("students_Photo", OSSUrl);
studentsService.headImgEdit(pd);
Students students = this.getStudents();
students.setStudents_Photo(OSSUrl);
// shiro管理的session
Subject currentUser = SecurityUtils.getSubject();
Session session = currentUser.getSession();
session.setAttribute(Const.SESSION_USER, students);
} catch (Exception e) {
logger.error(e.toString(), e);
}
return message;
} /**
* 对图片裁剪，并把裁剪完蛋新图片保存 。
* @param srcpath 源图片路径
* @param subpath 剪切图片存放路径
* @return
* @throws Exception
*/
public String cut(String srcpath, String subpath) throws Exception {
InputStream is = null;
ImageInputStream iis = null;
ImageOutputStream imOut = null;
OSSClient client = null;
try {
// 初始化OSSClient
client = new OSSClient(Const.OSS_ENDPOINT, Const.OSS_ACCESSKEYID, Const.OSS_ACCESSKEYSECRETS);
// 获取Object，返回结果为OSSObject对象
OSSObject object = client.getObject(Const.OSS_STATIC_BUCKETNAME, srcpath);
// 读取图片文件
// is = new FileInputStream(srcpath);
is = object.getObjectContent();
// 获取文件的后缀名
String postFix = getPostfix(srcpath);
/*
* 返回包含所有当前已注册 ImageReader 的 Iterator，这些 ImageReader 声称能够解码指定格式。
* 参数：formatName - 包含非正式格式名称 .（例如 "jpeg" 或 "tiff"）等 。
*/
Iterator<ImageReader> it = getImageReadersByFormatName(postFix);
ImageReader reader = it.next();
// 获取图片流
iis = ImageIO.createImageInputStream(is);
/*
* <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索’。
* 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
*/
reader.setInput(iis, true);
/*
* <p>描述如何对流进行解码的类<p>.用于指定如何在输入时从 Java Image I/O
* 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件 将从其 ImageReader 实现的
* getDefaultReadParam 方法中返回 ImageReadParam 的实例。
*/
ImageReadParam param = reader.getDefaultReadParam();
/*
* 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
* 的左上顶点的坐标（x，y）、宽度和高度可以定义这个区域。
*/
Rectangle rect = new Rectangle(x, y, width, height);
// 提供一个 BufferedImage，将其用作解码像素数据的目标。
param.setSourceRegion(rect);
/*
* 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将 它作为一个完整的
* BufferedImage 返回。
*/
BufferedImage bi = reader.read(0, param);
// File subpathfile=new File(subpath);
// subpathfile.mkdirs();
// 保存新图片
ByteArrayOutputStream bs = new ByteArrayOutputStream();
try {
imOut = ImageIO.createImageOutputStream(bs);
ImageIO.write(bi, postFix,imOut);
is= new ByteArrayInputStream(bs.toByteArray());
} catch (IOException e) {
e.printStackTrace();
}
bi.flush();
bs.close();
return FileUpload.uploadFileObject2OSSByClientStream(is, Const.OSS_ENDPOINT, Const.OSS_STATIC_BUCKETNAME, subpath);
// ImageIO.write(bi, postFix, subpathfile);
} finally {
if (is != null){
is.close();
is=null;
}
if (iis != null){
iis.close();
iis=null;
}
if (imOut != null) {
imOut.close();
imOut = null;
}
if (client != null) {
client.shutdown();
}
}
}
/**
* 获取inputFilePath的后缀名，如："e:/test.pptx"的后缀名为："pptx"<br>
*
* @param inputFilePath
* @return
*/
public String getPostfix(String inputFilePath) {
return inputFilePath.substring(inputFilePath.lastIndexOf(".") + 1);
}
这样就完成了图片上传
850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
