jquery插件图片裁剪jcrop
SalvadorRiv
9年前
来自: 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>