jquery插件图片裁剪jcrop

官网地址:

加载

<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 sizevar jcrop_api, boundx, boundy;jQuery(‘#target’).Jcrop({onChange: updatePreview,onSelect: updatePreview,aspectRatio: 1.4468},function(){// Use the API to get the real image sizevar bounds = this.getBounds();boundx = bounds[0];boundy = bounds[1];// Store the API in the jcrop_api variablejcrop_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>

,有一种旅行,叫单车旅行。它没有奢侈准备,

jquery插件图片裁剪jcrop

相关文章:

你感兴趣的文章:

标签云: