zoukankan      html  css  js  c++  java
  • 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=" 186px; height: 186px; overflow: hidden"><img src="" alt="" id="imgBig" /></div>
             <span class="title-text">大头像150*150</span>
             <div class="imgSmallBox" style=" 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({
       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({
       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

  • 相关阅读:
    Codeforces 295 (Div.1)
    Codeforces 614
    Java面试题
    Eclipse创建JSP、HTML、CSS文件默认字符集设置成UTF-8
    Eclipse中配置Tomcat容器
    设置Eclipse中的字符集为UTF-8
    Windows中配置maven环境变量
    Windows中配置MySQL环境变量
    Nacicat for Oracle 绿色版 亲测可用
    MySQL安装版安装过程
  • 原文地址:https://www.cnblogs.com/zycbloger/p/6230095.html
Copyright © 2011-2022 走看看