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

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

阅读量：7077 次

发布时间：2019-06-28

本文共 1013 字，大约阅读时间需要 3 分钟。

浏览器兼容性

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

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

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

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

当然你也可以直接到官方网站（）压缩包，得到Croppic的源文件

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

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

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

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

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

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

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

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

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

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