因为项目当中用到图片裁剪，本来可以不用到后台进行裁剪的，但是要兼容万恶的IE浏览器，所以不得不使用后台进行裁剪。
这次使用到imgareaselect 插件获取需要裁剪区域的坐标，再由后台进行裁剪操作。先上个效果图再说
但是这里有一个坑就是上传的图片过大，可能会造成裁剪的区域跟插件中显示的不一样，所以得现在后台对云图片进行压缩在裁剪。
/**
* 等比例压缩算法：
* 算法思想：根据压缩基数和压缩比来压缩原图，生产一张图片效果最接近原图的缩略图
* @param srcURL 原图地址
* @param deskURL 缩略图地址
* @param comBase 压缩基数
* @param scale 压缩限制(宽/高)比例 一般用1：
* 当scale>=1,缩略图height=comBase,width按原图宽高比例;若scale<1,缩略图width=comBase,height按原图宽高比例
* @throws Exception
*/
public static void saveMinPhoto(String srcURL, String deskURL, double comBase,
double scale) throws Exception {
File srcFile = new java.io.File(srcURL);
String ext = srcURL.substring(srcURL.lastIndexOf(".") + 1);
Image src = ImageIO.read(srcFile);
int srcHeight = src.getHeight(null);
int srcWidth = src.getWidth(null);
int deskHeight = 0;// 缩略图高
int deskWidth = 0;// 缩略图宽
double srcScale = (double) srcHeight / srcWidth;
/**缩略图宽高算法*/
if ((double) srcHeight > comBase || (double) srcWidth > comBase) {
if (srcScale >= scale || 1 / srcScale > scale) {
if (srcScale >= scale) {
deskHeight = (int) comBase;
deskWidth = srcWidth * deskHeight / srcHeight;
} else {
deskWidth = (int) comBase;
deskHeight = srcHeight * deskWidth / srcWidth;
}
} else {
if ((double) srcHeight > comBase) {
deskHeight = (int) comBase;
deskWidth = srcWidth * deskHeight / srcHeight;
} else {
deskWidth = (int) comBase;
deskHeight = srcHeight * deskWidth / srcWidth;
}
}
} else {
deskHeight = srcHeight;
deskWidth = srcWidth;
}
BufferedImage tag = new BufferedImage(deskWidth, deskHeight, BufferedImage.TYPE_3BYTE_BGR);
tag.getGraphics().drawImage(src, 0, 0, deskWidth, deskHeight, null); //绘制缩小后的图
FileOutputStream deskImage = new FileOutputStream(deskURL); //这就是压缩之后在进行裁剪了，好了上完整代码先
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上传头像</title> <link rel="stylesheet" href="../../statics/css/ewt/style_1.css" rel="external nofollow" type="text/css"> <link rel="stylesheet" href="../../statics/css/ewt/style_shangchuangtouxiang.css" rel="external nofollow" > <link rel="stylesheet" type="text/css" href="../../statics/css/ewt/imgareaselect-default.css" rel="external nofollow" > <link rel="stylesheet" href="../../statics/css/ewt/style.css" rel="external nofollow" type="text/css" /> <link rel="stylesheet" href="../../statics/scripts/layer/skin/default/layer.css" rel="external nofollow" > <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <script src="../../statics/scripts/include.js"></script> <script src="../../statics/scripts/template.js"></script> <script src="../../statics/scripts/layer/layer.js"></script> <script src="../../statics/scripts/cropbox.js"></script> <script src="../../statics/scripts/jquery.imgareaselect.pack.js"></script> <script src="../../statics/scripts/ajaxfileupload.js"></script> <script src="../../ewt/user/scripts/shangchuangtouxiang.js"></script> <script src="../../ewt/common/config.js"></script> </head> <body> <include src="../common/user_head.html"></include> <p class="bggg"> <p class="box"> <p class="bos"> <include src="../common/user_menu.html"></include> <p class="bos_r"> <p class="biaoti"> <h3>上传头像</h3> </p> <p style=" width:915px; height: 400; display: block; overflow: hidden; margin: 30px auto; "> <p style=" width:430px; margin:0 auto;"> <p class="frame" style="margin: 0 0.3em; width: 300px; height: 300px; float: left;"> <img id="photo" src="" style="width: 300px; height: 300px;"/> </p> <p id="preview" style="width: 100px; height: 100px; overflow: hidden; float: left;"> <img src="" style="width: 100px; height: 100px;" id="smallImage"/> </p> </p> </p> <p style=" width:425px; margin:30px auto;"> <p class="input_XZ1"> <p class="input_XZ">选择图片</p> <input id="uplodimage" class="input_style" name="uplodimage" type="file" onchange="uplodImage(this)"> </p> <input id="imgUrl" type="hidden"> <input type="button" value="上传" class="input_SC" onclick="upold();"> </p> <input type="hidden" id="x1" value="" /> <input type="hidden" id="y1" value="" /> <input type="hidden" id="x2" value="" /> <input type="hidden" id="y2" value="" /> <input type="hidden" id="w" value="" /> <input type="hidden" id="h" value="" /> </p> </p> </p> </p> <include src="../common/user_footer.html"></include> </body> </html>
js 代码
后台代码
public class CutImageUtils {
public static SecureRandom rnd = new SecureRandom();
public static String cutImage(int x, int y, int width, int height,String srcPath) throws Exception{
String root = ApplicationContext.getProperty("upload_folder");
String imagePath = root+srcPath;
FileInputStream is = null;
ImageInputStream iis = null;
String uploadFolder = null ;
String filepath = null ;
String serverName = null ;
uploadFolder = ApplicationContext.getProperties().getProperty("upload_folder").toString() ;
filepath = generateServerFolder() ;
serverName = generateServerName(srcPath) ;
File file = new File(uploadFolder + filepath);
if (!file.exists()) {
file.mkdirs();
}
try {
// 读取图片文件
saveMinPhoto(imagePath, imagePath, 300, 0.9d);
//resetsize(imagePath, imagePath);
is = new FileInputStream(imagePath);
String ext = srcPath.substring(srcPath.lastIndexOf(".") + 1);
Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(ext);
ImageReader reader = it.next();
// 获取图片流
iis = ImageIO.createImageInputStream(is);
reader.setInput(iis, true);
ImageReadParam param = reader.getDefaultReadParam();
/**
*
* 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
*
* 的左上顶点的坐标(x，y)、宽度和高度可以定义这个区域。
*/
Rectangle rect = new Rectangle(x, y, width, height);
// 提供一个 BufferedImage，将其用作解码像素数据的目标。
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
// 保存新图片
ImageIO.write(bi, ext, new File(uploadFolder + filepath + serverName));
} catch (FileNotFoundException e) {
// TODO Auto-generated catch block
if (is != null)
is.close();
if (iis != null)
iis.close();
e.printStackTrace();
}
return filepath + serverName ;
}
/**
*
* @param config
* @param file
* @param request
* @return
*/
public static String generateServerName(String clientPath) {
//按当前时间的分钟毫秒+3位随机数
Calendar c = Calendar.getInstance();
String min = get(c,Calendar.MINUTE);
String sec = get(c,Calendar.SECOND);
String mis = get(c,Calendar.MILLISECOND);
String rnd = random();
String ext = getFileExt(getClientName(clientPath));
return min + sec + mis + rnd + ext ;
}
/** 客户端文件名 */
public static String getClientName(String clientPath) {
if(null != clientPath){
int index1 = clientPath.lastIndexOf("/");
int index2 = clientPath.lastIndexOf("\\");
if(index2 > index1){
index1 = index2;
}
return clientPath.substring(index1+1,clientPath.length());
}
return null;
}
public static String getFileExt(String fileName){
if(null != fileName){
int dot = fileName.lastIndexOf(".");
if(dot >= 0){
return fileName.substring(dot);
}
}
return "";
}
public static String random(){
String value = String.valueOf(rnd.nextInt(1000));
if(value.length() < 3){
for(int i=value.length();i<3;i++){
value = "0" + value;
}
}
return value;
}
public static String generateServerFolder() {
//按当前年月日和小时生成文件路径
Calendar c = Calendar.getInstance();
String year = get(c,Calendar.YEAR);
String mon = get(c,Calendar.MONTH);
String day = get(c,Calendar.DAY_OF_MONTH);
String hour = get(c,Calendar.HOUR_OF_DAY);
return year + "/" + mon + "/" + day + "/" + hour + "/";
}
public static String get(Calendar c,int field){
int v = c.get(field);
if(field == Calendar.MONTH){
v += 1;
}
String value = String.valueOf(v);
if(value.length() == 1){
value = "0" + value;
}
return value;
}
/**
* 缩小图片到固定长高
* @param srcImagePath 读取图片路径
* @param toImagePath 写入图片路径
* @param width 缩小后图片宽度
* @param height 缩小后图片长度
* @throws IOException
*/
public static void reduceImageByWidthHeight(String srcImagePath, String toImagePath, int width, int height) throws IOException{
FileOutputStream out = null;
try{
//读入文件
File file = new File(srcImagePath);
String ext = srcImagePath.substring(srcImagePath.lastIndexOf(".") + 1);
// 构造Image对象
BufferedImage src = javax.imageio.ImageIO.read(file);
// 缩小边长
BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 绘制缩小后的图片
tag.getGraphics().drawImage(src, 0, 0, width, height, null);
out = new FileOutputStream(toImagePath);
ImageIO.write(tag, ext, new File(toImagePath));
}catch(Exception e){
e.printStackTrace();
}finally{
if(out != null){
out.close();
}
out = null;
System.gc();
}
}
/**
* 等比例压缩算法：
* 算法思想：根据压缩基数和压缩比来压缩原图，生产一张图片效果最接近原图的缩略图
* @param srcURL 原图地址
* @param deskURL 缩略图地址
* @param comBase 压缩基数
* @param scale 压缩限制(宽/高)比例 一般用1：
* 当scale>=1,缩略图height=comBase,width按原图宽高比例;若scale<1,缩略图width=comBase,height按原图宽高比例
* @throws Exception
*/
public static void saveMinPhoto(String srcURL, String deskURL, double comBase,
double scale) throws Exception {
File srcFile = new java.io.File(srcURL);
String ext = srcURL.substring(srcURL.lastIndexOf(".") + 1);
Image src = ImageIO.read(srcFile);
int srcHeight = src.getHeight(null);
int srcWidth = src.getWidth(null);
int deskHeight = 0;// 缩略图高
int deskWidth = 0;// 缩略图宽
double srcScale = (double) srcHeight / srcWidth;
/**缩略图宽高算法*/
if ((double) srcHeight > comBase || (double) srcWidth > comBase) {
if (srcScale >= scale || 1 / srcScale > scale) {
if (srcScale >= scale) {
deskHeight = (int) comBase;
deskWidth = srcWidth * deskHeight / srcHeight;
} else {
deskWidth = (int) comBase;
deskHeight = srcHeight * deskWidth / srcWidth;
}
} else {
if ((double) srcHeight > comBase) {
deskHeight = (int) comBase;
deskWidth = srcWidth * deskHeight / srcHeight;
} else {
deskWidth = (int) comBase;
deskHeight = srcHeight * deskWidth / srcWidth;
}
}
} else {
deskHeight = srcHeight;
deskWidth = srcWidth;
}
BufferedImage tag = new BufferedImage(deskWidth, deskHeight, BufferedImage.TYPE_3BYTE_BGR);
tag.getGraphics().drawImage(src, 0, 0, deskWidth, deskHeight, null); //绘制缩小后的图
FileOutputStream deskImage = new FileOutputStream(deskURL); //
Copyright © 2019-2025 51dongshi.net 版权所有
违法及侵权请联系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市万商天勤律师事务所王兴未律师提供法律服务
