标签: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
标签:blog update ext min 预览 pre jpg 处理 ctr
原文地址:http://www.cnblogs.com/zycbloger/p/6230095.html