Jcrop是一個jQuery圖片裁剪外掛，它能為你的WEB應用程式快速簡單地提供圖片裁剪的功能。特點如下：

• 對所有圖片均unobtrusively（無侵入的，保持DOM簡潔）
• 支援寬高比例鎖定
• 支援 minSize/maxSize設定
• 支援改變選區或移 動選區時的回撥（Callback）
• 支援用鍵盤微調選區
• 通過API建立互動，比如動畫效果
• 支援CSS樣式
  官網：http://jcrop.org/
  可下載例子進行學習
  基本使用方法如下：
  一、在head部分(和之間)插入相關css和js檔案。

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

二、在head部分插入回撥函式等相關處理引數。

<script language="Javascript">
  <!--
  jQuery(function($){
 // Create variables (in this scope) to hold the API and image size
  var jcrop_api, boundx, boundy;

  $('#cropbox'
 
).Jcrop({
  minSize: [0,0],
  maxSize:[0,0],
  setSelect: [0,0,0,0],
  boxWidth:800,
  borderOpacity:0.3,
  keySupport:false,
  dragEdges:false,
  allowSelect:false,
  allowResize:false,
  bgOpacity:0.2,
  boundary:0,
  //allowMove:false,
  addClass: 'jcrop-handle',
  onSelect: updateCoords,
  },
  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;
  });
  function updateCoords(c)
  {
  $('#x').val(c.x);
  $('#y').val(c.y);
  $('#w').val(c.w);
  $('#h').val(c.h);
  };
  function checkCoords()
  { 
  if (parseInt($('#w').val())) return true;
  alert('請選擇裁剪區域');
  return false;
  }; 
  });
-->
</script>

三、給相關圖片加上id以便識別。

<img id="cropbox" src="x.jpg">

這樣就能實現最簡單的裁剪效果，至於如何結合php等動態語句處理圖片，在置頂的文章裡已經給出了示例。
下表給出基本options引數設定：

下表是api方法