hzf1993通过本文主要向大家介绍了利用imgareaselect辅助后台实现图片上传裁剪等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
因为项目当中用到图片裁剪，本来可以不用到后台进行裁剪的，但是要兼容万恶的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); //输出到文件流
ImageIO.write(tag, ext, new File(deskURL));
deskImage.close();
}
</div>
这就是压缩之后在进行裁剪了，好了上完整代码先
<!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>
<div class="bggg">
<div class="box">
<div class="bos">
<include src="../common/user_menu.html"></include>
<div class="bos_r">
<div class="biaoti">
<h3>上传头像</h3>
</div>
<div style=" width:915px; height: 400; display: block; overflow: hidden; margin: 30px auto; ">
<div style=" width:430px; margin:0 auto;">
<div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px; float: left;">
<img id="photo" src="" style="width: 300px; height: 300px;"/>
</div>
<div id="preview" style="width: 100px; height: 100px; overflow: hidden; float: left;">
<img src="" style="width: 100px; height: 100px;" id="smallImage"/>
</div>
</div>
</div>
<div style=" width:425px; margin:30px auto;">
<div class="input_XZ1">
<div class="input_XZ">选择图片</div>
<input id="uplodimage" class="input_style" name="uplodimage" type="file" onchange="uplodImage(this)">
</div>
<input id="imgUrl" type="hidden">
<input type="button" value="上传" class="input_SC" onclick="upold();">
</div>
<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="" />
</div>
</div>
</div>
</div>
<include src="../common/user_footer.html"></include>
</body>
</html>
</div>
js 代码
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
$('#preview img').css({
width: Math.round(scaleX * 300),
height: Math.round(scaleY * 300),
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);
}
$(function () {
});
//上传原始图片
function uplodImage(target) {
if(checkImage(target)){
var url = httpUtils.rootPath+'/component/upload.do';
$.ajaxFileUpload({
url: url, //用于文件上传的服务器端请求地址
secureuri: false, //是否需要安全协议，一般设置为false
fileElementId: 'uplodimage', //文件上传域的ID
dataType: 'json', //返回值类型 一般设置为json
success: function (data) //服务器成功响应处理函数
{
var filePath = data.filePath;
$('#photo').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath);
$('#smallImage').attr('src',httpUtils.rootPath+'/component/upload.do?action=download&filepath='+filePath);
$('#imgUrl').val(filePath);
$('#photo').imgAreaSelect({
aspectRatio: '1:1',
x1: 50, y1: 50, x2: 241, y2: 241,
handles: true,
fadeSpeed: 200,
onSelectChange: preview
});
$('#x1').val("