一、Jcrop简介
Jquey Jcrop是一款功能强大的图像裁剪插件,结合服务端的处理可实现图片裁剪,改变等功能。
具有如下特点:
显示图像或块对象
支持图片的最大,最小值的设置
有交互性的API,包含动画
提供CSS样式的定义
支持IOS,android等平台
二、使用方法
1.载入 CSS 文件
<link type="text/css" rel="stylesheet" href="../css/jquery.Jcrop.css" />
2.载入 JavaScript 文件
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="../js/jquery.Jcrop.js"></script>
3.给 IMG 标签加上 ID
<div class="Preview-pic" id="previewIcon">
<img id="imgCrop" class="imgCrop" name="imgCrop"
width="300" height="300" border="0" src=""/>
</div>
4.调用 Jcrop
jcrop_api=$.Jcrop('#imgCrop',{
aspectRatio: 1,
onChange: showCoords, // 选框改变时的事件
onSelect: showCoords // 选框选定时的事件
});
三、使用实例
1.下载Jcop的依赖文件,下载地址如下:
http://deepliquid.com/content/Jcrop.html,将css和js文件引入项目中 。
2.页面定义
<header class="head-revision-top clearfix">
<h4 class="fl" id="sysField">
<a href="">系统头像</a>
</h4>
<p class="fr head-revision-file">
<input class="head-revision-input" type="file"
accept="image/*" name="uploadFile" id="uploadFile" onchange="checkImgType(this);" />
</p>
</header>
<div class="head-revision mt20 clearfix" id="uploadIcon">
<div class="Preview-pic" id="previewIcon">
<img id="imgCrop" class="imgCrop" name="imgCrop"
width="300" height="300" border="0" src=""/>
</div>
3.js实现
var firstFlag = false,count=0;
var jcrop_api, boundx, boundy;
$(function(){
$('#userIconBtn').click(function() {
var x = $("#x").val();
var y = $("#y").val();
var w = $("#w").val();
var h = $("#h").val();
if (w == 0 || h == 0) {
alert("您还没有选择图片的剪切区域,不能进行剪切图片!");
return;
}else{
$.ajax({
url: '',
data: $('#uploadIconForm').serialize(),
type: "POST",
beforeSend: function()
{
},
success: function()
{
// 提交成功,刷新页面
//location.reload(true);
window.location.href="";
}
});
}
});
});
/**检查图片上传类型*/
function checkImgType(obj){
//更换头像销毁原有的jcrop
if(count>=1){
firstFlag=false;
jcrop_api.destroy();
}
var uploadFile = '';
//获取图片的全路径
var imgFilePath = getImgFullPath(obj);
var endIndex = imgFilePath.lastIndexOf("\\");
var lastIndex = imgFilePath.length-endIndex-1;
if (endIndex != -1)
uploadFile= imgFilePath.substr(endIndex+1,lastIndex);
else
uploadFile = imgFilePath;
var tag = true;
endIndex = imgFilePath.lastIndexOf(".");
if (endIndex == -1)
tag = false;
var ImgName = imgFilePath.substr(endIndex+1,lastIndex);
ImgName = ImgName.toUpperCase();
if (ImgName !="GIF" && ImgName !="JPG" && ImgName !="PNG" && ImgName !="BMP"){
tag=false;
}
if (!tag) {
alert("上传图片的文件类型必须为: *.gif,*.jpg,*.png,*.bmp,请重新选择!")
Upload.clear(obj);
return false;
}else{
count++;
$.ajaxFileUpload({
url: "user!uploadFile", //需要链接到服务器地址
secureuri:false,
fileElementId:"uploadFile", //文件选择框的id属性
dataType: "json", //服务器返回的格式,可以是json
success: function(data){
if(data.resultCode=1){
$("#imgCrop").attr("src",data.resultInfo);
$("#imgCrop").attr("width",data.width);
$("#imgCrop").attr("height",data.height);
$("#width").val(data.width);
$("#height").val(data.height);
$("#imgFileExt").val(data.imgFileExt);
$("#oldImgPath").val(data.oldImgPath);
jcrop_api=$.Jcrop('#imgCrop',{
aspectRatio: 1,
onChange: showCoords, // 选框改变时的事件
onSelect: showCoords // 选框选定时的事件
});
}else{
alert("系统连接有误,请重新上传或连接管理员");
}
jcrop_api.enable();
jcrop_api.setImage(data.resultInfo);
jcrop_api.animateTo([0,0,200,200]);
jcrop_api.setOptions({
allowResize:true,
allowSelect: false,
allowMove:true
});
//获取图片的实际尺寸
var bounds=jcrop_api.getBounds();
boundx=bounds[0];
boundy=bounds[1];
}
});
}
}
function getImgFullPath(obj) {
if (obj) {
//ie
if (window.navigator.userAgent.indexOf("MSIE") >= 1) {
obj.select();
return document.selection.createRange().text;
}
//firefox
else if (window.navigator.userAgent.indexOf("Firefox") >= 1) {
if (obj.files) {
return obj.files.item(0).getAsDataURL();
}
return obj.value;
}
return obj.value;
}
}
function showCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#x2').val(c.x2);
$('#y2').val(c.y2);
$('#w').val(c.w);
$('#h').val(c.h);
if(!firstFlag){
exchange();
}
showPreview(c);
}
function exchange(){
firstFlag = true;
$('#preview').attr("src", $('#imgCrop').attr("src"));
}
function showPreview(coords) {
if (parseInt(coords.w) > 0) {
var rx = 200 / coords.w;
var ry = 200 / coords.h;
$('#preview').css({
width:Math.round(200/ coords.w * boundx) + 'px', //200 为预览div的宽和高
height:Math.round(200/ coords.h * boundy)+ 'px',
marginLeft : '-' + Math.round(rx * coords.x) + 'px',
marginTop : '-' + Math.round(ry * coords.y) + 'px'
});
}
}
4.服务器处理(java)
public String uploadFile() {
int result = Constant.RET_OK;
String resultUrl = "";
String imgUploadPath = "";
// 图片初始化高度与宽度
String width = null;
String height = null;
int imgWidth = 0;
int imgHeight = 0;
SimpleDateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
String userWebAppPath = getWebAppPath();
/** 检查是否有图片上传文件夹 */
FileUtil.checkImageDir(userWebAppPath);
try {
UserPOJO userSession = (UserPOJO) getSession(Constant.USERLOGINSESSION);
if (null == userSession) {
result = Constant.ISSESSIONERROR;
}
// 指定图片宽度和高度
width = getRequest().getParameter("width");
if (null == width || "".equals(width)) {
width = "300";
}
height = getRequest().getParameter("height");
if (null == height || "".equals(height)) {
height = "300";
}
imgWidth = Integer.parseInt(width);
imgHeight = Integer.parseInt(height);
List<File> files = getUploadFile();
if (files != null && files.size() > 0) {
for (int i = 0; i < files.size(); i++) {
File userFile = files.get(i);
try {
String filePath = FileUtil.saveLocalImg(userFile, userWebAppPath + "\\"
+ getUploadFileFileName().get(0));
BufferedImage src = ImageIO.read(new File(filePath)); // 读入文件
int imgSrcWidth = src.getWidth(); // 得到源图宽
int imgSrcHeight = src.getHeight(); // 得到源图长
// 重新指定大小
if (imgSrcWidth >= imgSrcHeight) {
imgWidth = imgSrcWidth > 300 ? 300 : imgSrcWidth;
imgHeight = (int) (imgWidth * (float) imgSrcHeight / (float) imgSrcWidth);
imgHeight = imgHeight < 200 ? 200 : imgHeight;
} else {
imgHeight = imgSrcHeight > 300 ? 300 : imgSrcHeight;
imgWidth = (int) (imgHeight * (float) imgSrcWidth / (float) imgSrcHeight);
imgWidth = imgWidth < 200 ? 200 : imgWidth;
}
// 按照图片的设置大小生成
ImageCut.scale(src, userFile, imgWidth, imgHeight);
log.info("创建" + imgWidth + "*" + imgHeight + "图片成功");
// 上传图片到图片服务器并获得访问地址
FileInputStream fis = new FileInputStream(userFile);
byte[] fileBytes = new byte[fis.available()];
fis.read(fileBytes);
fis.close();
resultUrl = FileUtil.getImageUrl(FileUtil.getExtName(this.getUploadFileFileName().get(0)),
fileBytes);
// 将远程服务器得到的文件保存到该服务器
String newFileName = df.format(new Date()) + "_" + new Random().nextInt(1000) + "."
+ FileUtil.getExtName(this.getUploadFileFileName().get(0));
imgUploadPath = IMGROOT + newFileName;
FileUtil.saveImageToLocal(resultUrl, userWebAppPath + newFileName);
} catch (IOException e) {
e.printStackTrace();
}
}
}
} catch (Exception e) {
e.printStackTrace();
result = Constant.SYSTEM_ERROR;
}
Map<Object, Object> infoMap = new HashMap<Object, Object>();
infoMap.put(Constant.RESULT_CODE_KEY, result);
infoMap.put(Constant.RESULT_INFO, resultUrl);
infoMap.put("width", imgWidth);
infoMap.put("height", imgHeight);
infoMap.put("oldImgPath", imgUploadPath);
infoMap.put("imgFileExt", FileUtil.getExtName(this.getUploadFileFileName().get(0)));
JSONObject json = JSONObject.fromObject(infoMap);
writeJSON(json.toString());
return null;
}
四、API接口及参数说明
http://code.ciaoca.com/jquery/jcrop/