Jquery图片裁剪插件

来自互联网，整理分享有
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br> <br>   <br>     <meta> <br>     <link> <br>     <style> <br /> body{font-family: Arial,sans-serif;}<br /> .demo{background: #eee;border: solid 2px #ddd;border-radius: 4px;padding: 0.6em;height:380px; width:750px;}<br /> div.frame{background: #fff;padding: 0.8em;border: solid 2px #ddd;}<br /> .demo table td{padding-left: 1em;}<br /> .demo table td input{width: 4em;text-align: right}<br /> .coolbg{-moz-border-bottom-colors:none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;background: url("allbtbg2.gif") repeat scroll 0 0 #EFF7D0;border-color: -moz-use-text-color #ACACAC #ACACAC -moz-use-text-color;border-image: none;border-style: none solid solid none;border-width: medium 1px 1px medium;cursor: pointer;padding:2px 5px;font-size:12px} <br /> </style> <br>   <br>   <br> <script></script><br> <script></script><br> <script><br /> function preview(img, selection) {<br /> if (!selection.width || !selection.height)<br /> return;<br /> <br /> var scaleX = 100 / selection.width;<br /> var scaleY = 100 / selection.height;<br /> <br /> $(&#039;#preview img&#039;).css({<br /> width: Math.round(scaleX * 300),<br /> height: Math.round(scaleY * 300),<br /> marginLeft: -Math.round(scaleX * selection.x1),<br /> marginTop: -Math.round(scaleY * selection.y1)<br /> });<br /> <br /> $(&#039;#x1&#039;).val(selection.x1);<br /> $(&#039;#y1&#039;).val(selection.y1);<br /> $(&#039;#x2&#039;).val(selection.x2);<br /> $(&#039;#y2&#039;).val(selection.y2);<br /> $(&#039;#w&#039;).val(selection.width);<br /> $(&#039;#h&#039;).val(selection.height); <br /> }<br /> <br /> $(function () {<br /> $(&#039;#photo&#039;).imgAreaSelect({ aspectRatio: &#039;1:1&#039;, handles: true,<br /> fadeSpeed: 200, onSelectChange: preview });<br /> });<br /> </script><br> <div> <br>   <div> <br>     <p><br>      <b>大图</b>   选取：左击不放拖曳光标     取消：选取区外左击光标<br>     </p> <br>  <br>     <div> <br>       <img src="/static/imghwm/default1.png" data-src="flower2.jpg" class="lazy" alt="Jquery图片裁剪插件" ><br>     </div> <br>   </div> <br>  <br>   <div> <br>     <p><br>       预览：<br>     </p> <br>   <br>     <div> <br>       <div> <br>         <img src="/static/imghwm/default1.png" data-src="flower2.jpg" class="lazy" alt="Jquery图片裁剪插件" ><br>       </div> <br>     </div> <br> <br>     <table> <br>       <thead> <br>         <tr> <br>           <th> <br>               坐标：<br>           </th> <br>           <th> <br>             宽高：<br>           </th> <br>         </tr> <br>       </thead> <br>       <tbody> <br>         <tr> <br>           <td><b>X<sub>1</sub>:</b></td> <br>                <td><input></td> <br>                <td><b>宽:</b></td> <br>                <td><input></td> <br>         </tr> <br>         <tr> <br>           <td><b>Y<sub>1</sub>:</b></td> <br>           <td><input></td> <br>           <td><b>高:</b></td> <br>           <td><input></td> <br>         </tr> <br>         <tr> <br>           <td><b>X<sub>2</sub>:</b></td> <br>           <td><input></td> <br>           <td><input></td> <br>         </tr> <br>         <tr> <br>           <td><b>Y<sub>2</sub>:</b></td> <br>           <td><input></td> <br>           <td><input></td> <br>         </tr> <br>       </tbody> <br>     </table> <br>   </div> <br> </div> <br> <br>

imgareaselect.rar ( 96.25 KB 下载：234 次 )

AD：真正免费，域名+虚机+企业邮箱=0元