Jcrop使用心得
2015-09-24 12:07
357 查看
项目需求,编辑头像时候,需要剪切图片。
begin:百度Jcrop,下载所需要的包,导入响应的css,js
虽然前台有很多bug,但是已经完成切图的功能。需要修复的BUG自己看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
相关文章推荐
- dockerfile 多端口映射 expose
- LoadRunner监控Tomcat
- 简单讲解Linux的文件系统及相关的挂载命令
- ubuntu添加用户未指定shell,ll别名等无法是使用
- Openstack节点网卡连Cisco交换机出现环路的处理
- 学习日志---初次接触mapreduce
- linux 测试端口是否可通
- openwrt默认不开启wifi
- 配置apache的工作模式
- ECshop彻底去版权(同时适用于2.7.3)
- 解决myeclipse或者tomcat内存不足
- 配置nginx worker 进程数
- 上午所学(jvm内存分配和shell排序算法的深入理解)
- Keep-Alive简介及在Tomcat中配置
- centos6.5安装php
- Opencv 源码解读之 ImageEncoder
- CentOS安装中文支持
- MapReduce 规划 系列的12 使用Hadoop Streaming技术集成newLISP文字
- nginx配置二级域名访问集群tomcat和nginx windows版安装 启动
- openoffice4服务启动