在线裁剪图片jquery插件Jcrop - 中文文档

效果请看：http://deepliquid.com/projects/Jcrop/demos.php 入门 • 下载js插件页面 • 放到页面相应的位置 • 同时也需要加载jquery 加载顺序 •jQuery •Jcrop •Jcrop CSS样式 如： <script src="js/jquery.pack.js"></script> <script src="js/jquery.Jcrop.pack.js"></script> <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />   注意:你也可以调整成其他的位置 调用 假如： <img src="flowers.jpg" id="cropbox" /> 编写以下脚本 <script language="Javascript"> jQuery(function() { jQuery('#cropbox').Jcrop(); }); </script>   Jcrop就可以激活了 事件处理 Jcrop有2个主要的事件处理程序 onChange 和 onSelect. onSelect  callback  选择完成后调用   onChange  callback  选框移动（或者说改变）时调用   定义一个事件出来函数 <script language="Javascript"> function showCoords(c) { // variables can be accessed here as // c.x, c.y, c.x2, c.y2, c.w, c.h //w宽度 h高度 x y 左上角 x2 y2右下角坐标 }; </script>   然后附加上去 <script language="Javascript"> jQuery(function() { jQuery('#cropbox').Jcrop({ onSelect: showCoords, onChange: showCoords }); }); </script>   这是一个标准的jquery语法，注意最后一个属性后面没有逗号 设置选项 参数名称  类型  描述  默认   aspectRatio  decimal  设定宽高比 n/a   minSize  array [ w, h ]  设置最小尺寸 n/a   maxSize  array [ w, h ]  设置最大尺寸 n/a   setSelect  array [ x, y, x2, y2 ]  设置一个初选框的位置 n/a  左上角右下角坐标 bgColor  color value  设置背景容器颜色 'black'   bgOpacity  decimal 0 - 1  设置当图像被裁剪选框外的透明度 .6   如： <script language="Javascript"> jQuery(function() { jQuery('#cropbox').Jcrop({ onSelect: showCoords, bgColor: 'black', bgOpacity: .4, setSelect: [ 100, 100, 50, 50 ], aspectRatio: 16 / 9 }); }); </script>   注意 •Text 必须有引号 •其他就不要有引号 •最后一个参数后面没有逗号