首页 > 代码库 > jQuery 上传头像插件Jcrop的实例
jQuery 上传头像插件Jcrop的实例
兼容：ie6+,FF,chrome等
示例图：
CSS：
说明：图像比例为110:135
下载包里有jquery.Jcrop.css
.jc-demo-box{position:relative; background-color: #e7e7e7; width: 395px; height: 340px;overflow: hidden; border: 1px solid #c8c8c8;}
#target{max-width:395px; max-height: 340px;}
.pre-1,.pre-2,.pre-3{border: 1px solid #c8c8c8;}
.pre-1{ width: 110px;height: 135px; overflow:hidden; }
.pre-2{ width: 73px;height: 90px; overflow:hidden; margin-top: 13px; }
.pre-3{ width: 40px;height: 48px; overflow:hidden;margin-top: 13px; }
.jcrop-holder{overflow:hidden;}
html:
JS:
$(function(){
var _Jw = ($(‘#target‘).width() - 110) / 2 ,
_Jh = ($(‘#target‘).height() - 135) / 2 ,
_Jw2 = _Jw + 110,
_Jh2 = _Jh + 135;
if($("#target").length >= 1){
var api = $.Jcrop("#target",{
onChange: showPreview,
onSelect: showPreview,
bgFade: true,
bgOpacity: .5,
setSelect: [_Jw, _Jh, _Jw2, _Jh2]
});
}
function showPreview(c){
var iw = $(‘.jcrop-holder>img‘).width(),
ih = $(‘.jcrop-holder>img‘).height(),
rx = 110 / c.w,
ry = 135 / c.h,
rx1 = 73 / c.w,
ry1 = 90 / c.h,
rx2 = 40 / c.w,
ry2 = 48 / c.h,
_data = http://www.mamicode.com/$(".jc-demo-box").attr("data");
if($.browser.msie && (_data =http://www.mamicode.com/= 90 || _data == 270)){
pre_img2($(‘.pre-1 img‘), rx, ih, ry, iw, c.x, c.y);
pre_img2($(‘.pre-2 img‘), rx1, ih, ry1, iw, c.x, c.y);
pre_img2($(‘.pre-3 img‘), rx2, ih, ry2, iw, c.x, c.y);
}else{
pre_img2($(‘.pre-1 img‘), rx, iw, ry, ih, c.x, c.y);
pre_img2($(‘.pre-2 img‘), rx1, iw, ry1, ih, c.x, c.y);
pre_img2($(‘.pre-3 img‘), rx2, iw, ry2, ih, c.x, c.y);
}
}
$("#idLeft").click(function(e){
imgRotate(-90);
stopEvent(e);
});
$("#idRight").click(function(e){
imgRotate(90);
stopEvent(e);
});
$("#idBig").click(function(e){
imgToSize(20);
stopEvent(e);
});
$("#idSmall").click(function(e){
imgToSize(-20);
stopEvent(e);
});
});
//图片旋转
var imgRotate = function(deg){
var img1 = $(".jcrop-holder>img"),
img2 = $("#real"),
_data = http://www.mamicode.com/parseInt($(".jc-demo-box").attr("data"));
if($.browser.msie){
var sin = Math.sin(Math.PI / 180 * (_data + deg));
var cos = Math.cos(Math.PI / 180 * (_data + deg));
var _filter = "progid:DXImageTransform.Microsoft.Matrix(M11=" + cos + "," + "M12=" + (-sin)
+ ",M21=" + sin+ ",M22=" + cos + ",SizingMethod=‘auto expand‘)";
img1.css({
filter: _filter + "alpha(opacity=60)",
opacity: 0.6
});
img2.css({
filter: _filter
});
$(‘.pre-1 img,.pre-2 img,.pre-3 img‘).css({
filter: _filter
});
var _w = img1.width(),
_h = img1.height();
$(‘.jcrop-holder‘).width(_w).height(_h).css({
left: Math.round((395 - _w) / 2) + ‘px‘,
top: Math.round((340 - _h) / 2) + ‘px‘
});
}else{
var _deg = deg + _data;
var _val = "rotate("+ _deg + "deg)";
img1.css({
"-webkit-transform": _val,
"-moz-transform": _val,
"-ms-transform": _val,
"-o-transform": _val,
"transform": _val
});
img2.css({
"-webkit-transform": _val,
"-moz-transform": _val,
"-ms-transform": _val,
"-o-transform": _val,
"transform": _val
});
$(‘.pre-1 img,.pre-2 img,.pre-3 img‘).css({
"-webkit-transform": _val,
"-moz-transform": _val,
"-ms-transform": _val,
"-o-transform": _val,
"transform": _val
});
}
if( deg > 0){
if(_data =http://www.mamicode.com/= 270){
_data = http://www.mamicode.com/0;
}else{
_data = http://www.mamicode.com/_data + 90;
}
}else{
if(_data =http://www.mamicode.com/= 0){
_data = http://www.mamicode.com/270;
}else{
_data = http://www.mamicode.com/_data - 90;
}
}
$(".jc-demo-box").attr("data", _data);
}
//放大缩小图片
var imgToSize = function (size) {
var img1 = $(".jcrop-holder>img"),
img2 = $("#real"),
ow=img1.width(),
oh=img1.height(),
rx = $("#small").width(),
ry = $("#small").height(),
cx = $("#small").position().left,
cy = $("#small").position().top,
_w = Math.round(ow + size),
_h = Math.round(((ow + size) * oh) / ow),
_data = http://www.mamicode.com/$(".jc-demo-box").attr("data");
$(‘.jcrop-holder‘).width(_w).height(_h).css({
left: Math.round((395 - _w) / 2) + ‘px‘,
top: Math.round((340 - _h) / 2) + ‘px‘
});
if($.browser.msie && (_data =http://www.mamicode.com/= 90 || _data == 270)){
img1.width(_h).height(_w);
img2.width(_h).height(_w);
pre_img($(‘.pre-1 img‘), rx, oh, ry, ow, cx, cy, 110, 135);
pre_img($(‘.pre-2 img‘), rx, oh, ry, ow, cx, cy, 73, 90);
pre_img($(‘.pre-3 img‘), rx, oh, ry, ow, cx, cy, 40, 48);
}else{
img1.width(_w).height(_h);
img2.width(_w).height(_h);
pre_img($(‘.pre-1 img‘), rx, ow, ry, oh, cx, cy, 110, 135);
pre_img($(‘.pre-2 img‘), rx, ow, ry, oh, cx, cy, 73, 90);
pre_img($(‘.pre-3 img‘), rx, ow, ry, oh, cx, cy, 40, 48);
}
}
var pre_img2 = function(obj, rx, iw, ry, ih, cx, cy){
obj.css({
width: Math.round(rx * iw) + ‘px‘,
height: Math.round(ry * ih) + ‘px‘,
marginLeft: ‘-‘ + Math.round(rx * cx) + ‘px‘,
marginTop: ‘-‘ + Math.round(ry * cy) + ‘px‘
});
}
var pre_img = function(obj, rx, ow, ry, oh, cx, cy, w, h){
obj.css({
width: Math.round( w / rx * ow) + ‘px‘,
height: Math.round(h / ry * oh) + ‘px‘,
marginLeft: ‘-‘ + Math.round(w / rx * cx) + ‘px‘,
marginTop: ‘-‘ + Math.round(h / rx * cy) + ‘px‘
});
}
下载地址：https://github.com/jianhuayixiao/Jcrop
jQuery 上传头像插件Jcrop的实例
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。