首页 > 代码库 > Jcrop使用
Jcrop使用
引入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>
Jcrop使用
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。