前端图像 裁剪利器 JQuerJjcrop+裁剪图像保存教程

由于一个项目中需要用到用户头像上传裁剪组件，这两天便网上找了一些相关插件，主要由以下几种插件：

1、Image Cropper：http://elemefe.github.io/image-cropper/#demo

2、flash头像上传组件：http://www.hdfu.net/index.html(可惜是收费的)

3、jQuery Jcrop：http://code.ciaoca.com/jquery/jcrop/

本着开源免费的态度，第二种要收费的插件自然不纳入考虑学习的范围。

本文主要是讲解jQuery Jcrop的基本用法以及和后端（这里采用java）相结合，保存裁剪后的图像。

效果图如下：

第一步:下载相关文件

　　当然是去jQuery Jcrop官网下载jQuery Jcrop插件所需的css和js文件，下载过程这里就不详细介绍了。

第二步 介绍jQuery Jcrop基本用法

　　1、使用方法

　　2、参数说明

　　3、API接口

（一）使用方法

1、引入css文件

<link rel="stylesheet" href="resources/jcrop/css/jquery.Jcrop.min.css" type="text/css" />

2、引入js文件

<script src="resources/jcrop/js/jquery.min.js"></script>
<script src="resources/jcrop/js/jquery.Jcrop.min.js"></script>

3、给需要裁剪的图片加上id标签

<img src="resources/fj.jpg" id="target" />

这里给图片加上id=“target”

4、调用Jcrop

$('#target').Jcrop({
　　//在这里添加所需要的参数
});

调用Jcrop的时候，可以在方法里面添加Jcrop所提供的各种参数、事件，比如可以添加onChange()事件

（二）参数说明

名称	默认值	说明
allowSelect	true	允许新选框
allowMove	true	允许选框移动
allowResize	true	允许选框缩放
trackDocument	true	拖动选框时，允许超出图像以外的地方时继续拖动。
baseClass	'jcrop'	基础样式名前缀。说明：class="jcrop-holder"，更改的只是其中的 jcrop。 例：假设值为 "test"，那么样式名会更改为 "test-holder"
addClass	null	添加样式。 例：假设值为 "test"，那么会添加样式到class="jcrop-holder test"
bgColor	'black'	背景颜色。颜色关键字、HEX、RGB 均可。
bgOpacity	0.6	背景透明度
bgFade	false	使用背景过渡效果
borderOpacity	0.4	选框边框透明度
handleOpacity	0.5	缩放按钮透明度
handleSize	9	缩放按钮大小
aspectRatio	0	选框宽高比。说明：width/height
keySupport	true	支持键盘控制。按键列表：上下左右（移动选框）、Esc（取消选框）
createHandles	['n','s','e','w','nw','ne','se','sw']	设置边角控制器
createDragbars	['n','s','e','w']	设置边框控制器
createBorders	['n','s','e','w']	设置边框
drawBorders	true	绘制边框
dragEdges	true	允许拖动边框
fixedSupport	true	支持 fixed，例如：IE6、iOS4
touchSupport	null	支持触摸事件
shade	null	使用更好的遮罩
boxWidth	0	画布宽度
boxHeight	0	画布高度
boundary	2	边界。说明：可以从边界开始拖动鼠标选择裁剪区域
fadeTime	400	过度效果的时间
animationDelay	20	动画延迟
swingSpeed	3	过渡速度
minSelect	[0,0]	选框最小选择尺寸。说明：若选框小于该尺寸，则自动取消选择
maxSize	[0,0]	选框最大尺寸
minSize	[0,0]	选框最小尺寸
onChange	function(){}	选框改变时的事件
onSelect	function(){}	选框选定时的事件
onDblClick	function(){}	在选框内双击时的事件
onRelease	function(){}	取消选框时的事件

（三）API接口

名称	说明
setImage(string)	设定（或改变）图像。例：jcrop_api.setImage('newpic.jpg')
setOptions(object)	设定（或改变）参数，格式与初始化设置参数一样
setSelect(array)	创建选框，参数格式为：[x, y, x2, y2]
animateTo(array)	用动画效果创建选框，参数格式为：[x, y, x2, y2]
release()	取消选框
disable()	禁用 Jcrop。说明：已有选框不会被清除。
enable()	启用 Jcrop
destroy()	移除 Jcrop
tellSelect()	获取选框的值（实际尺寸）。例：console.log(jcrop_api.tellSelect())
tellScaled()	获取选框的值（界面尺寸）。例：console.log(jcrop_api.tellScaled())
getBounds()	获取图片实际尺寸，格式为：[w, h]
getWidgetSize()	获取图片显示尺寸，格式为：[w, h]
getScaleFactor()	获取图片缩放的比例，格式为：[w, h]

第三步：前端页面中实际使用

在我的页面中，我使用了实时预览裁剪图片的功能。如果需要更多功能，可以参照demo中的文件。

首先贴上js代码部分

　　　　 
　　$(function(){
　　　　var jcrop_api, boundx, boundy,
        // Grab some information about the preview pane
        $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'),
        xsize = $pcnt.width(), ysize = $pcnt.height();
        console.log('init', [ xsize, ysize ]);
        $('#target').Jcrop({
            onChange : updatePreview,
            onSelect : updatePreview,
            aspectRatio : xsize / ysize //设为1则为正方形
        }, function() {
            // Use the API to get the real image size
            var bounds = this.getBounds();
            boundx = bounds[0];
            boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = this;

            // Move the preview into the jcrop container for css positioning
            $preview.appendTo(jcrop_api.ui.holder);
        });
        function updatePreview(c) {
            $('#x1').val(c.x);
            $('#y1').val(c.y);
            $('#x2').val(c.x2);
            $('#y2').val(c.y2);
            $('#w').val(c.w);
            $('#h').val(c.h);
            if (parseInt(c.w) > 0) {
                var rx = xsize / c.w;
                var ry = ysize / c.h;
                $pimg.css({
                    width : Math.round(rx * boundx) + 'px',
                    height : Math.round(ry * boundy) + 'px',
                    marginLeft : '-' + Math.round(rx * c.x) + 'px',
                    marginTop : '-' + Math.round(ry * c.y) + 'px'
                });
            }
        }
    });

//这个函数是用来与后端交互，进行上传图片。上传图片成功后，返回图片的url
function cut() {
        $.ajax({
            type : "get",
            url : "JCropServlet?t=" + new Date(),
            data : {
                "x1" : $('#x1').val(),
                "x2" : $('#x2').val(),
                "y1" : $('#y1').val(),
                "y2" : $('#y2').val()
            },
            dataType : "text",
            success : function(data) {
                $("#result").css("display", "block");
                $("#result").attr("src", "resources/" + data);
                // location.reload();
            },
            error : function(data) {
                alert(data);
            }
        });
    }

接下来是jsp的代码

<!-- 原图片 -->
    <img src="resources/fj.jpg" id="target" />
    <form id="coords" onSubmit="return false;" method="get" action="JCropServlet">
        <div class="inline-labels">
            <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
 　　　　　　 <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
            <label>X2<input type="text" size="4" id="x2" name="x2" /></label>
         　<label>Y2 <input type="text" size="4" id="y2" name="y2" /></label> 
           <label>W <input type="text" size="4" id="w" name="w" /></label> 
           <label>H<input type="text" size="4" id="h" name="h" />
            </label>
        </div>
        <button onclick="cut()">提交</button>
    </form>
　　//这个div是用来实时预览实时裁剪的图像
    <div id="preview-pane">
    <div class="preview-container">
      <img src="resources/fj.jpg" class="jcrop-preview" alt="Preview" />
    </div>
  </div>
    <!-- 截图后的图片 -->
    <img src="" id="result" style="display: none">

预览实时裁剪图像div的css代码

#preview-pane{
  display: block;
  position: absolute;
  z-index:;
  top: 10px;
  right: 30px;
  padding: 6px;
  border: 1px rgba(0,0,0,.4) solid;
  background-color: white;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
  }
  #preview-pane .preview-container {
  width: 250px;
  height: 250px;
  overflow: hidden;
  }

第四步：后端接受图片，保存到本地。并通过返回图片url到前端页面。

public class JCropServlet extends HttpServlet {
    public JCropServlet() {
        super();
    }
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
　　　　　//获取截取图片的坐标
        int x1=Integer.parseInt(request.getParameter("x1"));
        int y1=Integer.parseInt(request.getParameter("y1"));
        int x2=Integer.parseInt(request.getParameter("x2"));
        int y2=Integer.parseInt(request.getParameter("y2"));
        //获取根路径
        String rootPath=request.getServletContext().getRealPath("/");
        String src=rootPath+File.separator+"resources"+File.separator+"fj.jpg";
        String name = "fj_crop_" + this.dateFormat() + ".jpg";
        String dest=rootPath+File.separator+"resources"+File.separator+name;
        ImageUtils.delete(rootPath+File.separator+"resources");
        ImageUtils.cut(src, dest, x1, y1, x2, y2);

        PrintWriter out=response.getWriter();
　　　　　//返回图片url
        out.print(name);
        out.close();
    }
    private String dateFormat(){
        DateFormat df = new SimpleDateFormat("yyyyMMddHHmmss");
        return df.format(new Date());
    }
}

附上demo源码：

http://pan.baidu.com/s/1gdvVMTX