jQuery jcrop插件截图使用方法

在后台来进行图片切割。
头像截取的原理:在前台使用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();
 }
    }
}

(0)

相关推荐

  • jcrop 网页截图工具(插件)开发

    今天给大家介绍一下一个web 中经常会用到的截图(如:头像等)工具: Jcrop演示 项目结构: 效果图: 这个很有用: 看到这些,大家也想自己试试吧 =========================================== 代码部分: =========================================== 准备工作: 下载:Jcrop-0.9.10 (zip format) 解压后放入到你的项目里面,就如上面的项目结构一样... /Jcrop/WebContent

  • Asp.Net获取网站截图的实例代码

    复制代码 代码如下: using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using System.Drawing;using System.Text;using System.Windows.Forms;namespace WindowsFormsApplication1{    public partial class Form1 : Form    {    

  • asp.net截屏功能实现截取web页面

    本文实例展示了asp.net截屏功能实现截取web页面的方法,代码简洁易懂,分享给大家供大家参考. 具体实现代码如下: using System.Drawing; //打开该页面 System.Diagnostics.Process.Start("IEXPLORE.EXE", "http://localhost:56/Spacxxe.html"); System.Threading.Thread.Sleep(3000); //截屏 //创建并设置画布大小 Syste

  • js插件Jcrop自定义截取图片功能

    当初说这个需求的时候,在网上找了一点资料,但是基本上感觉不符合项目中的需求.参照一些项目,和同事的改造,终于是像点样子了. 截图大致截为3个像素,每个像素使用的地方也不同,考虑图片不会是很多,分别压缩保存下来. 根据截取的像素位置,对应的压缩成相应的图片: 首先需要下载Jcrop.js与uploadify.js 上传图片的插件和截图的插件 Comm_UploadJcrop.js //剪裁头像对象和宽高比例 var jcrop_api, boundx, boundy; //上传图片 //Id:上传

  • jQuery jcrop插件截图使用方法

    在后台来进行图片切割.头像截取的原理:在前台使用jcrop获取切面的x轴坐标.y轴坐标.切面高度.切面宽度,然后将这四个值传给后台.在后台要进行放大处理:将切面放大N倍,N=原图/前台展示的头像.即X = X*原图宽/前图宽,Y = Y*原图高/前图高,W = W*原图宽/前图宽,H = H*原图高/前图高.实例:JSP: 复制代码 代码如下: <div id="cutImage" style="display: none;"> <div clas

  • jQuery Jcrop插件实现图片选取功能

    总的来说,原理很简单,大致流程是:在浏览器上加载原图 --> 用矩形框在原图上选取区域并将选取的顶点坐标和矩形尺寸发送至服务器 --> 服务器端用图片切割算法切割原图并输出切割后的图片.下面我们就分别对这几个步骤详细展开讨论分析,并在最后附上小demo供大家参考. 1.在页面上加载原图 这个就不用多说了,就是在页面上显示一张图片,一个img标签搞定,不过为了下一步演示,还是贴一下代码 <img src="girl.jpg" alt="" id=&q

  • jQuery排序插件tableSorter使用方法

    本文实例为大家分享了jQuery排序插件tableSorter的使用方法,供大家参考,具体内容如下 1.先引两个js <script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../js/jquery.tablesorter.min.js"

  • jQuery验证插件validate使用方法详解

    1. 写在前面 我们知道,用户在注册的时候,会有个表单页面,然后有些选项是必填的,有些要填的内容是有规范的,这些都要在用户提交之前进行验证才行,如果不符合要求,需要在右边显示一个友好的提示,让用户修改. 记得以前在学习Servlet的时候,实现一个简单的用户注册功能的验证是在后台做的,有些用了正则表达式,有些没用,但是都比较简单.流程是这样的,前台提交表单数据后,servlet获取数据先进行验证,如果不符合要求,将提示信息放到一个List中,然后再把List存到session中,跳转到一个新的页

  • jQuery擦除插件eraser使用方法详解

    eraser插件简介: 1.jQuery.eraser 是一个基于 jQuery 的插件,它的效果类似于橡皮擦,按住鼠标不放,在图片上面来回移动,上面灰色的图片就会被擦出,显示出下面彩色的图片. 2.jQuery.eraser 的原理其实是有灰色.彩色两张图片(都需要自己事前准备),将灰色的图片装载于一个 canvas 中,然后和彩色的图片用 CSS 定位在同一个位置,并设置 z-index 使 canvas 位于彩色图片之上.当按住鼠标并在 canvas 上来回移动时,就出现了类似橡皮擦擦出的

  • jquery滚动条插件slimScroll使用方法

    本文实例为大家总结了滚动条插件slimScroll的使用方法,供大家参考,具体内容如下 simScroll插件项目下载地址:https://github.com/rochal/jQuery-slimScroll TIP: 1.slimScroll在使用的时候要依赖JQ,所以首次使用的时候要引入JQ再引入simScroll插件 2.不支持resize的时候重新调用插件,不过有人已经修改过源码,这是修改过的版本的下载地址:https://github.com/kujian/jQuery-slimSc

  • jQuery树插件zTree使用方法详解

    最近要做一个树结构,就使用了jQuery 的树插件,感觉还不错,做个随笔 页面的基本结构是这样的 这里的样式是使用了metroStyle文件夹里的类bootstrap风格,当然首先需要下载ztree插件,直接百度即可,下载完成后由对应的api和一些例子,这里使用的是复选框模板 jQuery  zTree树的下载链接 页面jsp如下: <html> <head> <meta http-equiv="content-type" content="te

  • 一款Jquery 分页插件的改造方法(服务器端分页)

    分页几乎是每个外部程序必不可少的东西,在webform时代很多人都用过AspNetPager这个用户控件吧,用的人之多其实就在于它的优点:传给它几个参数就可以生成像样的分页,其实这个也是绝大多数程序员(包括我)的致命缺点:样式..,我对于咱们来说用尝试用CSS把一个模块调美观好看所花的时间远远超过了实现功能所需的时间- -! 现在越来越多做web的开始采用.NET MVC框架,抛开一切服务器控件,回归正宗的B/S编程,享受灵活控制好处之余,也得花费很多功夫,很多地方都得自己去实现,例如分页这样的

  • jQuery ui插件的使用方法代码实例

    复制代码 代码如下: <script src="Jquery1.7.js" type="text/javascript"></script>     <script src="jquery.validate.js" type="text/javascript"></script>     <script src="messages_cn.js" type

  • jQuery定义插件的方法

    有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直到有一次公司里的技术交流,我才改变了自己对自己的看法. 扩展jquery的时候.最核心的方法是以下两种: $.extend(object) 可以理解为jquery添加一个静态方法 $.fn.extend(object) 可以理解为jquery实例添加一个方法 $.extend(object) 例子: /* $.ex

随机推荐