jquery.Jcrop结合JAVA后台实现图片裁剪上传实例

2020-05-24 21:41:30易采站长站整理

if(ext!=".JPEG"&&ext!=".PNG"&&ext!=".JPG"){
$("#msg").text('请选择一个有效的图像文件(jpg,png是允许的)').css('color','red');
$(this).val("");
return;
}

$("#fileUp").ajaxSubmit({
type: "POST",
url:"/file/img/upload",
dataType: "json",
contentType:"application/json",
success: function(parameter){
$("#target2").attr('src','/upload/'+parameter.fileName);
$("#filePathInput").val('/upload/'+parameter.fileName);
if($("#format").text()=="重新上传"){
jcrop_api.destroy()
}
$("#format").text("重新上传");
//启动jcrop支持
openJcrop('/upload/'+parameter.fileName);
},
error : function(data) {
alert("ajax传输发生错误!!!");
}
});
});
function photoSummit(){

//alert($("#w").val()+","+$("#h").val()+","+$("#x").val()+","+$("#y").val());
//$("#fileUp").attr("action", "/file/img/upload").submit();
if($("#w").val()>0 && $("#h").val()>0){
$("#fileUp").ajaxSubmit({
type: "POST",
url:"/file/img/cutandscale",
dataType: "json",
contentType:"application/json",
success: function(data){
$("#msg").text('上传头像成功!!!').css('color','red');
//alert($("#filePathInput").val());
window.parent.back($("#filePathInput").val());
},
error : function(data) {
alert("ajax传输发生错误!!!");
}
});
}else{
$("#msg").text('请用鼠标截取图片').css('color','red');
}
}
//启动jcrop
function openJcrop(imgPath){
//启动jcrop支持
var boundx,boundy,
xsize = $('#preview-pane .preview-container').width(),
ysize = $('#preview-pane .preview-container').height();

$('#target').Jcrop({
minSize: [110, 110],
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
jcrop_api = this;
});
jcrop_api.setImage(imgPath);
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = xsize / c.w;
var ry = ysize / c.h;

$('#preview-pane .preview-container img').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'