jq 图片裁剪

Posted 2020-08-25 ＜/script＞

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