jquery插件圖片裁剪jcrop

官網地址：http://deepliquid.com/content/Jcrop.html

加載

<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script src="js/jquery.Jcrop.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />

調用

jQuery(window).load(function(){

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api, boundx, boundy;
      
      jQuery('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: 1.4468
      },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 updatePreview(c)
      {
        if (parseInt(c.w) > 0)
        {
          var rx = 204 / c.w;
          var ry = 141 / c.h;

          $('#preview').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'
          });
        }
      };
    });

 

<img  id="target" src="test.jpg" />
<div style="width:204px;height:141px;overflow:hidden;">
    <img src="test.jpg" id="preview" alt="Preview" class="jcrop-preview" />    	
</div>