一個功能強大的圖像裁剪jQuery插件：Jcrop

jopen 10年前發布 | 104K 次閱讀 JavaScript開發工具包 jcrop

Jcrop是一個功能強大的圖像裁剪引擎jQuery的。

它的設計使開發人員可以很容易地直接集成了先進的圖像裁剪功能集成到任何基于Web的應用程序在不犧牲動力和靈活性（或編碼，測試和調試的星期）。Jcrop還設有干凈，組織良好的代碼，在大多數現代的web瀏覽器效果很好。

在<HEAD>你需要加載必要文件的頁面這包括：
jQuery庫
Jcrop的Javascript
Jcrop CSS樣式表
它應該是這個樣子：

    <script src="js/jquery.min.js"> </ SCRIPT>  
    <script src="js/jquery.Jcrop.min.js"> </ SCRIPT>  
    <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

</div> </div>

入門第一個簡單點的Demo:

    <%@ page language="java" contentType="text/html; charset=UTF-8"

        pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script src="js/jquery.Jcrop.min.js"></script>  
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />  
<script>  
    jQuery(function(){  
            jQuery('#user_preview_img').Jcrop({  
                trackDocument: true  
            });  
        });  
</script>  
</head>  
<body>  
    <img alt="" src="images/area1/1.jpg" id="user_preview_img">  
</body>  
</html>  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959553522406166700" target="_blank"></a></div>

</div>
</div>


效果圖：


jcrop簡單的事件處理Demo:




    <%@ page language="java" contentType="text/html; charset=UTF-8"

        pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script src="js/jquery.Jcrop.min.js"></script>  
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />  
<script>  
jQuery(document).ready(function(){  

    jQuery('#user_preview_img').Jcrop({  
        onChange: showCoords,  
        onSelect: showCoords  
    });  

});  

// Simple event handler, called from onChange and onSelect  
// event handlers, as per the Jcrop invocation above  
function showCoords(c)  
{  
    jQuery('#x1').val(c.x);  
    jQuery('#y1').val(c.y);  
    jQuery('#x2').val(c.x2);  
    jQuery('#y2').val(c.y2);  
    jQuery('#w').val(c.w);  
    jQuery('#h').val(c.h);  
};  
</script>  
</head>  
<body>  
   <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>  

        <form onsubmit="return false;" class="coords">  
            <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>  
            <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>  
            <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>  
            <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>  
            <label>W <input type="text" size="4" id="w" name="w" /></label>  
            <label>H <input type="text" size="4" id="h" name="h" /></label>  
        </form>  

</body>  
</html>  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959553522406166700" target="_blank"></a></div>

</div>
</div>


效果圖：



jcrop實例演示Demo3：




    <%@ page language="java" contentType="text/html; charset=UTF-8"

        pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script src="js/jquery.Jcrop.min.js"></script>  
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />  
<script>  
jQuery(document).ready(function(){  

    jQuery('#user_preview_img').Jcrop({  
          onChange: showCoords,  
          onSelect: showCoords,  
          bgColor: 'red',  
          bgOpacity: .4,  
          setSelect: [ 100, 100, 50, 50 ],  
          aspectRatio: 16 / 9  
    });  

});  

// Simple event handler, called from onChange and onSelect  
// event handlers, as per the Jcrop invocation above  
function showCoords(c)  
{  
    jQuery('#x1').val(c.x);  
    jQuery('#y1').val(c.y);  
    jQuery('#x2').val(c.x2);  
    jQuery('#y2').val(c.y2);  
    jQuery('#w').val(c.w);  
    jQuery('#h').val(c.h);  
};  
</script>  
</head>  
<body>  
   <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>  

        <form onsubmit="return false;" class="coords">  
            <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>  
            <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>  
            <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>  
            <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>  
            <label>W <input type="text" size="4" id="w" name="w" /></label>  
            <label>H <input type="text" size="4" id="h" name="h" /></label>  
        </form>  

</body>  
</html>  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959553522406166700" target="_blank"></a></div>

</div>
</div>


效果圖：



Jcrop實例Demo4:




    <%@ page language="java" contentType="text/html; charset=UTF-8"

        pageEncoding="UTF-8"%>

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

    <title>Insert title here</title>

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>  
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script src="js/jquery.Jcrop.min.js"></script>  
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />  
<script type="text/javascript">  
  jQuery(function($){  

    // Create variables (in this scope) to hold the API and image size  
    var jcrop_api,  
        boundx,  
        boundy,  

        // Grab some information about the preview pane  
        $preview = $('#preview-pane'),  
        $pcnt = $('#preview-pane .preview-container'),  
        $pimg = $('#preview-pane .preview-container img'),  

        xsize = $pcnt.width(),  
        ysize = $pcnt.height();  

    console.log('init',[xsize,ysize]);  
    $('#user_preview_img').Jcrop({  
      onChange: updatePreview,  
      onSelect: updatePreview,  
      aspectRatio: xsize / ysize  
    },function(){  
      // Use the API to get the real image size  
      var bounds = this.getBounds();  
      boundx = bounds[0];  
      boundy = bounds[1];  
      // Store the API in the jcrop_api variable  
      jcrop_api = this;  

      // Move the preview into the jcrop container for css positioning  
      $preview.appendTo(jcrop_api.ui.holder);  
    });  

    function updatePreview(c)  
    {  
      if (parseInt(c.w) > 0)  
      {  
        var rx = xsize / c.w;  
        var ry = ysize / c.h;  

        $pimg.css({  
          width: Math.round(rx * boundx) + 'px',  
          height: Math.round(ry * boundy) + 'px',  
          marginLeft: '-' + Math.round(rx * c.x) + 'px',  
          marginTop: '-' + Math.round(ry * c.y) + 'px'  
        });  
      }  
    };  

  });  


</script>  


<style type="text/css">  
/* Apply these styles only when #preview-pane has 
   been placed within the Jcrop widget */  
.jcrop-holder #preview-pane {  
  display: block;  
  position: absolute;  
  z-index: 2000;  
  top: 10px;  
  right: -280px;  
  padding: 6px;  
  border: 1px rgba(0,0,0,.4) solid;  
  background-color: white;  

  -webkit-border-radius: 6px;  
  -moz-border-radius: 6px;  
  border-radius: 6px;  

  -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
  -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
  box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);  
}  

/* The Javascript code will set the aspect ratio of the crop 
   area based on the size of the thumbnail preview, 
   specified here */  
#preview-pane .preview-container {  
  width: 250px;  
  height: 170px;  
  overflow: hidden;  
}  
</style>  

</head>  
<body>  
   <div><img alt="" src="images/area1/1.jpg" id="user_preview_img"></div>  

   <div id="preview-pane">  
    <div class="preview-container">  
      <img src="images/area1/1.jpg" class="jcrop-preview" alt="Preview" />  
    </div>  
  </div>  
</body>  
</html>  </pre><a style="text-indent:0px;" title="派生到我的代碼片" href="/misc/goto?guid=4959553522406166700" target="_blank"></a></div>

</div>
</div>


效果圖:



注意：有關這些選項的對象的格式的幾件事情：

文本值必須加引號（如'紅'，'＃CCC“，”RGB（10,10,10）'）

數值，包括小數點，不應該被引用。

setSelect帶有一個數組，這里表示為一個數組文本

aspectRatio可能是最簡單的除以寬度/高度設置

后面沒有逗號的最后一個選項

jQuery(function(){ 

}); 

全寫為 

jQuery(document).ready(function(){  

}); 


       3.常用選項設置

       aspectRatio:選中區域按寬/高比，為1表示正方形。

       minSize:最小的寬，高值。

       maxSize:最大的寬，高值。

       setSelect:設置初始選中區域。

       bgColor:背景顏色

       bgOpacity:背景透明度。

       allowResize:是否允許改變選中區域大小。

       allowMove:是否允許移動選中區域。






</div>
</div>
    $( function() {                  
            $("#demoImage").Jcrop({  
                        aspectRatio: 1,             //選中區域寬高比為1，即選中區域為正方形       
                        bgColor:"#ccc",             //裁剪時背景顏色設為灰色  
                        bgOpacity:0.1,              //透明度設為0.1  
                        allowResize:false,          //不允許改變選中區域的大小  
                        setSelect:[0,0,100,100]     //初始化選中區域  
                  }  
             );          
        }  
    );  
 


4.api用法

var api = $.Jcrop("#demoImage");

api.disable();                      //設置為禁用裁剪效果

api.enable();                       //設置為啟用裁剪效果

api.setOptions({allowResize:false});//設置相應配置

api.setSelect([0,0,100,100]);       //設置選中區域




$( function() {  
                //事件處理  
                $("#demoImage").Jcrop(  
                {  
                    onChange:showCoords,    //當選擇區域變化的時候，執行對應的回調函數  
                    onSelect:showCoords     //當選中區域的時候，執行對應的回調函數  
                }  
                );  
            }  
        );  
            function showCoords(c) {  
                $("#txtX1").val(c.x);       //得到選中區域左上角橫坐標  
                $("#txtY1").val(c.y);       //得到選中區域左上角縱坐標  
                $("#txtX2").val(c.x2);      //得到選中區域右下角橫坐標  
                $("#txtY2").val(c.y2);      //得到選中區域右下角縱坐標  
                $("#txtWidth").val(c.w);    //得到選中區域的寬度  
                $("#txtHeight").val(c.h);   //得到選中區域的高度  
            }  
</div>
</div>
來自：http://blog.csdn.net/kenhins/article/details/17136815
                    
                    
                         本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
                         轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
                         本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
                         本文地址：http://www.baiduhome.net/lib/view/open1398826843484.html
                         JavaScript開發工具包 jcrop
                    

                
                
                    
                        相關經驗
                        
  一個功能強大的圖像裁剪jQuery插件：Jcrop
   jquery插件圖片裁剪jcrop
   圖像裁剪的jQuery插件：Croppic
   jQuery 圖像裁剪插件：jQuery Image Cropper
   jQuery File Upload –一個功能強大的文件上傳jQuery插件
                         
                    
                    
                        相關資訊
                        
  最好的 Jquery 圖片裁剪插件
   最好的免費jQuery圖像滑塊插件
   jQuery的圖片裁剪和大小調整插件集合
   5 個最新的圖片裁剪jQuery插件
   13個最佳jQuery的360度圖像旋轉插件
                         
                    
                    
                        相關文檔
                        
   jquery的validation插件
    基于jquery的自動完成插件jquery.autocomplete
    jQuery插件cookie使用
    圖形圖像
    圖像識別
    圖像處理入門
                         
                    

                    目錄