jquery插件图片裁剪jcrop

来自： http://blog.csdn.net//yhhazr/article/details/7866485

官网地址：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>