我正在尝试使用带有Java Stuff的JQuery Jcrop插件裁剪图像,但我无法获得正确的结果。
Jsp代码:
<script type="text/javascript">
$(function () {
$('#actualImage').Jcrop({
setSelect: [0, 0, 268, 180],
addClass: 'custom',
bgColor: 'yellow',
bgOpacity: .8,
//sideHandles: true
allowResize: false,
allowSelect: false,
onSelect: storeCoords
});
});
function storeCoords(c) {
jQuery('#X1').val(c.x);
jQuery('#Y1').val(c.y);
jQuery('#X2').val(c.x2);
jQuery('#Y2').val(c.y2);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
}
function cropPicture(){
$.ajax({
url: "cropPhoto.htm",
type: "POST",
data :{
x : $('input#X1').val(),
y : $('input#Y1').val(),
x2 : $('input#X2').val(),
y2 : $('input#Y2').val(),
w : $('input#W').val(),
h : $('input#H').val(),
imageName : $('input#imageName').val()
},
success: function (data) {
window.location = 'photo.htm';
}
}
</script>
Java代码:
@RequestMapping(value = "cropPhoto.htm", method = RequestMethod.POST)
public String cropPhoto(HttpServletRequest request,HttpServletResponse response,
HttpSession session) throws IOException{
int x1=Integer.parseInt(request.getParameter("x"));
int y1=Integer.parseInt(request.getParameter("y"));
int x2=Integer.parseInt(request.getParameter("x2"));
int y2=Integer.parseInt(request.getParameter("y2"));
int w=Integer.parseInt(request.getParameter("w"));
int h=Integer.parseInt(request.getParameter("h"));
System.out.println(x1+" "+y1+" "+x2+" "+y2+" "+w+" "+" "+h);
String image = request.getParameter("imageName");
System.out.println("imageName"+image);
String sourcePath = request.getRealPath("") + "/FreeTemp/";
String serverPath = sourcePath + session.getAttribute("uploadFile");
serverPath = serverPath.replace("\\", "/");
System.out.println(serverPath);
BufferedImage bi = ImageIO.read(new File(serverPath));
BufferedImage out = bi.getSubimage(x1, y1, w, h);
ImageIO.write(out,"jpg",new File(sourcePath + image));
session.setAttribute("croppedImage", image);
PrintWriter writer = response.getWriter();
response.setContentType("text/html");
return "redirect:/savephoto.htm";
}
我可以裁剪照片,但结果不正确。例如,请查看以下图像:
答案 0 :(得分:1)
实际问题是图像裁剪:您没有计算图像的实际自然高度和自然宽度。你可以试试这个:
function showCoords(c) {
// get image natural height/width for server site crop image.
var imageheight = document.getElementById('cropbox').naturalHeight;
var imagewidth = document.getElementById('cropbox').naturalWidth;
var xper = (c.x * 100 / jQuery('#cropbox').width());
var yper = (c.y * 100 / jQuery('#cropbox').height());
var wPer = (c.w * 100 / jQuery('#cropbox').width());
var hper = (c.h * 100 / jQuery('#cropbox').height());
var actX = (xper * imagewidth / 100);
var actY = (yper * imageheight / 100);
var actW = (wPer * imagewidth / 100);
var actH = (hper * imageheight / 100);
jQuery('#x').val(parseInt(actX));
jQuery('#y').val(parseInt(actY));
jQuery('#w').val(parseInt(actW));
jQuery('#h').val(parseInt(actH));
};
如果您想要一个完整的示例,请参阅this link
答案 1 :(得分:0)
是的,我遇到了问题。我需要调整图像大小。所以,我已经使用了以下代码:
public static BufferedImage resizeImage(BufferedImage originalImage, int type){
BufferedImage resizedImage = new BufferedImage(IMG_WIDTH, IMG_HEIGHT, type);
Graphics2D g = resizedImage.createGraphics();
g.drawImage(originalImage, 0, 0, IMG_WIDTH, IMG_HEIGHT, null);
g.dispose();
return resizedImage;
}
现在我可以获得裁剪的图像。