码迷,mamicode.com
首页 > 其他好文 > 详细

jq 图片裁剪

时间:2016-12-28 19:52:59      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:blog   update   ext   min   预览   pre   jpg   处理   ctr   

1.html

<div class="jcropbox"  style="display: none">
     <img src="" alt="" id="jcropImg"  style="display: none"/>
   <div class="right-img-box">
         <span class="title-text">头像预览</span>
         <div class="imgBigBox" style="width: 186px; height: 186px; overflow: hidden"><img src="" alt="" id="imgBig" /></div>
         <span class="title-text">大头像150*150</span>
         <div class="imgSmallBox" style="width: 24px; height: 24px; overflow: hidden"><img src="" alt="" id="imgSmall"/></div>
         <span class="title-text">小头像24*24</span>
     </div>
     <div class="updateImg default-btn" id="updateImg">确定</div>
</div>

2.js

//jq引用
<script src="/third-party/jquery.Jcrop.min.js"></script>

//使用
var data = {url: ‘xxx.jpg‘}
var updatePreview = function(c){
  if (parseInt(c.w) > 0){
  $(‘#imgSmall‘).css({
  width: Math.round(this.small / c.w * this.boundx) + ‘px‘,
  height: Math.round(this.small/ c.h * this.boundy) + ‘px‘,
   marginLeft: ‘-‘ + Math.round(this.small / c.w * c.x) + ‘px‘,
  marginTop: ‘-‘ + Math.round(this.small/ c.h * c.y) + ‘px‘
  });
  $(‘#imgBig‘).css({
  width: Math.round(this.big / c.w * this.boundx) + ‘px‘,
  height: Math.round(this.big/ c.h * this.boundy) + ‘px‘,
  marginLeft: ‘-‘ + Math.round(this.big / c.w * c.x) + ‘px‘,
  marginTop: ‘-‘ + Math.round(this.big/ c.h * c.y) + ‘px‘
  });
  }
  this.x = c.x;
  this.y = c.y;
  this.w = c.w;
  this.h = c.h;
}
$("#jcropImg").attr("src",data.url);
$("#imgBig").attr("src",data.url);
$("#imgSmall").attr("src",data.url);
$(
‘#jcropImg‘).Jcrop({ aspectRatio:1, //比例 setSelect: [ 0, 0, 2000,2000], //开始默认 boxWidth:200, boxHeight:200, onChange: updatePreview, onSelect: updatePreview },function () { var bounds = this.getBounds(); this.boundx = bounds[0]; this.boundy = bounds[1]; this.small = 24; this.big = 186; });

 

3.这种方式一般用在用户的头像处理 取大图和小图 并保存在node 的相应位置

配合方式

先上传图片:http://www.cnblogs.com/zycbloger/p/6230029.html

前端截图:http://www.cnblogs.com/zycbloger/p/6230095.html

最后node截图:http://www.cnblogs.com/zycbloger/p/6230155.html

jq 图片裁剪

标签:blog   update   ext   min   预览   pre   jpg   处理   ctr   

原文地址:http://www.cnblogs.com/zycbloger/p/6230095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!