本文转载于:猿2048网站➮用JQuery仿造QQ头像裁剪功能
所有文件都可在我的Github上下载，从头到尾从简到繁按步骤一共分了9个HTML文件，每个步骤文件里的注释都写的很清楚，故在本博客内不赘述。
原理：
主要是通过css的clip来裁剪图片可视区域，拖动剪裁窗口这里使用了JQ-UI的draggable插件（但是缩放没有，贪方便可以使用Resizable插件，但都用插件的话就没有研究的意义了）。
缩放功能原理其实很简单，不外乎获取剪裁框的offset()或position()，以及各容器宽高、鼠标位置，然后做个大杂侩计算。
只能说咱做前端的必须要认真耐心地去做计算，虽然过程颇为麻烦，但绝对不是“做不出来”。有的朋友在做某些功能前，可能会因为需要涉及较麻烦的计算就放弃，这是不靠谱的做法。
P.S.：像效果图中会存在图片被选中（变蓝色）的情况，是因为本章直接用的img，如果不喜欢这种图片被选中的情况，可以用一个div直接设置背景替换img即可（不过这里得使用background-size:100% 100%，如果不考虑IE8-的话，利用这种方法交互视觉上感觉会更好些）
贴一下最终版的代码，想要从头看起的朋友可以去我上方提供的连接查看。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>裁剪头像</title>
<script src="jq.js"></script>
<script src="draggable.js"></script>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<style type=
"text/css"
>
body {
background-color
:
#333
;}
.pic_wrap{
position
:
relative
;
float
:
left
;
margin
:
100px
;
width
:
320px
;
height
:
320px
;
background
:
black
; }
.pic_wrap img{
position
:
absolute
;
width
:
320px
;
height
:
320px
;}
.pic
1
{opacity:
0.5
;}
.pic
2
{
clip
:rect(
0
150px
150px
0
);}
.clip_box{
position
:
absolute
;
margin-left
:
-1px
;
margin-top
:
-1px
;
width
:
150px
;
height
:
150px
;
border
:
solid
1px
white
;
cursor
:
move
;}
.clip_box span{
display
:
block
;
position
:
absolute
;
width
:
8px
;
height
:
9px
;
background
:
white
; border-radius:
4px
;}
#lt{
left
:
-4px
;
top
:
-4px
;
cursor
:
nw-resize
;}
#rt{
right
:
-4px
;
top
:
-4px
;
cursor
:
ne-resize
}
#lb{
left
:
-4px
;
bottom
:
-4px
;
cursor
:
sw-resize
}
#rb{
right
:
-4px
;
bottom
:
-4px
;
cursor
:
se-resize
}
.preview{
margin-top
:
100px
;
position
:
relative
;
float
:
left
;
width
:
100px
;
height
:
100px
;
overflow
:
hidden
;}
.pic
3
{
position
:
absolute
;}
</style>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
<script type=
"text/javascript"
>
$(
function
(){
var
$picWrap = $(
"#pic_wrap"
);
var
$rawPic = $picWrap.find(
"img:eq(0)"
);
var
$clipPic = $picWrap.find(
"img:eq(1)"
);
var
$clipBox = $(
"#clip_box"
);
var
$prePic = $(
"#pic3"
);
//获取预览图
var
prebox_w = $(
"#preview"
).width();
//获取预览图容器宽度/高度
var
$lt = $(
"#lt"
);
var
$rt = $(
"#rt"
);
var
$lb = $(
"#lb"
);
var
$rb = $(
"#rb"
);
var
wrap_w = $picWrap.width();
var
isResize = !1;
var
flag =
""
;
$lt.mousedown(
function
(e){
e.stopPropagation();
isResize=!0;
flag =
"leftTop"
;
})
$rt.mousedown(
function
(e){
e.stopPropagation();
isResize=!0;
flag =
"rightTop"
;
})
$lb.mousedown(
function
(e){
e.stopPropagation();
isResize=!0;
flag =
"leftDown"
;
})
$rb.mousedown(
function
(e){
e.stopPropagation();
isResize=!0;
flag =
"rightDown"
;
})
$(window).mouseup(
function
(){
isResize=!1;
flag =
""
;
})
$clipBox.find(
"span"
).mousemove(
function
(e){
e.stopPropagation();
})
$clipBox.draggable({
containment:
"#pic_wrap"
,
drag:
function
(){
setClip();
|
更多专业前端知识，请上 【猿2048】www.mk2048.com