首页 > 代码库 > Jcrop使用

Jcrop使用

2024-10-24 08:35:02   208人阅读

引入jquery.Jcrop.min.css和jquery.Jcrop.min.js

技术分享
 1     <script> 2         var jc_showSize = [300, 200, 160, 160, 60, 60];/*图片尺寸*/ 3         var jc_showImgs = "#show0,#show1";/*缩略图显示*/ 4         var jc_x, jc_y, jc_w, jc_h;/*选中区域x,y,w,h*/ 5         $(function () { 6             $("#img").Jcrop({ 7                 setSelect: [30, 30, 270, 270]/*初始选中*/ 8                 , onChange: jc_onCS/*实时选中*/ 9                 , onSelect: jc_onCS/*最终选中*/10                 , aspectRatio: 1/*宽高比*/11                 , bgColor: ‘black‘/*背景色*/12                 , bgOpacity: 0.6/*背景色透明度*/13                 , bgFade: true/*背景过渡*/14             });15         });16         function jc_onCS(info) {17             for (var i = 1; i < jc_showSize.length / 2; i++) {18                 var imgW = jc_showSize[0] * jc_showSize[2 * i] / info.w;//大图宽 * 小图宽 / 选框宽19                 var imgH = jc_showSize[1] * jc_showSize[2 * i + 1] / info.h;20                 var left = info.x * jc_showSize[2 * i] / info.w;21                 var top = info.y * jc_showSize[2 * i + 1] / info.h;22                 var imgs = jc_showImgs.split(‘,‘);23                 $(imgs[i - 1]).css({ "width": imgW, "height": imgH, "left": -left, "top": -top });24             }25             jc_x = info.x; jc_y = info.y; jc_w = info.w; jc_h = info.h;26         };27         function cutImg() {28             if (jc_w == 0 && jc_h == 0)//图片不进行剪裁保存29             {30                 jc_w = 300;31                 jc_h = 300;32                 jc_x = 0;33                 jc_y = 0;34             }35             var obj = { startX: jc_x, startY: jc_y, width: jc_w, height: jc_h };36             $.get("/test/CutImg", obj);37         }38     </script>
实现

缩略图必须

<div style="width: 60px; height: 60px; position:relative;overflow:hidden;">
<img id="show1" src="http://www.mamicode.com/~/Images/test.png" style="position:absolute;" />
</div>

技术分享
 1 <body> 2     <div> 3         <img id="img" src="~/Images/test.png" width="300" height="200" /> 4     </div> 5     <div style="width: 160px; height: 160px;position: relative; overflow: hidden; "> 6         <img id="show0" src="~/Images/test.png" style="position:absolute;" /> 7     </div> 8     <div style="width: 60px; height: 60px; position:relative;overflow:hidden;"> 9         <img id="show1" src="~/Images/test.png" style="position:absolute;" />10     </div>11     <div>12         <button onclick="cutImg()">截图</button>13     </div>14 </body>
HTML

 

Jcrop使用


联系
我们