前端用的是 Jcrop+FileAPI,后台用jfinal写如何接收Canvas内的图片？

Question

<canvas width="150" height="150"></canvas>

var el = $('input').get(0);


FileAPI.event.on(el, 'change', function(evt) {
var files = FileAPI.getFiles(evt); // Retrieve file list


FileAPI.filterFiles(files, function(file, info) {
if (!/^image/.test(file.type)) {
alert('图片格式不正确');
return false;
} else if (file.size > 20 * FileAPI.MB) {
alert('图片必须小于20M');
return false;
} else {
return true;
}


}, function(files, rejected) {
 console.log(files);
if (files.length) {
var file = files[0];
var img0 = FileAPI.Image(file);
var img1 = FileAPI.Image(file);
var ratio = 0;
FileAPI.getInfo(file, function(err, info) { //get image ratio
if (!err) {
if (info.width > info.height) {
ratio = info.width / 500;
} else {
ratio = info.height / 500;
}
}
});


img0.resize(500, 500, 'max') //place image and register jcrop
.get(function(err, img) {
$('#img2').empty();
$('#img2').append($(img));


$('#img2').children().Jcrop({
aspectRatio : 1,
bgColor : 'rgba(0,0,0,0.4)',
onSelect : function(c) {
img1.matrix.sx = c.x * ratio;
img1.matrix.sy = c.y * ratio;
img1.matrix.sw = c.w * ratio;
img1.matrix.sh = c.h * ratio;
img1.matrix.dw = 150;
img1.matrix.dh = 150;


img1.get(function(err, img) {
// $('#img3').empty();
//   $('#img3').append($(img));
$('#img3').html($(img));
});


}
});
});
$('#btn').on('click', function() {
FileAPI.upload({
url : '/console/action/upfile',
//headers: { 'Content-Type': 'multipart/form-data' },
files : {
images : img1
},
progress : function(evt) { /* ... */
},
complete : function(err, xhr) { /* ... */
alert(xhr.responseText);


}
});


});


}
});
});

Answer 1

把坐标传到后台去，后台切割图片