html
<#-- 上传头像 测试页 使用imgareaselect 插件 -->
最后 上传了这个插件 共学习参考
<link rel=\"stylesheet\" type=\"text/css\" href=\"${frontRes}/imgareaselect/css/imgareaselect-animated.css\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"${frontRes}/imgareaselect/css/index.css\" />
<script type=\"text/javascript\" src=\"${frontRes}/imgareaselect/jquery-1.4.2.min.js\"></script>
<script type=\"text/javascript\" src=\"${frontRes}/imgareaselect/jquery.imgareaselect.pack.js\"></script>
<script type=\"text/javascript\" src=\"${frontRes}/imgareaselect/ajaxfileupload.js\"></script>
<script>
function addFile(obj){
//document.getElementById(\'img\').src = path;
$.ajaxFileUpload({
url:\'${huluUrl}/trainer/upload/ajaxUpload\', //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议,一般设置为false
fileElementId: \'photoFile\', //文件上传域的ID
dataType: \'json\', //返回值类型 一般设置为json
success: function (data){//服务器成功响应处理函数
var infoArray = eval(\"(\"+data+\")\"); //包数据解析为json格式
var arr = infoArray.data;
$(\"#img\").attr(\"src\",\"/images/\"+arr.photo);
},
error: function (){//服务器响应失败处理函数
alert(\'与服务器通信失败,请稍后再试!\');
parent.location.reload();
}
});
}
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
//预览
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
//var imgx = document.getElementById(\"photo\").style.width;
var imgx = parseInt($(\"#photo\").css(\"width\").split(\"px\")[0]);
var imgy = parseInt($(\"#photo\").css(\"height\").split(\"px\")[0]);
console.debug(imgx+\"====\"+imgy);
$(\'#preview img\').css({
width : Math.round(scaleX * imgx),
height : Math.round(scaleY * imgy),
marginLeft : -Math.round(scaleX * selection.x1),
marginTop : -Math.round(scaleY * selection.y1)
});
$(\'#x1\').val(selection.x1);
$(\'#y1\').val(selection.y1);
$(\'#x2\').val(selection.x2);
$(\'#y2\').val(selection.y2);
$(\'#w\').val(selection.width);
$(\'#h\').val(selection.height);
//后台数据
$(\'#x1s\').val(selection.x1);
$(\'#y1s\').val(selection.y1);
$(\'#x2s\').val(selection.x2);
$(\'#y2s\').val(selection.y2);
$(\'#imgx\').val(parseInt(imgx));//原图width宽度
$(\'#imgy\').val(parseInt(imgy));//原图高度height
}
$(function(selection) {
var imgx = $(\"#photo\").css(\"width\").split(\"px\")[0];
var imgy = $(\"#photo\").css(\"height\").split(\"px\")[0];
var ares = 0;
console.debug(imgx+\"====\"+imgy);
if(imgx>imgy){
ares = imgy;
}else{
ares = imgx;
}
var ias = $(\'#photo\').imgAreaSelect({
aspectRatio : \'1:1\',
handles : true,
fadeSpeed : 200,
onSelectChange : preview,
instance : true
});
ias.setSelection(0, 0, ares-1, ares-1);//初始化选择区域
ias.setOptions({
show : true
});
ias.update();
$(\".imgareaselect-outer\").css(\"cursor\",\"Crosshair\");
$(\".imgareaselect-outer\").css(\"background-color\",\"rgba(255,255,255,0.9)\");
//预览
var scaleX = 100 / ares;
var scaleY = 100 / ares;
$(\'#preview img\').css({
width : Math.round(scaleX * imgx),
height : Math.round(scaleY * imgy),
marginLeft : -Math.round(scaleX * 0),
marginTop : -Math.round(scaleY * 0)
});
//后台数据
$(\'#x1s\').val(0);
$(\'#y1s\').val(0);
$(\'#x2s\').val(ares-1);
$(\'#y2s\').val(ares-1);
$(\'#imgx\').val(imgx);//原图width宽度
$(\'#imgy\').val(imgy);//原图高度height
});
</script>
<div class=\"container\" style=\"margin-top:20px;\">
<div class=\"row\">
<div class=\"col-xs-9 pull-right\">
<div class=\"media media-heading\">
<h4 style=\"font-weight: 600;float: left\">上传照片</h4>
</div>
<div class=\"row\" style=\"margin-top: 15px\">
<div class=\"col-lg-12\">
<div class=\"btn-group\" style=\"float: left\">
<div class=\"btn btn-default\" role=\"button\" style=\"position: relative; overflow: hidden;background-color: #8DC21F;color: #ffffff;\">
<span>+添加照片</span>
<input id=\"photoFile\" type=\"file\" name=\"photoFile\" onchange=\"addFile(this);\" style=\"height:34px;position: absolute; right: 0px; top: 0px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;\">
</div>
</div>
<span style=\"float: left; margin-left: 15px; color: #888888\">
<ul>
<li>建议本人照片</li>
<li>只支持JPG、PNG、GIF,大小不超过5M</li>
</ul>
</span>
</div>
</div>
<div class=\"row\">
<div class=\"col-lg-12\">
<div class=\"shangchuantouxiang\">
<img src=\"/images/${(trainer.photo)!\"\"}\" alt=\"...\" id =\"img\" class=\"img-circle\" style=\"width: 320px; height: 320px\">
</div>
</div>
</div>
<form action =\"${huluUrl}/trainer/upload/uploadPhotoTest\" method=\"post\" enctype=\"multipart/form-data\" >
<input type=\"text\" id=\"x1s\" name = \"x1s\" value=\"-\" />
<input type=\"text\" id=\"y1s\" name = \"y1s\" value=\"-\" />
<input type=\"text\" id=\"x2s\" name = \"x2s\" value=\"-\" />
<input type=\"text\" id=\"y2s\" name = \"y2s\" value=\"-\" />
<input type=\"text\" id=\"imgx\" name = \"imgx\" value=\"-\" />
<input type=\"text\" id=\"imgy\" name = \"imgy\" value=\"-\" />
<div class=\"row\" style=\"margin-top: 15px; margin-left: 80px\">
<div class=\"col-lg-5\">
<div class=\"btn-group\">
<button type=\"button\" class=\"btn btn-default\"id=\"chongxinshangchuan\">重新上传</button>
</div>
<div class=\"btn-group\">
<button type=\"submit\" class=\"btn btn-default\" id=\"baocun\"> 保存 </button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id=\"root\">
<div id=\"main\">
<div class=\"container demo\">
<div style=\"float: left; width: 50%;\">
<p class=\"instructions\">Click and drag on the image to select an area.</p>
<div style=\"width: 302px;height: 302px;\">
<div style=\"width: 302px;height:302px;border: 1px solid #aaa;\">
<div style=\"line-height: 300px; text-align: center; overflow: hidden; z-index: 1001; width: 300px; height: 300px; position: relative; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; \">
<img id=\"photo\" src=\"/images/${(trainer.photo)!\"\"}\" style=\"max-height:300px;max-width: 300px;\" />
</div>
</div>
</div>
</div>
<div style=\"float: left; width: 50%;\">
<p style=\"font-size: 110%; font-weight: bold; padding-left: 0.1em;\">Selection Preview</p>
<div style=\"width: 100px; height: 100px;\">
<div id=\"preview\" style=\"width: 100px; height: 100px; overflow: hidden;\">
<img src=\"/images/${trainer.photo!}\" style=\"width: 100px; height: 100px;\" />
</div>
</div>
<table>
<thead>
<tr>
<th colspan=\"2\" style=\"font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;\">Coordinates</th>
<th colspan=\"2\" style=\"font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;\">Dimensions</th>
</tr>
</thead>
<tbody>
<tr>
<td style=\"width: 10%;\"><b>X<sub>1</sub>:</b></td>
<td style=\"width: 30%;\"><input type=\"text\" id=\"x1\" value=\"-\" /></td>
<td style=\"width: 20%;\"><b>Width:</b></td>
<td><input type=\"text\" value=\"-\" id=\"w\" /></td>
</tr>
<tr>
<td><b>Y<sub>1</sub>:</b></td>
<td><input type=\"text\" id=\"y1\" value=\"-\" /></td>
<td><b>Height:</b></td>
<td><input type=\"text\" id=\"h\" value=\"-\" /></td>
</tr>
<tr>
<td><b>X<sub>2</sub>:</b></td>
<td><input type=\"text\" id=\"x2\" value=\"-\" /></td>
<td></td>
<td></td>
</tr>
<tr>
<td><b>Y<sub>2</sub>:</b></td>
<td><input type=\"text\" id=\"y2\" value=\"-\" /></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
java
//显示图片需要在服务端配置一个虚拟路径
(tomcat) server.xml
<Context debug=\"0\" docBase=\"G:\\Image\" path=\"/images\" reloadable=\"true\"/>
回显一下数据
[java] view plain copy 在CODE上查看代码片派生到我的代码片
/**
* 跳到上传头像2(可截取图片)
*
* @return
*/
@RequestMapping(value = \"toUploadPhoto\", method = RequestMethod.GET)
public ModelAndView toUploadTest() {
ModelAndView mav = leftMenu(\"/trainer/upload/uploadPhoto\");
//
Trainer trainer = null;
try {
Long userId = FrontShiroUtil.getUserId();
if (null != userId) {
trainer = trainerRepo.findOne(userId);
trainerDbSvc.updateLastLoginTime(userId);
}
} catch (Exception e) {
e.printStackTrace();
}
mav.addObject(\"trainer\", trainer);
return mav;
}
// 局部刷新上传图片
@RequestMapping(\"/ajaxUpload\")
public @ResponseBody AjaxResult ajaxUpload(MultipartHttpServletRequest request) {
Trainer trainer = new Trainer();
// 获得第1张图片(根据前台的name名称得到上传的文件)
MultipartFile file = request.getFile(\"photoFile\");
if (file.getSize() != 0) {
// 获得文件名:
String filename = file.getOriginalFilename();
String timeType = null;
if (null != filename && !filename.equals(\"\")) {
String imgtype = filename.substring(filename.lastIndexOf(\".\"));
// 获取路径
String ctxPath = \"E:/rudongImage/photo/\";
// 创建文件
File dirPath = new File(ctxPath);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
// 以时间为文件名
Date date = new Date();
SimpleDateFormat sdformat = new SimpleDateFormat(\"yyyyMMddHHmmss\");// 24小时制
String LgTime = sdformat.format(date);
timeType = LgTime + imgtype;
File uploadFile = new File(ctxPath + timeType);
try {
FileCopyUtils.copy(file.getBytes(), uploadFile);
} catch (IOException e) {
e.printStackTrace();
}
}
String headPhotoPath = \"photo/\" + timeType;
trainer.setPhoto(headPhotoPath);
}
try {
// 根据UserId查询培训师
Long userId = FrontShiroUtil.getUserId();
if (null != userId) {
trainer.setUserId(userId);
// 更新培训师头像
trainerDbSvc.updateTrainerPhoto(trainer);
}
} catch (Exception e) {
e.printStackTrace();
}
return AjaxResult.createSuccess(trainer);//<span style=\"font-family: Arial, Helvetica, sans-serif;\">AjaxResult 可修改</span>
}
/**
* 截取区域上传图片测试
*
* @return
*/
@RequestMapping(value = \"uploadPhotoTest\", method = RequestMethod.POST)
public ModelAndView uploadPhotoTest(MultipartHttpServletRequest request, @RequestParam(\"x1s\") Integer x1,
@RequestParam(\"y1s\") Integer y1, @RequestParam(\"x2s\") Integer x2, @RequestParam(\"y2s\") Integer y2,
@RequestParam(\"imgx\") Integer imgWidth, @RequestParam(\"imgy\") Integer imgHeight) {
ModelAndView mav = leftMenu(\"redirect:/trainer/upload/toUploadPhoto\");
Trainer trainer = null;
try {
// 根据UserId查询培训师
Long userId = FrontShiroUtil.getUserId();
if (null != userId) {
trainer = trainerRepo.findOne(userId);
}
} catch (Exception e) {
e.printStackTrace();
}
File uploadFile = new File(\"E:/rudongImage/\" + trainer.getPhoto());
InputStream is = null;
BufferedImage src = null;
int w = -1;
int h = -1;
try {
is = new FileInputStream(uploadFile);
src = javax.imageio.ImageIO.read(is);
w = src.getWidth(null); // 得到源图宽
h = src.getHeight(null); // 得到源图高
is.close();
} catch (Exception e) {
e.printStackTrace();
}
Integer l = 0;
// 以小边为准(原图尺寸)
if (w < h) {
l = w;
} else {
l = h;
}
// 以小边为准(缩略图尺寸)
Integer l2 = 0;
if (imgWidth < imgHeight) {
l2 = imgWidth;
} else {
l2 = imgHeight;
}
Integer x = (x1 * l) / l2;// 起点x
Integer y = (y1 * l) / l2;// 起点y
Integer xs = (x2 * l) / l2;// 终点x 对角线位置
Integer ys = (y2 * l) / l2;// 终点y 对角线位置
ImageUtil imageUtil = new ImageUtil();
// 返回截取后的文件名
String photoName = \"\";
imageUtil.cutImage(uploadFile, \"E:/rudongImage/photo/\", x, y, xs - x, ys - y);
String headPhotoPath = \"photo/\" + photoName;
trainer.setPhoto(headPhotoPath);
// 更新培训师头像
trainerDbSvc.updateTrainerPhoto(trainer);
return mav;
}
工具类
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* 图片截取工具类
*/
public class ImageUtil {
private Logger log = LoggerFactory.getLogger(getClass());
private static String DEFAULT_THUMB_PREVFIX = \"thumb_\";
private static String DEFAULT_CUT_PREVFIX = \"cut_\";
private static Boolean DEFAULT_FORCE = false;
/**
* <p>Title: cutImage</p>
* <p>Description: 根据原图与裁切size截取局部图片</p>
* @param srcImg 源图片
* @param output 图片输出流
* @param rect 需要截取部分的坐标和大小
*/
public void cutImage(File srcImg, OutputStream output, java.awt.Rectangle rect){
if(srcImg.exists()){
java.io.FileInputStream fis = null;
ImageInputStream iis = null;
try {
fis = new FileInputStream(srcImg);
// ImageIO 支持的图片类型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif]
String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace(\"]\", \",\");
String suffix = null;
// 获取图片后缀
if(srcImg.getName().indexOf(\".\") > -1) {
suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(\".\") + 1);
}// 类型和图片后缀全部小写,然后判断后缀是否合法
if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+\",\") < 0){
log.info(\"Sorry, the image suffix is illegal. the standard image suffix is {}.\" + types);
return ;
}
// 将FileInputStream 转换为ImageInputStream
iis = ImageIO.createImageInputStream(fis);
// 根据图片类型获取该种类型的ImageReader
ImageReader reader = ImageIO.getImageReadersBySuffix(suffix).next();
reader.setInput(iis,true);
ImageReadParam param = reader.getDefaultReadParam();
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageIO.write(bi, suffix, output);
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if(fis != null) fis.close();
if(iis != null) iis.close();
if(output != null) output.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}else {
log.info(\"the src image is not exist.\");
}
}
public void cutImage(File srcImg, OutputStream output, int x, int y, int width, int height){
cutImage(srcImg, output, new java.awt.Rectangle(x, y, width, height));
}
public void cutImage(File srcImg, String destImgPath, java.awt.Rectangle rect){
File destImg = new File(destImgPath);
if(destImg.exists()){
String p = destImg.getPath();
try {
if(!destImg.isDirectory()) p = destImg.getParent();
if(!p.endsWith(File.separator)) p = p + File.separator;
cutImage(srcImg, new java.io.FileOutputStream(p + DEFAULT_CUT_PREVFIX + \"_\" + new java.util.Date().getTime() + \"_\" + srcImg.getName()), rect);
} catch (FileNotFoundException e) {
log.info(\"the dest image is not exist.\");
}
}else log.info(\"the dest image folder is not exist.\");
}
public void cutImage(File srcImg, String destImg, int x, int y, int width, int height){
cutImage(srcImg, destImg, new java.awt.Rectangle(x, y, width, height));
}
public void cutImage(String srcImg, String destImg, int x, int y, int width, int height){
cutImage(new File(srcImg), destImg, new java.awt.Rectangle(x, y, width, height));
}
/**
* <p>Title: thumbnailImage</p>
* <p>Description: 根据图片路径生成缩略图 </p>
* @param imagePath 原图片路径
* @param w 缩略图宽
* @param h 缩略图高
* @param prevfix 生成缩略图的前缀
* @param force 是否强制按照宽高生成缩略图(如果为false,则生成最佳比例缩略图)
*/
public void thumbnailImage(File srcImg, OutputStream output, int w, int h, String prevfix, boolean force){
if(srcImg.exists()){
try {
// ImageIO 支持的图片类型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif]
String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace(\"]\", \",\");
String suffix = null;
// 获取图片后缀
if(srcImg.getName().indexOf(\".\") > -1) {
suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(\".\") + 1);
}// 类型和图片后缀全部小写,然后判断后缀是否合法
if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+\",\") < 0){
log.info(\"Sorry, the image suffix is illegal. the standard image suffix is {}.\" + types);
return ;
}
log.info(\"target image\'s size, width:{}, height:{}.\",w,h);
Image img = ImageIO.read(srcImg);
// 根据原图与要求的缩略图比例,找到最合适的缩略图比例
if(!force){
int width = img.getWidth(null);
int height = img.getHeight(null);
if((width*1.0)/w < (height*1.0)/h){
if(width > w){
h = Integer.parseInt(new java.text.DecimalFormat(\"0\").format(height * w/(width*1.0)));
log.info(\"change image\'s height, width:{}, height:{}.\",w,h);
}
} else {
if(height > h){
w = Integer.parseInt(new java.text.DecimalFormat(\"0\").format(width * h/(height*1.0)));
log.info(\"change image\'s width, width:{}, height:{}.\",w,h);
}
}
}
BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Graphics g = bi.getGraphics();
g.drawImage(img, 0, 0, w, h, Color.LIGHT_GRAY, null);
g.dispose();
// 将图片保存在原目录并加上前缀
ImageIO.write(bi, suffix, output);
output.close();
} catch (IOException e) {
System.out.println(\"generate thumbnail image failed.\"+e);
}
}else{
System.out.println(\"the src image is not exist.\");
}
}
public void thumbnailImage(File srcImg, int w, int h, String prevfix, boolean force){
String p = srcImg.getAbsolutePath();
try {
if(!srcImg.isDirectory()) p = srcImg.getParent();
if(!p.endsWith(File.separator)) p = p + File.separator;
thumbnailImage(srcImg, new java.io.FileOutputStream(p + prevfix +srcImg.getName()), w, h, prevfix, force);
} catch (FileNotFoundException e) {
log.info(\"the dest image is not exist.\"+e);
}
}
public void thumbnailImage(String imagePath, int w, int h, String prevfix, boolean force){
File srcImg = new File(imagePath);
thumbnailImage(srcImg, w, h, prevfix, force);
}
public void thumbnailImage(String imagePath, int w, int h, boolean force){
thumbnailImage(imagePath, w, h, DEFAULT_THUMB_PREVFIX, DEFAULT_FORCE);
}
public void thumbnailImage(String imagePath, int w, int h){
thumbnailImage(imagePath, w, h, DEFAULT_FORCE);
}
public void readUsingImageReader(String src, String dest, int w, int h)throws Exception {
// 取得图片读入器
Iterator readers = ImageIO.getImageReadersByFormatName(\"png\");
ImageReader reader = (ImageReader) readers.next();
// 取得图片读入流
InputStream source = new FileInputStream(src);
ImageInputStream iis = ImageIO.createImageInputStream(source);
reader.setInput(iis, true);
// 图片参数
ImageReadParam param = reader.getDefaultReadParam();
// 100,200是左上起始位置,300就是取宽度为300的,就是从100开始取300宽,就是横向100~400,同理纵向200~350的区域就取高度150
// Rectangle rect = new Rectangle(100, 200, 300, 150);//
int hh = 0;
if (h > 100)
hh = (h - 100) / 3;
Rectangle rect = new Rectangle(0, hh, 227, 100);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageIO.write(bi,\"jpg\", new File(dest));
}
public static void main(String[] args) throws Exception {
//new ImageUtil().thumbnailImage(\"imgs/Tulips.jpg\", 150, 100);
//new ImageUtil().cutImage(\"imgs/Tulips.jpg\",\"imgs\", 250, 70, 300, 400);
//new ImageUtil().readUsingImageReader(\"e://rudongImage/photo/20160302090226.png\", \"e://rudongImage/photo/2.png\", 227, 163);
}
}
xml配置
<bean id=\"multipartResolver\" class=\"org.springframework.web.multipart.commons.CommonsMultipartResolver\"> <!-- one of the properties available; the maximum file size in bytes <property name=\"maxUploadSize\" value=\"9999999999\"/> --> </bean>
插件连接
http://download.csdn.net/download/u014596302/9572377
样式没调 有点丑功能都有。
本文地址:https://www.stayed.cn/item/12990
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我