圖片裁剪：CropZoom外掛程式

標籤：圖片   oo   c   外掛程式   oom   裁剪   圖   圖片裁剪   om   

 上傳個人頭像的功能：使用者在上傳自己的照片後，由於照片尺寸不符合網站的要求，要求使用者對照片進行裁剪，最終根據使用者裁剪的尺寸產生頭像。

使用者可以對上傳的圖片進行自由縮放、裁剪，使之符合多媒體訊息圖片的大小。

CropZoom特性

CropZoom是由Gaston Robledo寫的一個功能非常強大的jquery圖片裁剪外掛程式，它具有以下主要特性：

1、任意放大和縮小圖片

2、360度旋轉照片

3、自由拖動，自訂選擇區樣式

4、及時顯示裁剪後的照片，可以與背景程式PHP、JAVA、Asp.net等通訊

5、相容IE6+，fireFox2+，Opera，Safria

使用CropZoom

該外掛程式需要JQuery UI的ui.droppable, ui.resizable, ui.slider支援。因此在使用之前先要準備相關檔案。jquery.js可以在jquery官方網站上下載。JQuery UI可以在官方下載。

1、匯入JS和CSS樣式。

 
<link href="css/jquery-ui-1.8.custom.css" rel="Stylesheet" type="text/css" />  
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> 
<script type="text/javascript" src="js/jquery.cropzoom.js"></script> 

2、構建HTML結構代碼。

 
<div class="crop"> 
   <div id="cropzoom_container"></div> 

               <div id="preview"><img id="generated" src="tmp/head.gif"  /></div> 

                          <div class="page_btn"> 

                                 <input type="button" class="btn" id="crop" value="剪下照片" /> 

                                    <input type="button" class="btn" id="restore" value="照片複位" /> 

                                 </div> 

                                 <div class="clear"></div> 
</div> 

這部分的樣式大家可以自己定製，也可以參照月光光寫的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外掛程式主要參數和方法一覽表

 

參數/方法	描述	預設值
基本
width	整個圖片容器的寬度	640
Height	整個圖片容器的高度	480
bgColor	容器的背景色	#000
overlayColor	當拖動選區（選擇地區）時容器的背景色	#000
enableRotation	true/false,是否顯示角度調節控制項	true
enableZoom	true/false,是否顯示縮放控制項	true
restore	方法，重設、複位元影像片和外掛程式參數
send	方法，向服務端發送裁剪圖片的資料，以便服務端接收參數進行處理， e.g: cropzoom.send(‘process.php‘,‘POST‘,{id=1},function(r){ alert(r); });
選區參數
width	選區的寬度	229
height	選區的高度	100
borderColor	選區邊框的顏色	yellow
borderColorHover	當滑鼠滑向選區時，選區邊框的顏色	red
Centered	是否將選區置中，即顯示在容器的中心。	false
圖片參數
source	圖片的路徑
rotation	圖片的初始角度	0
width	圖片的寬度	0
height	圖片的高度	0
minZoom	圖片的最小縮放率（百分比）	10
maxZoom	圖片的最大縮放率（百分比）	150

圖片裁剪：CropZoom外掛程式