前端使用的cropper 后端使用的springmvc,文件上传使用的是七牛云存储. 也可以存到本地
前言(解析一波):前端剪切好头像时,会把原图以及剪切的四个点传到后端.然后后端才是真正的对图片进行剪切.
项目源码:点击打开链接 (大二学生.写的有点渣,轻喷... 刚玩这些东西.多多指教)
前端操作:
前端主要代码:
<div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label"
role="dialog"
tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="avatar-form" action="/user/uploadHeadImg" enctype="multipart/form-data"
method="post">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button">×</button>
<h4 class="modal-title" id="avatar-modal-label">修改头像</h4>
</div>
<div class="modal-body">
<div class="avatar-body">
<!-- Upload image and data -->
<div class="avatar-upload">
<input class="avatar-src" name="avatar_src" type="hidden">
<input class="avatar-data" name="avatar_data" type="hidden">
<label for="avatarInput">本地上传</label>
<input class="avatar-input" id="avatarInput" name="avatar_file" type="file">
</div>
<!-- Crop and preview -->
<div class="row">
<div class="col-md-9">
<div class="avatar-wrapper"></div>
</div>
<div class="col-md-3">
<div class="avatar-preview preview-lg">
<img src="" class="user_head_img">
</div>
<div class="avatar-preview preview-md">
<img src="" class="user_head_img">
</div>
<div class="avatar-preview preview-sm">
<img src="" class="user_head_img">
</div>
</div>
</div>
<div class="row avatar-btns">
<div class="col-md-3">
<button class="btn btn-info" type="submit">提交</button>
<button class="btn btn-warning" data-dismiss="modal" type="button">关闭
</button>
</div>
</div>
</div>
</div>
<div class="modal-footer">
</div>
</form>
</div>
</div>
</div><!-- /.modal -->后端操作:
主要实现在后台,前端的就不多bb了.
后台springmvc接受数据:注意看这里的注释
@RequestMapping(value = "/uploadHeadImg", method = RequestMethod.POST, produces="text/html;charset=utf-8")
@ResponseBody
public String uploadHeadImg(
@RequestParam(value = "avatar_file", required = false) MultipartFile avatar_file,
String avatar_src, String avatar_data, HttpServletRequest request) {
if(!avatar_file.getContentType().contains("image")){
return "请选择正确的图片格式!";
}
JsonParser parse =new JsonParser(); //获取图片截取数据 JSON:com.google.gson.JsonParser
JsonObject json=(JsonObject) parse.parse(avatar_data);
int x = Math.round(json.get("x").getAsFloat());
int y = Math.round(json.get("y").getAsFloat());
int w = Math.round(json.get("width").getAsFloat());
int h = Math.round(json.get("height").getAsFloat());
int r = Math.round(json.get("rotate").getAsFloat());
File file;
try {
file = new File("d:/image",currentUser.getToken()+".png"); //存储临时文件 暂存在d盘下的image 方便调试
InputStream is = avatar_file.getInputStream();
ImageUtil.cut(is,file,x,y,w,h); //主要类ImageUtil(自定义的):图片工具类对图片进行操作
userService.uploadHeadImg(file); //调用七牛云上传图片接口
file.delete(); //删除文件
} catch (IOException e) {
e.printStackTrace();
return "失败!";
}
return "成功!";
}图片处理类ImageUtil:参考别人的博客,改了一点东西.
public static void cut(InputStream is, File dirImageFile, int x, int y, int destWidth,
int destHeight) throws IOException {
cut(ImageIO.read(is),dirImageFile,x,y,destWidth,destHeight);
}
public static void cut(BufferedImage bi,File dirImageFile, int x, int y, int destWidth,
int destHeight) {
try {
Image img;
ImageFilter cropFilter;
// 读取源图像
int srcWidth = bi.getWidth(); // 源图宽度
int srcHeight = bi.getHeight(); // 源图高度
if (srcWidth >= destWidth && srcHeight >= destHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight,
Image.SCALE_DEFAULT);
// 改进的想法:是否可用多线程加快切割速度
// 四个参数分别为图像起点坐标和宽高
// 即: CropImageFilter(int x,int y,int width,int height)
cropFilter = new CropImageFilter(x, y, destWidth, destHeight);
img = Toolkit.getDefaultToolkit().createImage(
new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(destWidth, destHeight,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null); // 绘制缩小后的图
g.dispose();
// 输出为文件
ImageIO.write(tag, "JPEG", dirImageFile);
}
} catch (Exception e) {
e.printStackTrace();
}
}上传七牛云接口 务必导入jar包
<dependency> <groupId>com.qiniu</groupId> <artifactId>qiniu-java-sdk</artifactId> <version>[7.2.0, 7.2.99]</version> </dependency>
public static String uploadHeadImg(File file) throws IOException {
Configuration cfg = new Configuration(Zone.zone2());
UploadManager uploadManager = new UploadManager(cfg);
Auth auth = Auth.create(Const.QINIU_ACCESS_KEY,Const.QINIU_SECRET_KEY);
String upToken = auth.uploadToken(Const.QINIU_HEAD_IMG_BUCKET_NAME);
Response response = uploadManager.put(file,null,upToken);
//解析上传结果
DefaultPutRet putRet = new Gson().fromJson(response.bodyString(),DefaultPutRet.class);
return putRet.key;
}Const.QINIU_ACCESS_KEY:是你的七牛云的AKConst.QINIU_SECRET_KEY:是你的七牛云的SKConst.QINIU_HEAD_IMG_BUCKET_NAME:是你的对象存储的空间名