java web 网站头像上传处理 (springmvc +bootstrap+cropper)
Posted roychenyi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了java web 网站头像上传处理 (springmvc +bootstrap+cropper)相关的知识，希望对你有一定的参考价值。
制作头像上传。请根据您的实际需求，修改代码，不完全正确，仅供参考！
前端页面设计使用bootstrap ，头像预览和剪裁工具使用cropper
后台使用springmvc。
现在来看前端的页面设计
前端页面设计，自然需要bootstrap 、jqury 和cropper ，这可以自行去网上百度查找
剪裁效果图
html 文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>cropper</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="js/plugins/cropper/cropper.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container" id="crop-avatar">
<!-- Current avatar -->
<div style="text-align:center;color:red;margin:50px 0">提示：点击头像上传</div>
<div class="avatar-view" title="Change the avatar">
<img src="images/snow.jpg" alt="Avatar"/>
</div>
<!-- Cropping modal -->
<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="crop.php" 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" accept="image/*"/>
</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"></div>-->
<div class="avatar-preview preview-md">
<label>100*100</label>
</div>
<div class="avatar-preview preview-sm" title="50*50">
<label>50*50</label>
</div>
<div class="avatar-preview preview-xs">
<label>30*30</label>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataX">X</label>
<input type="text" class="form-control" id="dataX" name="x" placeholder="x" >
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataY">Y</label>
<input type="text" class="form-control" id="dataY" name="y" placeholder="y">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataWidth">Width</label>
<input type="text" class="form-control" id="dataWidth" name="width" placeholder="width">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataHeight">Height</label>
<input type="text" class="form-control" id="dataHeight" name="height" placeholder="height">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataRotate">Rotate</label>
<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
<span class="input-group-addon">deg</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataScaleX">ScaleX</label>
<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataScaleY">ScaleY</label>
<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
</div>
</div>
</div>
<div class="row avatar-btns">
<div class="col-md-9">
<div class="btn-group">
<button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">向左旋转</button>
<button class="btn btn-primary" data-method="rotate" data-option="-15" type="button">-15deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="-30" type="button">-30deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="-45" type="button">-45deg</button>
</div>
<div class="btn-group">
<button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">向右旋转</button>
<button class="btn btn-primary" data-method="rotate" data-option="15" type="button">15deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="30" type="button">30deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="45" type="button">45deg</button>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-block avatar-save" type="submit">确定</button>
</div>
</div>
</div>
</div>
<!-- <div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
</div> -->
</form>
</div>
</div>
</div><!-- /.modal -->
<!-- Loading state -->
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/cropper/cropper.min.js"></script>
<script src="js/cropper-tool.js"></script>
</body>
</html>
js处理文件如下
main,js
$(function () {
'use strict';
var console = window.console || { log: function () {} };
var $image = $('#image');
var $download = $('#download');
var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var options = {
aspectRatio: 16 / 9,
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataRotate.val(e.rotate);
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
}
};
// Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Cropper
$image.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
}).cropper(options);
// Buttons
if (!$.isFunction(document.createElement('canvas').getContext)) {
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
}
if (typeof document.createElement('cropper').style.transition === 'undefined') {
$('button[data-method="rotate"]').prop('disabled', true);
$('button[data-method="scale"]').prop('disabled', true);
}
// Download
if (typeof $download[0].download === 'undefined') {
$download.addClass('disabled');
}
// Options
$('.docs-toggles').on('change', 'input', function () {
var $this = $(this);
var name = $this.attr('name');
var type = $this.prop('type');
var cropBoxData;
var canvasData;
if (!$image.data('cropper')) {
return;
}
if (type === 'checkbox') {
options[name] = $this.prop('checked');
cropBoxData = $image.cropper('getCropBoxData');
canvasData = $image.cropper('getCanvasData');
options.built = function () {
$image.cropper('setCropBoxData', cropBoxData);
$image.cropper('setCanvasData', canvasData);
};
} else if (type === 'radio') {
options[name] = $this.val();
}
$image.cropper('destroy').cropper(options);
});
// Methods
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
var $target;
var result;
if ($this.prop('disabled') || $this.hasClass('disabled')) {
return;
}
if ($image.data('cropper') && data.method) {
data = $.extend({}, data); // Clone a new one
if (typeof data.target !== 'undefined') {
$target = $(data.target);
if (typeof data.option === 'undefined') {
try {
data.option = JSON.parse($target.val());
} catch (e) {
console.log(e.message);
}
}
}
result = $image.cropper(data.method, data.option, data.secondOption);
switch (data.method) {
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
break;
case 'getCroppedCanvas':
if (result) {
// Bootstrap's Modal
$('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
if (!$download.hasClass('disabled')) {
$download.attr('href', result.toDataURL('image/jpeg'));
}
}
break;
}
if ($.isPlainObject(result) && $target) {
try {
$target.val(JSON.stringify(result));
} catch (e) {
console.log(e.message);
}
}
}
});
// Keyboard
$(document.body).on('keydown', function (e) {
if (!$image.data('cropper') || this.scrollTop > 300) {
return;
}
switch (e.which) {
case 37:
e.preventDefault();
$image.cropper('move', -1, 0);
break;
case 38:
e.preventDefault();
$image.cropper('move', 0, -1);
break;
case 39:
e.preventDefault();
$image.cropper('move', 1, 0);
break;
case 40:
e.preventDefault();
$image.cropper('move', 0, 1);
break;
}
});
// Import image
var $inputImage = $('#inputImage');
var URL = window.URL || window.webkitURL;
var blobURL;
if (URL) {
$inputImage.change(function () {
var files = this.files;
var file;
if (!$image.data('cropper')) {
return;
}
if (files && files.length) {
file = files[0];
if (/^image\/\w+$/.test(file.type)) {
blobURL = URL.createObjectURL(file);
$image.one('built.cropper', function () {
// Revoke when load complete
URL.revokeObjectURL(blobURL);
}).cropper('reset').cropper('replace', blobURL);
$inputImage.val('');
} else {
window.alert('Please choose an image file.');
}
}
});
} else {
$inputImage.prop('disabled', true).parent().addClass('disabled');
}
});
需要添加的css样式
style.css
.avatar-view {
display: block;
margin: 0 auto;
height: 220px;
width: 220px;
border: 3px solid #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,.15);
cursor: pointer;
overflow: hidden;
}
.avatar-view img {
width: 100%;
}
.avatar-body {
padding-right: 15px;
padding-left: 15px;
}
.avatar-upload {
overflow: hidden;
}
.avatar-upload label {
display: block;
float: left;
clear: left;
width: 100px;
}
.avatar-upload input {
display: block;
margin-left: 110px;
}
.avater-alert {
margin-top: 10px;
margin-bottom: 10px;
}
.avatar-wrapper {
height: 364px;
width: 100%;
margin-top: 15px;
box-shadow: inset 0 0 5px rgba(0,0,0,.25);
background-color: #fcfcfc;
overflow: hidden;
}
.avatar-wrapper img {
display: block;
height: auto;
max-width: 100%;
}
.avatar-preview {
float: left;
margin-top: 15px;
margin-right: 15px;
border: 1px solid #eee;
border-radius: 4px;
background-color: #fff;
overflow: hidden;
}
.avatar-preview:hover {
border-color: #ccf;
box-shadow: 0 0 5px rgba(0,0,0,.15);
}
.avatar-preview img {
width: 100%;
}
.preview-lg {
height: 200px;
width: 200px;
margin-top: 15px;
}
.preview-md {
height: 100px;
width: 100px;
}
.preview-sm {
height: 50px;
width: 50px;
}
.preview-xs{
height:30px;
width:30px;]
}
@media (min-width: 992px) {
.avatar-preview {
float: none;
}
}
.avatar-btns {
margin-top: 30px;
margin-bottom: 15px;
}
.avatar-btns .btn-group {
margin-right: 5px;
}
.loading {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff url("patterns/loading.gif") no-repeat center center;
opacity: .75;
filter: alpha(opacity=75);
z-index: 20140628;
}
现在前端的基本完成。现在最重要的来了，就是后台java 处理了。在网上找过很多，发现没有，关于springmvc的，上面的内容基本上在网上找到，下面的springmvc的，关于图像处理的，就是我个人做的。好像网上有直接在前端进行剪裁的，可惜我不会啊，所以我还是老老实实的在后台处理了。
<strong>package com.cx.wxs.action.image;
import java.io.File;
import java.sql.Timestamp;
import java.util.Date;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import com.cx.wxs.dto.BSiteDto;
import com.cx.wxs.dto.IAlbumDto;
import com.cx.wxs.dto.IImageDto;
import com.cx.wxs.dto.UUserDto;
import com.cx.wxs.service.BSiteService;
import com.cx.wxs.service.IImageService;
import com.cx.wxs.service.UUserService;
import com.cx.wxs.utils.DateUtils;
import com.cx.wxs.utils.clientInfo;
import com.cx.wxs.utils.imageUtils;
/**
* @author roychenyi
* @date 2016-3-29 下午9:22:01
*/
@Controller
@RequestMapping("/{vip}/image")
public class imageAction {
@Resource
private IImageService iImageService;
@Resource
private BSiteService bSiteService;
@Resource
private UUserService uUserService;
/**
* @return the bSiteService
*/
public BSiteService getbSiteService() {
return bSiteService;
}
/**
* @param bSiteService the bSiteService to set
*/
public void setbSiteService(BSiteService bSiteService) {
this.bSiteService = bSiteService;
}
/**
* @return the uUserService
*/
public UUserService getuUserService() {
return uUserService;
}
/**
* @param uUserService the uUserService to set
*/
public void setuUserService(UUserService uUserService) {
this.uUserService = uUserService;
}
/**
* @return the iImageService
*/
public IImageService getiImageService() {
return iImageService;
}
/**
* @param iImageService the iImageService to set
*/
public void setiImageService(IImageService iImageService) {
this.iImageService = iImageService;
}
@RequestMapping(value="/updateuserlogo")
@ResponseBody
public IImageDto updateUserLogo( @PathVariable("vip") String vip,
Integer x, Integer y, Integer width, Integer height,Integer degree,
@RequestParam(value = "avatar_file") MultipartFile imageFile, HttpServletRequest request,HttpServletResponse response){
IImageDto imageDto=new IImageDto();
//获取服务器的实际路径
String realPath = request.getSession().getServletContext().getRealPath("/");
System.out.println("x:"+x+"y:"+y+"width:"+width+"height:"+height+"degree:"+degree);
System.out.println(realPath);
//需要上传的路径，我的路径根据用户的和当前日期划分路径
String resourcePath="upload/image";
UUserDto userDto=(UUserDto) request.getSession().getAttribute("user");
resourcePath+="/"+userDto.getUserId();
if(imageFile!=null){
try{
//文件名
String name= imageFile.getOriginalFilename();
//获取时间的路径
Date date=new Date();
int year=DateUtils.getYear(date);
int month=DateUtils.getMonth(date);
int day=DateUtils.getDay(date);
resourcePath+="/"+year+"/"+month+"/"+day+"/";
File dir=new File(realPath+resourcePath);
if(!dir.exists()){
dir.mkdirs();
}
//先把用户上传到原图保存到服务器上
File file=new File(dir,date.getTime()+".jpg");
imageFile.transferTo(file);
if(file.exists()){
String src=realPath+resourcePath+date.getTime();
boolean[] flag=new boolean[6];
//旋转后剪裁图片
flag[0]=imageUtils.cutAndRotateImage(src+".jpg", src+"_s.jpg", x, y, width, height, degree);
//缩放图片,生成不同大小的图片，应用于不同的大小的头像显示
flag[1]= imageUtils.scale2(src+"_s.jpg", src+"_s_200.jpg", 200, 200, true);
flag[2]= imageUtils.scale2(src+"_s.jpg", src+"_s_100.jpg", 100, 100, true);
flag[3]= imageUtils.scale2(src+"_s.jpg", src+"_s_50.jpg", 50, 50, true);
flag[4]= imageUtils.scale2(src+"_s.jpg", src+"_s_30.jpg", 30, 30, true);
flag[5]= imageUtils.scale2(file.getPath(), src+"_200.jpg", 200, 200, true);
if(flag[0]&&flag[1]&&flag[2]&&flag[3]&&flag[4]&&flag[5]){
//图像处理完成，将数据写入数据库中
imageDto.setYear((short) year);
imageDto.setMount((short)month);
imageDto.setDay((short)day);
imageDto.setUUserDto(userDto);
imageDto.setName(date.getTime()+".jpg");
imageDto.setFileName(name);
imageDto.setUrl(resourcePath+"/"+date.getTime()+".jpg");
imageDto.setPreviewUrl(resourcePath+"/"+date.getTime()+"_200.jpg");
imageDto.setTime(new Timestamp(date.getTime()));
imageDto.setWidth((short)imageUtils.getImageWidth(file.getPath()));
imageDto.setHeight((short)imageUtils.getImageHeight(file.getPath()));
imageDto.setClientIp(clientInfo.getIpAddr(request));
imageDto.setClientAgent(clientInfo.getAgent(request));
imageDto.setClientType((short)(clientInfo.isMoblie(request)?1:0));
imageDto.setStatus((short)1);
imageDto.setExt3(resourcePath+"/"+date.getTime()+"_s_200.jpg");
imageDto.setExt4(resourcePath+"/"+date.getTime()+"_s_100.jpg");
//设置相册，头像设置进入默认相册
IAlbumDto albumDto=new IAlbumDto();
albumDto.setAlbumId(1);
imageDto.setIAlbumDto(albumDto);
int id= iImageService.addIImage(imageDto);
if(id>0){
BSiteDto siteDto=userDto.getBSiteDto();
siteDto.setLogo(resourcePath+"/"+date.getTime()+"_s_100.jpg");
siteDto.setLastTime( new Timestamp(date.getTime()));
bSiteService.updateBSite(siteDto);
userDto.setPortrait(resourcePath+"/"+date.getTime()+"_s_30.jpg");
uUserService.updateUuser(userDto);
userDto=uUserService.getUuser(userDto);
imageDto.setLoginFlag("1");
return imageDto;
}
}
}
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
return imageDto;
}
}
return imageDto;
}
}
</strong>下面是图像处理的工具类。imageUtils.java.欢迎借鉴引用。（我也是在我网上找了很多进行参考的）
package com.cx.wxs.utils;
import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Rectangle;
import java.awt.RenderingHints;
import java.awt.color.ColorSpace;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.awt.image.ColorConvertOp;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Timestamp;
import java.util.Date;
import java.util.HashMap;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import javax.imageio.stream.ImageOutputStream;
import org.apache.commons.logging.Log;
import org.apache.commons.logging.LogFactory;
import com.cx.wxs.dto.IImageDto;
/**
* @author roychenyi
* @date 2016-3-30 上午10:11:39
*/
public class imageUtils {
private static Log log = LogFactory.getLog(imageUtils.class);
/***
* 获取图片的类型
* @param o
* @return
* @date 2016-3-30下午4:59:36
*/
private static String getFormatName(Object o) {
try {
ImageInputStream iis = ImageIO.createImageInputStream(o);
Iterator<ImageReader> iter = ImageIO.getImageReaders(iis);
if (!iter.hasNext()) {
return null;
}
ImageReader reader = iter.next();
iis.close();
return reader.getFormatName();
} catch (IOException e) {
}
return null;
}
/**
* 使用ImageReader获取图片尺寸
*
* @param src
* 源图片路径
*/
public void getImageSizeByImageReader(String src) {
long beginTime = new Date().getTime();
File file = new File(src);
try {
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
System.out.println("width:" + reader.getWidth(0));
System.out.println("height:" + reader.getHeight(0));
} catch (IOException e) {
e.printStackTrace();
}
long endTime = new Date().getTime();
System.out.println("使用[ImageReader]获取图片尺寸耗时：[" + (endTime - beginTime)+"]ms");
}
/**
* 使用BufferedImage获取图片尺寸
*
* @param src
* 源图片路径
*/
public void getImageSizeByBufferedImage(String src) {
long beginTime = new Date().getTime();
File file = new File(src);
FileInputStream is = null;
try {
is = new FileInputStream(file);
} catch (FileNotFoundException e2) {
e2.printStackTrace();
}
BufferedImage sourceImg = null;
try {
sourceImg = javax.imageio.ImageIO.read(is);
System.out.println("width:" + sourceImg.getWidth());
System.out.println("height:" + sourceImg.getHeight());
} catch (IOException e1) {
e1.printStackTrace();
}
long endTime = new Date().getTime();
System.out.println("使用[BufferedImage]获取图片尺寸耗时：[" + (endTime - beginTime)+"]ms");
}
/***
* 获取图片的宽
* @param srcImageFile
* @return
* @date 2016-3-30下午9:01:08
*/
public static int getImageWidth(String srcImageFile){
try {
File file = new File(srcImageFile);
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
return reader.getWidth(0);
} catch (IOException e) {
e.printStackTrace();
return 0;
}
}
/***
* 获取文件的高
* @param srcImageFile
* @return
* @date 2016-3-30下午9:02:19
*/
public static int getImageHeight(String srcImageFile){
File file = new File(srcImageFile);
try {
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
return reader.getHeight(0);
} catch (IOException e) {
e.printStackTrace();
return 0;
}
}
/***
* 剪裁图片
* @param src
* @param dest
* @param x 起点横坐标
* @param y 纵坐标
* @param w 长
* @param h 高
* @throws IOException
* @date 2016-3-30下午12:19:10
*/
public static boolean cutImage(String src,String dest,int x,int y,int w,int h) {
try{
Iterator iterator = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader)iterator.next();
InputStream in=new FileInputStream(src);
ImageInputStream iis = ImageIO.createImageInputStream(in);
reader.setInput(iis, true);
ImageReadParam param = reader.getDefaultReadParam();
x=(x>0?x:0);
y=(y>0?y:0);
Rectangle rect = new Rectangle(x, y, w,h);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0,param);
ImageIO.write(bi, "jpg", new File(dest));
return true;
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
return false;
}
}
/***
* 图片旋转指定角度
* @param bufferedimage 图像
* @param degree 角度
* @return
* @date 2016-3-30下午3:10:27
*/
public static BufferedImage rotateImage(final BufferedImage bufferedimage,
final int degree) {
int w = bufferedimage.getWidth();
int h = bufferedimage.getHeight();
int type = bufferedimage.getColorModel().getTransparency();
BufferedImage img;
Graphics2D graphics2d;
(graphics2d = (img = new BufferedImage(w, h, type))
.createGraphics()).setRenderingHint(
RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
// graphics2d.setBackground(Color.white);
graphics2d.setPaint(Color.WHITE);
graphics2d.fillRect(0, 0, w, h);
graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
graphics2d.drawImage(bufferedimage, 0, 0,Color.WHITE, null);
graphics2d.dispose();
return img;
}
public static boolean rotateImage(String srcImageFile, String result,
int degree){
try{
BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
BufferedImage tag= rotateImage(src, degree);
ImageIO.write(tag, "JPEG", new File(result));
return true;
}catch (Exception e) {
// TODO: handle exception
return false;
}
}
public static BufferedImage Rotate(Image src, int angel) {
int src_width = src.getWidth(null);
int src_height = src.getHeight(null);
// angel=angel>0?angel:(360-angel);
// calculate the new image size
Rectangle rect_des = CalcRotatedSize(new Rectangle(new Dimension(
src_width, src_height)), angel);
BufferedImage res = null;
res = new BufferedImage(rect_des.width, rect_des.height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g2 = res.createGraphics();
g2.setPaint(Color.WHITE);
g2.fillRect(0, 0, rect_des.width, rect_des.height);
// transform
g2.translate((rect_des.width - src_width) / 2,
(rect_des.height - src_height) / 2);
g2.rotate(Math.toRadians(angel), src_width / 2, src_height / 2);
g2.drawImage(src, null, null);
return res;
}
public static Rectangle CalcRotatedSize(Rectangle src, int angel) {
// if angel is greater than 90 degree, we need to do some conversion
if (angel >= 90) {
if(angel / 90 % 2 == 1){
int temp = src.height;
src.height = src.width;
src.width = temp;
}
angel = angel % 90;
}
double r = Math.sqrt(src.height * src.height + src.width * src.width) / 2;
double len = 2 * Math.sin(Math.toRadians(angel) / 2) * r;
double angel_alpha = (Math.PI - Math.toRadians(angel)) / 2;
double angel_dalta_width = Math.atan((double) src.height / src.width);
double angel_dalta_height = Math.atan((double) src.width / src.height);
int len_dalta_width = (int) (len * Math.cos(Math.PI - angel_alpha
- angel_dalta_width));
int len_dalta_height = (int) (len * Math.cos(Math.PI - angel_alpha
- angel_dalta_height));
int des_width = src.width + len_dalta_width * 2;
int des_height = src.height + len_dalta_height * 2;
return new java.awt.Rectangle(new Dimension(des_width, des_height));
}
public static boolean Rotate(String srcImageFile, String result,
int degree){
try{
degree=degree>0?degree:(360-degree);
BufferedImage src = ImageIO.read(new File(srcImageFile));
BufferedImage tag = Rotate(src, degree);
ImageIO.write(tag, "JPEG", new File(result));
return true;
}catch (Exception e) {
// TODO: handle exception
e.printStackTrace();
return false;
}
}
public static boolean cutAndRotateImage(String srcImageFile,String dest,int x,int y,int w,int h,int degree){
try{
BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
BufferedImage tag= Rotate(src, degree);
Iterator iterator = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader)iterator.next();
// InputStream in=new FileInputStream(tag);
ByteArrayOutputStream bs = new ByteArrayOutputStream();
ImageOutputStream ios = ImageIO.createImageOutputStream(bs);
ImageIO.write(tag, "jpg", ios);
InputStream in=new ByteArrayInputStream(bs.toByteArray());
ImageInputStream iis=ImageIO.createImageInputStream(in);
reader.setInput(iis, true);
ImageReadParam param = reader.getDefaultReadParam();
x=(x>0?x:0);
y=(y>0?y:0);
Rectangle rect = new Rectangle(x, y, w,h);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0,param);
ImageIO.write(bi, "jpg", new File(dest));
return true;
}catch (Exception e) {
// TODO: handle exception
return false;
}
}
/***
* 按照比例缩放
* @param srcImageFile
* @param result
* @param scale 缩放比例
* @param flag 缩放选择:true 放大; false 缩小;
* @return
* @date 2016-3-30下午2:39:44
*/
public static boolean scale(String srcImageFile, String result,
int scale, boolean flag) {
try {
File file = new File(srcImageFile);
BufferedImage src = ImageIO.read(file); // 读入文件
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
int width = reader.getWidth(0); // 得到源图宽
int height = reader.getHeight(0); // 得到源图长
if (flag) {// 放大
width = width * scale;
height = height * scale;
} else {// 缩小
width = width / scale;
height = height / scale;
}
Image image = src.getScaledInstance(width, height,
Image.SCALE_DEFAULT);
BufferedImage tag = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(image, 0, 0, null); // 绘制缩小后的图
g.dispose();
ImageIO.write(tag, "jpg", new File(result));// 输出到文件流
return true;
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
/***
* 缩放图像，按照长宽缩放
* @param srcImageFile
* @param result
* @param height 变换后的高度
* @param width 变换后的长度
* @param bb 比例不对称时，是否补白，true 补白;false 不补白
* @return
* @date 2016-3-30下午2:44:37
*/
public static boolean scale2(String srcImageFile, String result, int height, int width, boolean bb) {
try {
double ratio = 0.0; // 缩放比例
File file = new File(srcImageFile);
BufferedImage bi = ImageIO.read(file); // 读入文件
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
int width1 = reader.getWidth(0); // 得到源图宽
int height1 = reader.getHeight(0); // 得到源图长
Image itemp = bi.getScaledInstance(width, height, bi.SCALE_SMOOTH);
// 计算比例
if ((height1 > height) || (width1 > width)) {
if (height1 > width1) {
ratio = (new Integer(height)).doubleValue()
/ height1;
} else {
ratio = (new Integer(width)).doubleValue() / width1;
}
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));
return true;
} catch (IOException e) {
e.printStackTrace();
return false;
}
}
/***
* 转换图像格式
* @param srcImageFile 原图像地址
* @param formatName 转换类型
* @param destImageFile 转换后的地址
* @return
* @author roychenyi
* @date 2016-3-30下午2:49:15
*/
public static boolean convert(String srcImageFile, String formatName, String destImageFile) {
try {
File f = new File(srcImageFile);
f.canRead();
f.canWrite();
BufferedImage src = ImageIO.read(f);
ImageIO.write(src, formatName, new File(destImageFile));
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 彩色转为黑白
* @param srcImageFile 源图像地址
* @param destImageFile 目标图像地址
*/
public final static void gray(String srcImageFile, String destImageFile) {
try {
BufferedImage src = ImageIO.read(new File(srcImageFile));
ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
ColorConvertOp op = new ColorConvertOp(cs, null);
src = op.filter(src, null);
ImageIO.write(src, "jpg", new File(destImageFile));
} catch (IOException e) {
e.printStackTrace();
}
}
/**
* 给图片添加图片水印
* @param pressImg 水印图片
* @param srcImageFile 源图像地址
* @param destImageFile 目标图像地址
* @param x 修正值。 默认在中间
* @param y 修正值。 默认在中间
* @param alpha 透明度：alpha 必须是范围 [0.0, 1.0] 之内（包含边界值）的一个浮点数字
*/
public static boolean pressImage(String pressImg, String srcImageFile,String destImageFile,
int x, int y, float alpha) {
try {
File file = new File(srcImageFile);
BufferedImage src = ImageIO.read(file); // 读入文件
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
int width = reader.getWidth(0); // 得到源图宽
int height = reader.getHeight(0); // 得到源图长
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
g.drawImage(src, 0, 0, width, height, null);
// 水印文件
Image src_biao = ImageIO.read(new File(pressImg));
int wideth_biao = src_biao.getWidth(null);
int height_biao = src_biao.getHeight(null);
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
alpha));
g.drawImage(src_biao, (width-wideth_biao-x) ,
(height-height_biao-y) , wideth_biao, height_biao, null);
// 水印文件结束
g.dispose();
ImageIO.write((BufferedImage) image, "jpg", new File(destImageFile));
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 给图片添加文字水印
* @param pressText 水印文字
* @param srcImageFile 源图像地址
* @param destImageFile 目标图像地址
* @param fontName 水印的字体名称
* @param fontStyle 水印的字体样式
* @param color 水印的字体颜色
* @param fontSize 水印的字体大小
* @param x 修正值
* @param y 修正值
* @param alpha 透明度：alpha 必须是范围 [0.0, 1.0] 之内（包含边界值）的一个浮点数字
*/
public static boolean pressText(String pressText,
String srcImageFile, String destImageFile, String fontName,
int fontStyle, Color color, int fontSize,int x,
int y, float alpha) {
try {
File file = new File(srcImageFile);
BufferedImage src = ImageIO.read(file); // 读入文件
Iterator<ImageReader> readers = ImageIO.getImageReadersByFormatName("jpg");
ImageReader reader = (ImageReader) readers.next();
ImageInputStream iis = ImageIO.createImageInputStream(file);
reader.setInput(iis, true);
int width = reader.getWidth(0); // 得到源图宽
int height = reader.getHeight(0); // 得到源图长
BufferedImage image = new BufferedImage(width, height,
BufferedImage.TYPE_INT_RGB);
Graphics2D g = image.createGraphics();
g.drawImage(src, 0, 0, width, height, null);
g.setColor(color);
g.setFont(new Font(fontName, fontStyle, fontSize));
g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
alpha));
// 在指定坐标绘制水印文字
g.drawString(pressText, (width - (getLength(pressText) * fontSize))
/ 2 + x, (height - fontSize) / 2 + y);
g.dispose();
ImageIO.write(image, "jpg", new File(destImageFile));// 输出到文件流
return true;
} catch (Exception e) {
e.printStackTrace();
return false;
}
}
/**
* 计算text的长度（一个中文算两个字符）
* @param text
* @return
*/
public static int getLength(String text) {
int length = 0;
for (int i = 0; i < text.length(); i++) {
if (new String(text.charAt(i) + "").getBytes().length > 1) {
length += 2;
} else {
length += 1;
}
}
return length / 2;
}
public static void main(String[] args) {
String src="D:/0.jpg";
/* imageUtils.cutImage(src, "D://1cut.jpg", -10, 40, 100000, 560);
imageUtils.rotateImage(src, "D:/2rotate.jpg", -30);
imageUtils.rotateImage(src, "D:/2rotate1.png", 30);
imageUtils.Rotate(src, "D://2rotate2.jpg", 330);
imageUtils.Rotate(src,"D://2rotate21.jpg",30);
imageUtils.cutAndRotateImage(src, "D://9cutRotate1.jpg", 244, 427, 614, 614, 0);
imageUtils.scale(src, "D://3scale1.jpg", 3, false);
imageUtils.scale2(src, "D://4scale2.jpg", 780,560, false);
imageUtils.convert(src, "png", "D://5convert.png");
imageUtils.gray(src,"D://6gray.jpg");
imageUtils.pressImage("D://3scale1.jpg", src, "D://7pressImage.jpg", 100, 100, 0.9f);
imageUtils.pressText("图片1414", src, "D://8pressText.jpg", "宋体", Font.BOLD, Color.black, 80, 10, 10,0.6f);
*/
imageUtils util = new imageUtils();
util.getImageSizeByImageReader(src);
util.getImageSizeByBufferedImage(src);
System.out.println(getImageHeight(src));
imageUtils.Rotate("E:\\apache-tomcat-7.0.59\\webapps\\wxs\\upload\\image\\1\\2016\\3\\30\\1459347622160.jpg","E:\\apache-tomcat-7.0.59\\webapps\\wxs\\upload/image/1/2016/3/30/1459347622160_s.jpg", 90);
imageUtils.Rotate("E:/apache-tomcat-7.0.59/webapps/wxs/upload/image/1/2016/3/30/1459349306443_s.jpg", "E:/apache-tomcat-7.0.59/webapps/wxs/upload/image/1/2016/3/30/1459349306443_s_200.jpg", 45);
}
}
制作头像上传。请根据您的实际需求，修改代码，不完全正确，仅供参考！
前端页面设计使用bootstrap ，头像预览和剪裁工具使用cropper
后台使用springmvc。
现在来看前端的页面设计
前端页面设计，自然需要bootstrap 、jqury 和cropper ，这可以自行去网上百度查找
剪裁效果图
html 文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>cropper</title>
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="js/plugins/cropper/cropper.css" rel="stylesheet"/>
<link href="css/style.css" rel="stylesheet"/>
</head>
<body>
<div class="container" id="crop-avatar">
<!-- Current avatar -->
<div style="text-align:center;color:red;margin:50px 0">提示：点击头像上传</div>
<div class="avatar-view" title="Change the avatar">
<img src="images/snow.jpg" alt="Avatar"/>
</div>
<!-- Cropping modal -->
<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="crop.php" 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" accept="image/*"/>
</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"></div>-->
<div class="avatar-preview preview-md">
<label>100*100</label>
</div>
<div class="avatar-preview preview-sm" title="50*50">
<label>50*50</label>
</div>
<div class="avatar-preview preview-xs">
<label>30*30</label>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataX">X</label>
<input type="text" class="form-control" id="dataX" name="x" placeholder="x" >
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataY">Y</label>
<input type="text" class="form-control" id="dataY" name="y" placeholder="y">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataWidth">Width</label>
<input type="text" class="form-control" id="dataWidth" name="width" placeholder="width">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataHeight">Height</label>
<input type="text" class="form-control" id="dataHeight" name="height" placeholder="height">
<span class="input-group-addon">px</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataRotate">Rotate</label>
<input type="text" class="form-control" id="dataRotate" placeholder="rotate">
<span class="input-group-addon">deg</span>
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataScaleX">ScaleX</label>
<input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">
</div>
<div class="input-group input-group-sm">
<label class="input-group-addon" for="dataScaleY">ScaleY</label>
<input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">
</div>
</div>
</div>
<div class="row avatar-btns">
<div class="col-md-9">
<div class="btn-group">
<button class="btn btn-primary" data-method="rotate" data-option="-90" type="button" title="Rotate -90 degrees">向左旋转</button>
<button class="btn btn-primary" data-method="rotate" data-option="-15" type="button">-15deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="-30" type="button">-30deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="-45" type="button">-45deg</button>
</div>
<div class="btn-group">
<button class="btn btn-primary" data-method="rotate" data-option="90" type="button" title="Rotate 90 degrees">向右旋转</button>
<button class="btn btn-primary" data-method="rotate" data-option="15" type="button">15deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="30" type="button">30deg</button>
<button class="btn btn-primary" data-method="rotate" data-option="45" type="button">45deg</button>
</div>
</div>
<div class="col-md-3">
<button class="btn btn-primary btn-block avatar-save" type="submit">确定</button>
</div>
</div>
</div>
</div>
<!-- <div class="modal-footer">
<button class="btn btn-default" data-dismiss="modal" type="button">Close</button>
</div> -->
</form>
</div>
</div>
</div><!-- /.modal -->
<!-- Loading state -->
<div class="loading" aria-label="Loading" role="img" tabindex="-1"></div>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/plugins/cropper/cropper.min.js"></script>
<script src="js/cropper-tool.js"></script>
</body>
</html>
js处理文件如下
main,js
$(function () {
'use strict';
var console = window.console || { log: function () {} };
var $image = $('#image');
var $download = $('#download');
var $dataX = $('#dataX');
var $dataY = $('#dataY');
var $dataHeight = $('#dataHeight');
var $dataWidth = $('#dataWidth');
var $dataRotate = $('#dataRotate');
var $dataScaleX = $('#dataScaleX');
var $dataScaleY = $('#dataScaleY');
var options = {
aspectRatio: 16 / 9,
preview: '.img-preview',
crop: function (e) {
$dataX.val(Math.round(e.x));
$dataY.val(Math.round(e.y));
$dataHeight.val(Math.round(e.height));
$dataWidth.val(Math.round(e.width));
$dataRotate.val(e.rotate);
$dataScaleX.val(e.scaleX);
$dataScaleY.val(e.scaleY);
}
};
// Tooltip
$('[data-toggle="tooltip"]').tooltip();
// Cropper
$image.on({
'build.cropper': function (e) {
console.log(e.type);
},
'built.cropper': function (e) {
console.log(e.type);
},
'cropstart.cropper': function (e) {
console.log(e.type, e.action);
},
'cropmove.cropper': function (e) {
console.log(e.type, e.action);
},
'cropend.cropper': function (e) {
console.log(e.type, e.action);
},
'crop.cropper': function (e) {
console.log(e.type, e.x, e.y, e.width, e.height, e.rotate, e.scaleX, e.scaleY);
},
'zoom.cropper': function (e) {
console.log(e.type, e.ratio);
}
}).cropper(options);
// Buttons
if (!$.isFunction(document.createElement('canvas').getContext)) {
$('button[data-method="getCroppedCanvas"]').prop('disabled', true);
}
if (typeof document.createElement('cropper').style.transition === 'undefined') {
$('button[data-method="rotate"]').prop('disabled', true);
$('button[data-method="scale"]').prop('disabled', true);
}
// Download
if (typeof $download[0].download === 'undefined') {
$download.addClass('以上是关于java web 网站头像上传处理 (springmvc +bootstrap+cropper)的主要内容，如果未能解决你的问题，请参考以下文章
java web 网站头像上传处理 (springmvc +bootstrap+cropper)