主要是前臺工作，後臺比較簡單

jcrop

                $jQuery('#target').Jcrop({
                          allowSelect: true,
                          bgOpacity: 0.5,
                          baseClass: 'jcrop',
                          //bgOpacity: .6,
                          aspectRatio: 3/2,  //設定選擇框的比重
                          boxWidth: 600,//用於設定畫布的大小可以將佈局按倍數縮放
                          boxHeight: 600,
                          onChange:   showCoords,
                          onSelect:   showCoords,
                          onRelease:  clearCoords
                     }, function() {
                        jcropApi = this;
                        jcropApi.setSelect([30,30,30+270,30+170]);
                        //alert(222);
                        //jcropApi.setImage(blobURL);
                     });
 

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);
};

x、y是左上角座標
w,h是寬度和高度

這裡注意boxWidth：是畫布的限制，
如果圖片特別大，到了2000px，那麼boxwidth就會對他進行限制，
等比例限制到boxWidth下；
原理上：將原來的div、img隱藏、新建一個div img是比例縮放的；
這時候就在畫布大小上就可以展示下了，記錄下xscale、yscale;

當進行選擇onchange 事件後，
回撥unscale，讓比例等比例返回，這樣你得到的x、y和width、height就是原值了
以下相關原始碼：

      function update(select) //{{{
      {
        var c = Coords.getFixed();

        resize(c.w, c.h);
        moveto(c.x, c.y);
        if (options.shade) Shade.updateRaw(c);

        awake || show();

        if (select
 
) {
          options.onSelect.call(api, unscale(c));
        } else {
          options.onChange.call(api, unscale(c));
        }
      }

    function unscale(c) //{{{
    {
      return {
        x: c.x * xscale,
        y: c.y * yscale,
        x2: c.x2 * xscale,
        y2: c.y2 * yscale,
        w: c.w * xscale,
        h: c.h * yscale
      };
    }

只需要將x、y、w、h傳到後臺，再將原始圖片傳到後臺，進行後臺圖片擷取就可以了