基於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幫助文檔