我的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,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; }
此代码适用于某些图像,但对大多数图像都不能正常工作.有没有人有任何线索.
例如,对于以下图像
它完美无缺,因为我完美地获得了裁剪后的图像.
但是对于这个图像
我没有正确获得裁剪的图像.
解决方法
我已经使用了下面的代码,它的工作对我来说..请通过下面的一个.
你的问题在这里:
setSelect: [0,
你传递的是不变的
jQuery(function ($) { // Create variables (in this scope) to hold the API and image size var jcrop_api,// Grab some information about the preview pane $preview = $('#preview-pane'),ysize = $pcnt.height(); console.log('init',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,