我的jcrop代码
$(function(){
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
//console.log('init',[xsize,ysize]);
$('#target').Jcrop({
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo,
setSelect: [0, 0, 150, 180],
boxWidth: 400, boxHeight: 300,
allowMove: true,
allowResize: true,
allowSelect: true,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
// update info by cropping (onChange and onSelect events handler)
function updateInfo(e) {
if (parseInt(e.w) > 0) {
var rx = xsize / e.w;
var ry = ysize / e.h;
$pimg.css({
width : Math.round(rx * boundx) + 'px',
height : Math.round(ry * boundy) + 'px',
marginLeft : '-' + Math.round(rx * e.x) + 'px',
marginTop : '-' + Math.round(ry * e.y) + 'px'
});
}
$('#x1').val(e.x);
$('#y1').val(e.y);
$('#w').val(e.w);
$('#h').val(e.h);
};
// clear info by cropping (onRelease event handler)
function clearInfo() {
$('#w').val('');
$('#h').val('');
};
});
Java controller which handles it
@RequestMapping(value = "/editProfileImage", method = RequestMethod.POST)
public @ResponseBody
FileMeta edit(MultipartHttpServletRequest request,
@RequestParam(value = "x1") final int x1,
@RequestParam(value = "y1") final int y1,
@RequestParam(value = "w") final int w,
@RequestParam(value = "h") final int h) throws Exception {
Iterator<String> itr = fileIterator(request);
MultipartFile mpf = null;
final FileMeta fileMeta = new FileMeta();
// 2. get each file
while (itr.hasNext()) {
mpf = getMultipartFile(request, itr);
checkIfEmpty(mpf);
checkifValidFormat(mpf);
final BufferedImage subImage = getBufImage(mpf).getSubimage(x1, y1, w, h);
//final BufferedImage resizedImage = resizeImage(subImage);
ByteArrayOutputStream baos = new ByteArrayOutputStream();
ImageIO.write(subImage,
mpf.getContentType().replace("image/", ""), baos);
final Account account = accountManager.findBySigin((String) request
.getAttribute("account"));
profilePictureService.saveProfilePicture(account.getId(),
baos.toByteArray());
prepareMetaInformation(mpf, fileMeta, account, baos);
}
return fileMeta;
}
此代码适用于某些图像,但对大多数图像效果不佳。有没有人有任何线索。
例如,对于以下图片 它完美无缺,因为我完美地获得了裁剪图像。
但是对于此图片,例如 我没有正确获得裁剪的图像。
答案 0 :(得分:4)
我使用下面的代码,它的作品对我来说。请通过下面的代码。
你的问题在这里:
setSelect: [0, 0, 150, 180],
你传递的是
jQuery(function ($) {
// Create variables (in this scope) to hold the API and image size
var jcrop_api,
boundx,
boundy,
// Grab some information about the preview pane
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
console.log('init', [xsize, ysize]);
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
onSelect: storeCoords,
aspectRatio: xsize / ysize,
boxWidth: 350, boxHeight: 350
}, function () {
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c) {
if (parseInt(c.w) > 0) {
var rx = xsize / c.w;
var ry = ysize / c.h;
$pimg.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'
});
}
// storeCoords(c);
};
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
});
请从您的代码中分离出此功能。
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
将调用storeCoords放在您之前设置的固定坐标上 如
setSelect:storeCoords ,
答案 1 :(得分:1)
如果没有控制台日志显示可能识别问题的错误,您将不得不解决我发现的不一致问题。 ID标签应该仅用于一个元素。我看到你正在使用ID标签,大概是为了多个图像。这不符合HTML 5的合规性,因为ID仅用于一个对象,而类用于多个对象。您应该切换到一个类并遍历分配了该类的对象。例如:
$(".cropimages").each(function(index) {
$(this).Jcrop({
onChange: updateInfo,
onSelect: updateInfo,
onRelease: clearInfo,
setSelect: [0, 0, 150, 180],
boxWidth: 400, boxHeight: 300,
allowMove: true,
allowResize: true,
allowSelect: true,
aspectRatio: xsize / ysize
}, function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
$preview.appendTo(jcrop_api.ui.holder);
});
});
使用该代码,请确保您的所有图片都使用班级cropimages
。这应该遍历每个,然后裁剪它们。另外,请确保您拥有所有必需的库,并检查控制台是否有错误。