标签：
引入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="~/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>
标签：
原文地址：http://www.cnblogs.com/liuph/p/4203292.html
