jq 图片裁剪

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

转载于:https://www.cnblogs.com/zycbloger/p/6230095.html