jQuery jcrop插件截图使用方法


Posted in Javascript onNovember 20, 2013

在后台来进行图片切割。
头像截取的原理:在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度,然后将这四个值传给后
台。在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像。即X = X*原图宽/前图宽,Y = Y*原图高/前
图高,W = W*原图宽/前图宽,H = H*原图高/前图高。
实例:
JSP:

<div id="cutImage" style="display: none;">
 <div class="bigImg" style="float: left;">
     <img id="srcImg" src="" width="400px" height="270px"/>
 </div>
 <div id="preview_box" class="previewImg">
     <img id="previewImg" src="" width="120px"/>
 </div> <div >
 <form action="" method="post" id="crop_form">
      <input type="hidden" id="bigImage" name="bigImage"/>
    <input type="hidden" id="x" name="x" />
    <input type="hidden" id="y" name="y" />
    <input type="hidden" id="w" name="w" />
    <input type="hidden" id="h" name="h" />
    <P><input type="button" value="确认" id="crop_submit"/></P>
     </form>
</div>
    </div>

样式:大图、小图展示都需要固定高度、宽度,因为后台需要进行放大处理。即:<img width=""height=""/>
然后是使用jcrop了。在使用jcrop前我们需要下载jcrop:http://deepliquid.com/content/Jcrop.html。
将下载的压缩包解压后可以看到三个文件夹及一个index.html文件,/ css下放置的是Jcorp的样式文件,/demo下放置的是几个简单的例子(index.html中引用的链接就是放置在这个文件夹下),/js下放置的是Jcorp中最重要的脚本文件。我们只需要使用三个文件即可:jquery.Jcrop.css、jquery.Jcrop.js、JQuery.js
使用方法:

//裁剪图像
function cutImage(){
    $("#srcImg").Jcrop( {
     aspectRatio : 1,
     onChange : showCoords,
     onSelect : showCoords,
     minSize :[200,200]
 });
 //简单的事件处理程序,响应自onChange,onSelect事件,按照上面的Jcrop调用
 function showCoords(obj) {
     $("#x").val(obj.x);
     $("#y").val(obj.y);
     $("#w").val(obj.w);
     $("#h").val(obj.h);
     if (parseInt(obj.w) > 0) {
  //计算预览区域图片缩放的比例,通过计算显示区域的宽度(与高度)与剪裁的宽度(与高度)之比得到
  var rx = $("#preview_box").width() / obj.w;
  var ry = $("#preview_box").height() / obj.h;
  //通过比例值控制图片的样式与显示
  $("#previewImg").css( {
      width : Math.round(rx * $("#srcImg").width()) + "px", //预览图片宽度为计算比例值与原图片宽度的乘积
      height : Math.round(rx * $("#srcImg").height()) + "px", //预览图片高度为计算比例值与原图片高度的乘积
      marginLeft : "-" + Math.round(rx * obj.x) + "px",
      marginTop : "-" + Math.round(ry * obj.y) + "px"
  });
     }
 }
}

在使用jcrop前一定要先将$(“”).jcrop();进行预初始化,否则没有效果。
 还有一种调用的方法,

   

    var api = $.Jcrop('#cropbox',{
    onChange: showPreview,
    onSelect: showPreview,
    aspectRatio: 1
    });
   

这种方法是将Jcrop生成的对象赋给一个全局变量,这样操作就会比较方便。
通过上面的js,就将X轴坐标、Y轴坐标、高度H、宽度W这个四个值传递给后台了,后台就只需要根据这四个值
进行放大处理,然后切割即可。

 Action

/**
     * 裁剪头像
     */
    public String cutImage(){
 /*
  * 获取参数
  * x,y,w,h,bigImage
  */
 HttpServletRequest request = (HttpServletRequest) ActionContext.getContext().get(ServletActionContext.HTTP_REQUEST);
 int x = Integer.valueOf(request.getParameter("x"));
 int y = Integer.valueOf(request.getParameter("y"));
 int w = Integer.valueOf(request.getParameter("w"));
 int h = Integer.valueOf(request.getParameter("h"));
 String bigImage = request.getParameter("bigImage");    //获取文件真实路径
 //获取文件名
 String[] imageNameS = bigImage.split("/");
 String imageName = imageNameS[imageNameS.length-1];
 //文件正式路径
 String imagePath = getSavePath()+"\\"+imageName;
 //切割图片
 ImageCut imageCut = new ImageCut();
 imageCut.cutImage(imagePath, x, y, w, h);
 //头像裁剪完成后,将图片路径保存到用户
 UserBean userBean = (UserBean) request.getSession().getAttribute("userBean");
 userBean.setUserPhoto(bigImage);
 //保存头像
 UserCenterService centerService = new UserCenterService();
 centerService.updatePhoto(userBean);
 //将修改后的用户保存到session中
 request.getSession().setAttribute("userBean", userBean);
 return "updatePhoto";
    }
}

裁剪图片工具类:ImageCut.java

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);
  int x1 = x*srcWidth/400;
  int y1 = y*srcHeight/270;
  int w1 = w*srcWidth/400;
  int h1 = h*srcHeight/270;
  cropFilter = new CropImageFilter(x1, y1, w1, h1);
  img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
  BufferedImage tag = new BufferedImage(w1, h1,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();
 }
    }
}

jQuery jcrop插件截图使用方法

Javascript 相关文章推荐
基于jquery的二级联动菜单实现代码
Apr 25 Javascript
javascript 基础篇3 类,回调函数,内置对象,事件处理
Mar 14 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
Vue获取DOM元素样式和样式更改示例
Mar 07 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
详解用Node.js写一个简单的命令行工具
Mar 01 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
webpack手动配置React开发环境的步骤
Jul 02 Javascript
VUE 3D轮播图封装实现方法
Jul 03 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
javascript中的if语句使用介绍
Nov 20 #Javascript
js控制表单不能输入空格的小例子
Nov 20 #Javascript
js中Image对象以及对其预加载处理示例
Nov 20 #Javascript
JS按字节截取字符长度实例
Nov 20 #Javascript
详解JS 比较两个Json对象的值是否相等的实例
Nov 20 #Javascript
javascipt匹配单行和多行注释的正则表达式
Nov 20 #Javascript
自定义的一个简单时尚js下拉选择框
Nov 20 #Javascript
You might like
php实现的SESSION类
2014/12/02 PHP
用PHP写的一个冒泡排序法的函数简单实例
2016/05/26 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
JQuery团队打造的javascript单元测试工具QUnit介绍
2010/02/26 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
详解vue2.0 使用动态组件实现 Tab 标签页切换效果(vue-cli)
2017/08/30 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
2018/07/07 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
解决python中无法自动补全代码的问题
2018/12/04 Python
python根据时间获取周数代码实例
2019/09/30 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
HTML5超文本标记语言的实现方法
2020/09/24 HTML / CSS
Opodo英国旅游网站:预订廉价航班、酒店和汽车租赁
2018/07/14 全球购物
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
幼儿园中班新学期寄语
2014/01/18 职场文书
创建服务型党组织实施方案
2014/02/25 职场文书
工艺工程师岗位职责
2014/03/04 职场文书
小学教师培训方案
2014/06/09 职场文书
爱护公共设施的标语
2014/06/24 职场文书
违反交通法规检讨书
2014/09/10 职场文书
社区班子个人对照检查材料思想汇报
2014/10/07 职场文书
2014年干部作风建设总结
2014/10/23 职场文书
转让协议书
2015/01/27 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
理解python中装饰器的作用
2021/07/21 Python
Python socket如何解析HTTP请求内容
2022/02/12 Python