jquery插件 - Jcrop实现图片裁剪【前端部分】- 校招VIP

Jcrop简介

Jcrop是一个jQuery插件，它能为你的WEB应用程序快速简单地提供图片裁剪的功能。Jcrop官网，以下是Jcrop的一些特性：

对所有图片均unobtrusively（无侵入的，保持DOM简洁）
支持宽高比例锁定
支持 minSize / maxSize设置
支持改变选区或移动选区时的回调（Callback）
支持用键盘微调选区
通过API创建互动，比如动画效果
支持CSS样式

Jcrop使用

Jcrop的使用非常简单，只需要简单的四步就可以完成。

第一步：引入插件

Jcrop是依赖于jQuery，所以在引入 jquery.Jcrop.js之前要先引入jQuery.js。

<script src="js/jquery.js"></script>  
<script src="js/jquery.Jcrop.js"></script>

第二步：引入Jcrop的CSS样式

<link rel="stylesheet" href="css/jquery.Jcrop.css">

第三步：给IMG标签加上ID

这一步是要给目标图片（待裁剪图片）添加ID。

![](pic.jpg)

第四步：调用Jcrop

Jcrop的调用主要有两种方式：

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

这里推荐大家使用第二种方式，将Jcrop生成的对象赋给一个全局变量，这样操作起来更灵活，如调用api.destroy();方法可以销毁 Jcorp，这样我们在实际使用中会更灵活一些，因为直接改变要裁剪图片的路径会导致Jcorp的出错，如果想要变更编辑的图片我们需要销毁Jcorp，变更图片的属性后再次为图片附加Jcorp。

当然也可以完全不进行任何options参数设置，直接采用默认调用方法。

$("#element_id").Jcrop();

options参数说明

options参数非常多，这里提供一张表图来进行说明。

API 接口

Jcrop提供的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]

实例

既然Jcrop已经介绍完了，到底该如何实现上图的裁剪效果呢？

一、布局

要完成这样的一个布局，主要分成两个部分。一部分是用来显示裁剪，而另外一部分是用来进行图片选择。

<body>  
    <%-- 裁剪图片布局 --%>  
    <div id="crop_image">  
        <div id="crop_image_top">  
            <h4>编辑图片</h4>  
        </div>  
        <div id="crop_image_content">  
            ![](images/test.jpg)  
            <!-- 预览 -->  
            <div id="preview-pane">  
                <div class="preview-container">  
                    ![](images/test.jpg)  
                </div>  
            </div>  
        </div>  
        <div id="crop_image_bottom">  
            <input class="btn" type="button" value="取消">  
            <input id="submitBtn" class="btn" type="button" value="确定" onclick="saveCropImage()">  
        </div>  
    </div>  
      
    <!-- 上传图片表单 -->  
    <form id="uploadForm" action="">  
        <div id="uploadImage">  
            ![](images/test.jpg)  
            <a href="javascript:;" class="addImage">  
                <span>上传图片</span>  
                <input id="imgFile" type="file" name="imgFile">  
            </a>  
        </div>  
    </form>  
</body>

CSS样式，这里只给出部分关键性样式。

<style type="text/css">  
#crop_image {  
    float: left;  
    width: 55%;  
    background-color: #333;  
    user-select: none;  
    margin: 5% 20%;  
    border: 1px solid #DEDEDE;  
    -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);  
}  

#crop_image_top,#crop_image_bottom {  
    float: left;  
    width: 96%;  
    padding: 2%;  
    background-color: white;  
}  
/* 底部 */  
#crop_image_bottom {  
    text-align: right;  
}  

#crop_image_bottom input {  
    height: 30px;  
    padding: 5px 15px;  
    border-radius: 3px;  
    border: none;  
    margin-left: 20px;  
    outline: none;  
}  

#submitBtn {  
    background-color: #40aff2;  
    color: white;  
    cursor: pointer;  
}  

#submitBtn:HOVER {  
    background-color: #409ff2;  
}  
/* 顶部 */  
#crop_image_top h4 {  
    margin: 0;  
    padding: 0;  
    font-weight: normal;  
}  
/* 裁剪部分 */  
#crop_image_content {  
    float: left;  
    position: relative;  
    text-align: center;  
    width: 92%;  
    margin: 4%;  
}  

/* 上传图片区域 */  
#uploadForm {  
    float: left;  
    margin: -2% 20% 5% 20%;  
}  

#uploadImage {  
    position: relative;  
    width: 372px;  
    height: 202px;  
    background-color: #40aff2;  
    text-align: center;  
}  

#uploadImage #cropimg {  
    position: absolute;  
    height: 100%;  
    width: 100%;  
    padding: 0;  
    margin: 0;  
    top: 0;  
    left: 0;  
}  

#uploadImage .addImage {  
    display: inline-block;  
    position: relative;  
    min-width: 80px;  
    height: 40px;  
    overflow: hidden;  
    padding: 0 30px;  
    margin: 81px auto;  
    border: none;  
    background-color: #F3F3F3;  
    color: #555;  
    font: 14px/40px 'MicroSoft Yahei', 'Simhei';  
    cursor: pointer;  
    text-align: center;  
    text-decoration: none;  
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;  
}  

#uploadImage .addImage:HOVER {  
    background-color: #DEDEDE;  
}  

#uploadImage #imgFile  
    {  
    display: block;  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 140px;  
    height: 40px;  
    cursor: pointer;  
    cursor: hand;  
    border: none;  
    font-size: 0;  
    padding: 0;  
    /* older safari/Chrome browsers */   
    -webkit-opacity: 0;  
    /* Netscape and Older than Firefox 0.9 */   
    -moz-opacity: 0;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/   
    -khtml-opacity: 0;  
    /* IE9 + etc...modern browsers */   
    opacity: 0;  
    /* IE 4-9 */   
    filter:alpha(opacity=0);  
    /*This works in IE 8 & 9 too*/   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    /*IE4-IE9*/   
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  
}  

#uploadImage #imgFile::-webkit-file-upload-button {  
    display: block;  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 140px;  
    height: 40px;  
    cursor: pointer;  
    cursor: hand;  
    border: none;  
    font-size: 0;  
    padding: 0;  
    /* older safari/Chrome browsers */   
    -webkit-opacity: 0;  
    /* Netscape and Older than Firefox 0.9 */   
    -moz-opacity: 0;  
    /* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/   
    -khtml-opacity: 0;  
    /* IE9 + etc...modern browsers */   
    opacity: 0;  
    /* IE 4-9 */   
    filter:alpha(opacity=0);  
    /*This works in IE 8 & 9 too*/   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    /*IE4-IE9*/   
    filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=0);  
}  
</style>

对于裁剪框样式，除了引入官方所提供的样式文件之后，还要添加如下样式，才能实现图中效果。

<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />  
<style type="text/css">  
/* Apply these styles only when #preview-pane has  
   been placed within the Jcrop widget */  
.jcrop-holder #preview-pane {  
    display: block;  
    position: absolute;  
    z-index: 2000;  
    top: 10px;  
    right: -280px;  
    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);  
}  

/* The Javascript code will set the aspect ratio of the crop  
   area based on the size of the thumbnail preview,  
   specified here */  
#preview-pane .preview-container {  
    width: 250px;  
    height: 170px;  
    overflow: hidden;  
}  
</style>

二、实现
这里主要实现三个小功能：第一个是选择图片，第二个是裁剪预览，第三个是保存裁剪图片。在实现功能之前，首先引入相关js文件：

<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>  
<script type="text/javascript" src="js/jquery.Jcrop.js"></script>

1、选择图片

当点击上传图片时，弹出图片选择框，选择图片之后会替换掉裁剪框内容。这里利用change方法，监听imgFile改变事件。实现图片预览方式有很多，这里只给出一种。

<%--上传图片并预览--%>  
$('#imgFile').change(function(event) {  
    // 根据这个 <input> 获取文件的 HTML5 js对象  
    var files = event.target.files, file;  
    if (files && files.length > 0) {  
        // 获取目前上传的文件  
        file = files[0];  
        // 获取window的 URL工具  
        var URL = window.URL || window.webkitURL;  
        // 通过 file生成目标 url  
        var imgURL = URL.createObjectURL(file);  
        // 用这个URL产生一个 <img> 将其显示出来  
        if (jcrop_api) {  
            jcrop_api.setImage(imgURL);  
        }  
                  
        $('#cropimg').attr('src', imgURL);  
        $('.jcrop-preview').attr('src', imgURL);  
    }  
});

2、裁剪预览

要想实现预览效果需要实现Jcrop的onChange方法，实现方式如下。但是要注意一点，在进行预览的同时需要同时计算出裁剪框到图片左侧距离x，裁剪框到图片上侧距离y，以及裁剪框的宽度和高度。因为真正执行裁剪功能是后台，后台会根据这些参数对原图进行处理。

<script type="text/javascript">  
    var width;// 裁剪框的宽度  
    var height;// 裁剪框的高度  
    var x;// 相对于裁剪图片x左边  
    var y;// 相对于裁剪图片y左边  
    var jcrop_api;  
    // 实现裁剪  
    jQuery(function($) {  
        // 创建变量(在这个生命周期)的API和图像大小  
        var jcrop_api = null, boundx, boundy,  
          
        // 获取预览窗格相关信息  
        $preview = $('#preview-pane'),   
        $pcnt = $('#preview-pane .preview-container'),   
        $pimg = $('#preview-pane .preview-container img'),  

        xsize = $pcnt.width(), ysize = $pcnt.height();  

        $('#target').Jcrop({  
            setSelect: [ 20, 20, 150, 150 ],  
            // allowResize:false,  
            onChange : updatePreview,  
            onSelect : updatePreview,  
            aspectRatio : xsize / ysize  
        }, function() {  
            // 使用API来获得真实的图像大小  
            var bounds = this.getBounds();  
            boundx = bounds[0];  
            boundy = bounds[1];  
            // jcrop_api变量中存储API  
            jcrop_api = this;  

            // 预览进入jcrop容器css定位  
            $preview.appendTo(jcrop_api.ui.holder);  
        });  

        function updatePreview(c) {  
            // 设置预览  
            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'  
                });  
            }  
            // 赋值  
            x = c.x;  
                y = c.y;  
                width = c.w;  
                height = c.h;  
        };  
    });  
</script>

3、保存裁剪图片

保存裁剪图片需要提交第二步所计算的四个参数，同时要将原图进行提交到后台。因为我们是通过一个form表单进行图片上传，所以可以利用Ajax提交相关数据或者直接提交表单即可。

<%--保存裁剪之后的图片--%>  
function saveCropImage() {  
    // 需要获取裁剪之后，裁剪框的宽度和高度，以及裁剪框相对于裁剪图片的坐标位置  
    alert(width);  
    alert(height);  
    alert(x);  
    alert(y);  
          
    // Ajax提交     
    // form表单提交  
};