jcrop java_jcrop截图并上传服务器 + java

//check for selected crop region

functioncheckForm() {if (parseInt($('#w').val()))return true;

$('.error').html('请先选择图片，并且截图').show();return false;

}//update info by cropping (onChange and onSelect events handler)

var oImage =undefined;var blob =undefined;var jcrop_api =undefined;functionupdateInfo(e) {/*$('#x').val(e.x);

$('#y').val(e.y);

$('#x2').val(e.x2);

$('#y2').val(e.y2);

$('#w').val(e.w);

$('#h').val(e.h);*/

if(parseInt(e.w) > 0){//计算预览区域图片缩放的比例，通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到

var rx = $("#preview_box").width() /e.w;var ry = $("#preview_box").height() /e.h;//通过比例值控制图片的样式与显示

$("#crop_preview").css({

width:Math.round(rx* $("#preview").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积

height:Math.round(rx * $("#preview").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积

marginLeft:"-" + Math.round(rx * e.x) + "px",

marginTop:"-" + Math.round(ry * e.y) + "px"});//var canvas=$('#previewCanvas')[0];

//展示长度与实际长度的比例

var xp = e.x/$("#preview").width();

var yp = e.y/$("#preview").height();

//var canvas = $('')[0],

/*$('#previewCanvas').css({

width:Math.round(oImage.width/rx) + "px",

height:Math.round(oImage.height/ry) + "px"

});*///通过比例来计算实际图片所需截取的尺寸

$('#x').val(Math.round(oImage.width*xp));

$('#y').val(Math.round(oImage.height*yp));

$('#w').val(Math.round(oImage.width/rx));

$('#h').val(Math.round(oImage.height/ry));

//被注释掉的代码是用canvas画图的，不过我这里接下的涂油一点问题所以没有采用，如果又能解决的话一定要通知我

/*ctx=canvas.getContext('2d');

ctx.drawImage(oImage,Math.round(oImage.width*xp),Math.round(oImage.height*yp),Math.round(oImage.width/rx),Math.round(oImage.height/ry),0,0,Math.round(oImage.width/rx),Math.round(oImage.height/ry));

//console.trace(ctx);

//ctx.drawImage(oImage,Math.round(oImage.width*xp),Math.round(oImage.height*yp),1000,1000,0,0,1000,1000);

var data=canvas.toDataURL();

// dataURL 的格式为 “data:image/png;base64,****”,逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了

data=data.split(',')[1];

data=window.atob(data);

var ia = new Uint8Array(data.length);

for (var i = 0; i < data.length; i++) {

ia[i] = data.charCodeAt(i);

};

// canvas.toDataURL 返回的默认格式就是 image/png

blob=new Blob([ia], {type:"image/png"});*/

//$(document.body).append(canvas);

}

};//clear info by cropping (onRelease event handler)

functionclearInfo() {

$('.info #w').val('');

$('.info #h').val('');

}functionfileSelectHandler() {//清空原有图片路径

$("#partyheadUrl").val("");//get selected file

var oFile = $('#image_file')[0].files[0];//hide all errors

$('.error').hide();//check for image type (jpg and png are allowed)

var rFilter = /^(image\/jpeg|image\/png|image\/jpg)$/i;if (!rFilter.test(oFile.type)) {

$('.error').html('请选择jpg、jpeg或png格式的图片').show();return;

}//check for file size

/*if (oFile.size > 1000 * 1024) {

$('.error').html('请上传小于1M的图片').show();

return;

}*/

//preview element

oImage = document.getElementById('preview');var crop_preview = document.getElementById('crop_preview');//prepare HTML5 FileReader

var oReader = newFileReader();

oReader.οnlοad= function(e) {//destroy Jcrop if it is existed在上传文件变化时一定要销毁jcrop_api否则$("#preview")展示图片不会变

if (typeof jcrop_api != 'undefined')

jcrop_api.destroy();//e.target.result contains the DataURL which we can use as a source of the image

oImage.src =e.target.result;

crop_preview.src=e.target.result;

oImage.οnlοad= function() { //onload event handler

//display step 2

$('.step2').fadeIn(500);//display some basic image info

var sResultFileSize =bytesToSize(oFile.size);

$('#filesize').val(sResultFileSize);

$('#filetype').val(oFile.type);

$('#filedim').val(oImage.naturalWidth + ' x ' +oImage.naturalHeight);//Create variables (in this scope) to hold the Jcrop API and image size

varboundx, boundy;//initialize Jcrop

$('#preview').Jcrop({

minSize: [32, 32], //min crop size

aspectRatio: 1, //keep aspect ratio 1:1

bgFade: true, //use fade effect

bgOpacity: .3, //fade opacity

onChange: updateInfo,

onSelect: updateInfo,

onRelease: clearInfo

},function() {//use the Jcrop API to get the real image size

var bounds = this.getBounds();

boundx= bounds[0];

boundy= bounds[1];//Store the Jcrop API in the jcrop_api variable

jcrop_api = this;

jcrop_api.setSelect([50,50,150,150]);

});

};

};//read selected file as DataURL

oReader.readAsDataURL(oFile);

}

//后台返回图片地址functionfileImport_callBack(filePath){ parent.$("#partyheadUrl").val(filePath);

parent.$("#logoPhoto").attr("src",filePath);

closeDialog("dialog");

}