Croppic是一个免费的图片裁切插件，基于最新版的jQuery插件，Croppic能支持大多数现代的浏览器，例如chrome、firefox、IE、safari 和 opera，提供了丰富的接口和参数自定义。

浏览器兼容性

Croppic能工作在现在的大多数的浏览器中，当然也包括IE9：

• IE8: Untested
• IE9: Works!
• IE10+: Works!
• Safari 4+: Works!
• Firefox 3+: Works!
• Chrome 14+: Works!
• Opera 15+: Works!

技术支持

Croppic的Github地址：https://github.com/sconsult/croppic，虽然其中可以知道作者的Email等联系方法，但是请不要这么做，正确的方式是通过 Croppic Issues 提交你的问题。

安装Croppic

下载Croppic

如果你熟悉使用Git，那么通过下面的命令下载Croppic的源文件：

$git clone https://github.com/sconsult/croppic.git

当然你也可以直接到官方网站（http://www.croppic.net/）下载Croppic压缩包，得到Croppic的源文件

引入Croppic文件

将下载的压缩包解压到你的项目中，然后在网页的头部加入Croppic的样式文件

<link href="assets/css/croppic.css" rel="stylesheet">

然后在网页的底部引入Croppic的JavaScript脚本文件，引入之前别忘了先引入jQuery库

<script src="https://cdn.uedsc.com/jquery/2.1.3/jquery.min.js"></script>
<script src="assets/js/croppic.min.js"></script>

至此Croppic的安装就完成，下面来看看如何使用这个插件吧！

使用Croppic

Croppic的使用可以说非常的简单，但是你必须设置要裁切的盒子宽度和高度。

JavaScript代码

在页面加载完成的时候调用Croppic插件

$(function(){
    var cropperHeader = new Croppic('yourId');
})

HTML代码

编写一个DIV盒子，你也可以使用其它的标签，但是一般都是使用DIV，设置一个ID为了方便找到这个元素，这个ID和上一步的JavaScript代码中的ID一致。

<div id="yourId"></div>

CSS代码

编写少量的CSS代码，主要是限制这个DIV盒子的高度和宽度，这也是必须的代码。

#cropContainerHeader {
    width: 200px;
    height: 150px;
    position:relative; /* or fixed or absolute */
}

插件的基本使用就这么简单，但是这仅仅是前台的显示功能，真正的裁切图片我们还需要后端编程语言来处理，更多API文档和使用方法请参阅：Croppic中文API帮助文档

相关资源

• Croppic官方网站地址
• Croppic的Github地址
• Croppic下载地址
• Croppic中文API帮助文档