Jcrop没有正确裁剪图像 [英] Jcrop not cropping properly the images
本文介绍了Jcrop没有正确裁剪图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的jcrop代码
$（function（）{
//创建变量这个范围）来保存API和图像大小
var jcrop_api，
boundx，
boundy，
//获取有关预览窗格的一些信息
$ preview = $（'＃preview-pane'），
$ pcnt = $（'＃preview-pane .preview-container'），
$ pimg = $（'＃preview-pane .preview -container img'），
xsize = $ pcnt.width（），
ysize = $ pcnt.height（）;
//console.log ''';'$'$'$'$'$'$'$'$'$'$'$'$'
setSelect：[0,0,150,180]，
boxWidth：400，boxHeight：300，
allowMove：true，
allowResize：true，
allowSelect： true，
aspectRatio：xsize / ysize
}，function（）{
//使用API获取实际图像大小
var bounds = this.getBounds（）;
boundx = bounds [0];
boundy = boun ds [1];
//将API存储在jcrop_api变量中
jcrop_api = this;
//将预览移动到jcrop容器中进行css定位
$ preview.appendTo（jcrop_api.ui.holder）;
}）;
//通过裁剪更新信息（onChange和onSelect事件处理函数）
函数updateInfo（e）{
if（parseInt（ew）> 0）{
var rx = xsize / ew;
var ry = ysize / e.h;
$ pimg.css（{
width：Math.round（rx * boundx）+'px'，
height：Math.round（ry * boundy）+'px '，
marginLeft：' - '+ Math.round（rx * ex）+'px'，
marginTop：' - '+ Math.round（ry * ey）+'px'
}）;
}
$（'＃x1'）。val（e.x）;
$（'＃y1'）。val（e.y）;
$（'＃w'）。val（e.w）;
$（'＃h'）。val（e.h）;
};
//通过裁剪清除信息（onRelease事件处理程序）
函数clearInfo（）{
$（'＃w'）。val（''）;
$（'＃h'）。val（''）;
};
}）;
处理它的Java控制器
@RequestMapping（value =/ editProfileImage，method = RequestMethod.POST）
public @ResponseBody
FileMeta编辑（MultipartHttpServletRequest请求，
@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.获取每个文件
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帐户= accountManager.findBySigin（（String）request
.getAttribute（account））;
profilePictureService.saveProfilePicture（account.getId（），
baos.toByteArray（））;
prepareMetaInformation（mpf，fileMeta，account，baos）;
}
返回fileMeta;
}
此代码适用于某些图片，但对于大部分图片都不起作用。是否有人有任何线索。
例如下面的图片它完美的作品，因为我得到了完美的裁剪图像。
但是对于这个图像，例如
我没有正确获得裁剪后的图片。
解决方案
我已经在下面的代码和它的作品中使用过了......请仔细阅读下面的代码。
setSelect：[0，0，150，180]，
你传递的是常量
jQuery（function（$） {
//创建变量（在此范围内）以保存API和图像大小
var jcrop_api，
boundx，
boundy，
//获取有关预览窗格
的一些信息$ 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（）{
//使用API获取实际图像大小
var bounds = this.getBounds（）;
boundx = bounds [0];
boundy = bounds [1];
//将API存储在jcrop_api变量中
jcrop_api = this;
/ /将预览移动到jcrop容器中进行css定位
$ preview.appendTo（jcrop_api.ui.holder）;
}）;
函数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 * cx）+'px'，
marginTop：' - '+ Math.round（ry * cy）+'px'
}）;
}
// storeCoords（c）;
};
函数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（cx）;
jQuery（'＃Y'）。val（c.y）;
jQuery（'＃W'）。val（c.w）;
jQuery（'＃H'）。val（c.h）;
};
然后在您设置的固定坐标处调用storeCoords作为
setSelect：storeCoords，
My jcrop code
$(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;
}
This code works fine for some images but dont work fine for most of the images. Does anybody has any clue.
For example for the following image It works perfect because i am getting the cropped image perfectly.
But for this image for example I am not getting the cropped image correctly.
解决方案
I have used below code and its works for me..Please go through below one.
Your Problem is Here:
setSelect: [0, 0, 150, 180],
which you are passing constant
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);
};
});
Please separate out this function from your code.
function storeCoords(c) {
jQuery('#X').val(c.x);
jQuery('#Y').val(c.y);
jQuery('#W').val(c.w);
jQuery('#H').val(c.h);
};
And place call storeCoords at your fixed coordinates you set earlier as
setSelect:storeCoords ,
这篇关于Jcrop没有正确裁剪图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
