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 相关文章推荐
js 强制弹出窗口代码研究-又一款代码
Mar 20 Javascript
Java 正则表达式学习总结和一些小例子
Sep 13 Javascript
js函数名与form表单元素同名冲突的问题
Mar 07 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
Sep 01 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
jQuery实现仿美橙互联两级导航菜单的方法
Mar 09 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
Vue.js render方法使用详解
Apr 05 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
使用vue根据状态添加列表数据和删除列表数据的实例
Sep 29 Javascript
JS实现前端动态分页码代码实例
Jun 02 Javascript
vue中提示$index is not defined错误的解决方式
Sep 02 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的call_user_func传reference引发的思考
2010/07/23 PHP
php表单请求获得数据求和示例
2014/05/15 PHP
php精度计算的问题解析
2019/06/21 PHP
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
js的with语句使用方法
2007/09/21 Javascript
js 日期转换成中文格式的函数
2009/07/07 Javascript
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
javascript实现的闭包简单实例
2015/07/17 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
vue2.0 兄弟组件(平级)通讯的实现代码
2018/01/15 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
2018/08/24 Javascript
在vue中获取微信支付code及code被占用问题的解决方法
2019/04/16 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[02:47]DOTA2亚洲邀请赛 HR战队出场宣传片
2015/02/07 DOTA
python统计日志ip访问数的方法
2015/07/06 Python
Python面向对象编程基础解析(一)
2017/10/26 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
jupyter note 实现将数据保存为word
2020/04/14 Python
用Python在Excel里画出蒙娜丽莎的方法示例
2020/04/28 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
基于zepto的插件之移动端无缝向上滚动并上下触摸滑动实例代码
2016/12/20 HTML / CSS
全球性的在线购物网站:Zapals
2017/03/22 全球购物
泰国汽车、火车和轮渡票预订网站:Bus Online Ticket
2017/09/09 全球购物
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
日语专业推荐信
2013/11/12 职场文书
成功的餐厅经营创业计划书
2014/01/15 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
中层干部考核评语
2015/01/04 职场文书
mysql的MVCC多版本并发控制的实现
2021/04/14 MySQL