合作(zuò)
咨詢
建站(zhàn)咨詢
- 作(zuò)者：admin
- 發表時(shí)間(jiān)：2013-07-02 14:17:27
- 來(lái)源：未知
我們在使用QQ空(kōng)間(jiān)或者開(kāi)心網等網站(zhàn)的個(gè)人(rén)中心時(shí)，有(yǒu)個(gè)上(shàng)傳個(gè)人(rén)頭像的功能。用戶在上(shàng)傳自己的照片後，由于照片尺寸不符合網站(zhàn)的要求，要求用戶對照片進行(xíng)裁剪，最終根據用戶裁剪的尺寸生(shēng)成頭像。
最近在項目中也要用到這樣的功能，用戶可(kě)以對上(shàng)傳的圖片進行(xíng)自由縮放、裁剪，使之符合彩信圖片的大(dà)小(xiǎo)。于是，發現了CropZoom。
CropZoom特性
CropZoom是由Gaston Robledo寫的一個(gè)功能非常強大(dà)的jquery圖片裁剪插件，它具有(yǒu)以下主要特性：
1、任意放大(dà)和(hé)縮小(xiǎo)圖片
2、360度旋轉照片
3、自由拖動，自定義選擇區(qū)樣式
4、及時(shí)顯示裁剪後的照片，可(kě)以與後台程序PHP、JAVA、Asp.net等通(tōng)信
5、兼容IE6+，fireFox2+，Opera，Safria
使用CropZoom
該插件需要JQuery UI的ui.droppable, ui.resizable, ui.slider支持。因此在使用之前先要準備相關文件。jquery.js可(kě)以在jquery官方網站(zhàn)上(shàng)下載。JQuery UI可(kě)以在官方下載。
1、導入JS和(hé)CSS樣式。
2、構建HTML結構代碼。
這部分的樣式大(dà)家(jiā)可(kě)以自己定制(zhì)，也可(kě)以參照月光光寫的DEMO。
3、調用CropZoom插件。
$(function() {
var cropzoom = $('#cropzoom_container').cropzoom({
width: 500,
height: 360,
bgColor: '#ccc',
enableRotation: true,
enableZoom: true,
selector: {
w:150,
h:200,
centered: true,
bgInfoLayer:'#fff',
borderColor: 'blue',
borderColorHover: 'yellow'
},
image: {
source: 'photo.jpg',
width: 450,
height: 800,
minZoom: 30,
maxZoom: 150
}
});
$("#crop").click(function(){
cropzoom.send('crop_img.php', 'POST', {}, function(imgRet) {
$("#generated").attr("src", imgRet);
});
});
$("#restore").click(function(){
$("#generated").attr("src", "tmp/head.gif");
cropzoom.restore();
});
});
CropZoom插件主要參數(shù)和(hé)方法一覽表
| 參數(shù)/方法 | 描述 | 默認值 |
| 基本 | ||
| width | 整個(gè)圖片容器(qì)的寬度 | 640 |
| Height | 整個(gè)圖片容器(qì)的高(gāo)度 | 480 |
| bgColor | 容器(qì)的背景色 | #000 |
| overlayColor | 當拖動選區(qū)（選擇區(qū)域）時(shí)容器(qì)的背景色 | #000 |
| enableRotation | true/false,是否顯示角度調節控件 | true |
| enableZoom | true/false,是否顯示縮放控件 | true |
| restore | 方法，重置、複位圖片和(hé)插件參數(shù) | |
| send |
方法，向服務端發送裁剪圖片的數(shù)據，以便服務端接收參數(shù)進行(xíng)處理(lǐ)， e.g: cropzoom.send('process.php','POST',{id=1},function(r){ alert(r); }); |
|
| 選區(qū)參數(shù) | ||
| width | 選區(qū)的寬度 | 229 |
| height | 選區(qū)的高(gāo)度 | 100 |
| borderColor | 選區(qū)邊框的顔色 | yellow |
| borderColorHover | 當鼠标滑向選區(qū)時(shí)，選區(qū)邊框的顔色 | red |
| Centered | 是否将選區(qū)居中，即顯示在容器(qì)的中心。 | false |
| 圖片參數(shù) | ||
| source | 圖片的路徑 | |
| rotation | 圖片的初始角度 | 0 |
| width | 圖片的寬度 | 0 |
| height | 圖片的高(gāo)度 | 0 |
| minZoom | 圖片的最小(xiǎo)縮放率（百分比） | 10 |
| maxZoom | 圖片的最大(dà)縮放率（百分比） | 150 |
