首页 > 代码库 > jq 图片裁剪
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="http://www.mamicode.com/third-party/jquery.Jcrop.min.js"></script> //使用
var data = http://www.mamicode.com/{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 图片裁剪
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。