基于jQuery免费开源图片裁切插件 - Croppic

浏览器兼容性

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帮助文档