Jcrop使用心得

项目需求，编辑头像时候，需要剪切图片。

begin:百度Jcrop,下载所需要的包，导入响应的css,js

var jcrop_api,boundx,boundy,
$pcnt=$("div"),//这是选框时候的预览图片的父元素DIV这个DIV的样式有一定要求：宽高，overflow: hidden;
$pimg=$("div .img"),//这是选框时候的预览图片
xx = $pcnt.width(),
yy = $pcnt.height();
function j(imgname){//实例化Jcrop，img是为了切换图片
	$("#img").Jcrop({
		aspectRatio:1,//选框宽高比 说明：width/height
		onChange: updatePreview,//选框改变时的事件
		onSelect: updatePreview //选框选定时的事件
		,maxSize:[100,100],minSize:[100,100]
		},function(){
		var bounds=this.getBounds();//获取图片实际尺寸。格式为[w,h]
		boundx=bounds[0];
		boundy=bounds[1];
		jcrop_api = this;
		jcrop_api.setImage(imgname);//修改图片
	});
}
function updatePreview(c){//c是坐标。具体自己console
      if (parseInt(c.w) > 0){
      coordinate(c.x,c.y,c.w,c.h);//这是自己写的方法，用来把坐标的值存入隐藏好的input里面，用来把相应的值存入service
        var rx = xx / c.w;
        var ry = yy / c.h;
        $pimg.css({//jquery方法，自己回去看书
          width: Math.round(rx * boundx) + "px",//round() 方法可把一个数字舍入为最接近的整数。
          height: Math.round(ry * boundy) + "px",
          marginLeft: "-" + Math.round(rx * c.x) + "px",
          marginTop: "-" + Math.round(ry * c.y) + "px"
        });
      }
    };

以下是java实现的代码

import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;
	public class ImageCut {
		/**
		 * 图片切割
		 * @param imagePath  原图地址
		 * @param x  目标切片坐标 X轴起点
		 * @param y	 目标切片坐标 Y轴起点
		 * @param w  目标切片 宽度
		 * @param h  目标切片 高度
		 */
		public void cutImage(String imagePath, int x ,int y ,int w,int h){
			try {
				Image img;
				ImageFilter cropFilter;
				// 读取源图像
				BufferedImage bi = ImageIO.read(new File(imagePath));
				int srcWidth = bi.getWidth();      // 源图宽度
				int srcHeight = bi.getHeight();    // 源图高度
				//若原图大小大于切片大小，则进行切割
				if (srcWidth >= w && srcHeight >= h) {
				    Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);
	                cropFilter = new CropImageFilter(x, y,w,h);
	                img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
	                BufferedImage tag = new BufferedImage(w, h,BufferedImage.TYPE_INT_RGB);
	                Graphics g = tag.getGraphics();
	                g.drawImage(img, 0, 0, null); // 绘制缩小后的图
	                g.dispose();
	                // 输出为文件
	                ImageIO.write(tag, "JPEG", new File(imagePath));
				}
			} catch (IOException e) {
				e.printStackTrace();
			}
		}
	}

以下是springMVC代码

@Controller
public class CutImageController {
	@RequestMapping("/cut")
	@ResponseBody
	public ModelMap Cut(HttpServletRequest req){
		int x = Integer.valueOf(req.getParameter("X"));  
	    int y = Integer.valueOf(req.getParameter("Y"));  
	    int w = Integer.valueOf(req.getParameter("W"));  
	    int h = Integer.valueOf(req.getParameter("H"));  
	    String bigImage = req.getParameter("bigImage");//图片名称
		ModelMap map=new ModelMap();
		ImageCut imageCut = new ImageCut();  
		imageCut.cutImage("E:\\upload\\"+bigImage,x,y,w,h);
		map.put("Cutimg",bigImage);
        return map;
	}
}

虽然前台有很多bug,但是已经完成切图的功能。需要修复的BUG自己看jcrop