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'
      });
    }
  };
});</pre> <pre class="brush:javascript; toolbar: true; auto-links: false;"><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></pre>