jQuery 上传头像插件Jcrop的实例
Posted WebEnh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 = $(".jc-demo-box").attr("data");
if($.browser.msie && (_data == 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 = 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 == 270){
_data = 0;
}else{
_data = _data + 90;
}
}else{
if(_data == 0){
_data = 270;
}else{
_data = _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 = $(".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 == 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‘
});
}
以上是关于jQuery 上传头像插件Jcrop的实例的主要内容，如果未能解决你的问题，请参考以下文章