前言:想到用户资料中一般有个图像自我截取的部分,为什么要截取呢,因为好看了。so,经过我各种百度,各种参考,终于打工搞成了,写下纪念纪念,让以后拿来就用也好。
一:想前端ui这东西,我就懒得说话了,哎,没艺术啊!毫不犹豫的选择上网找资料了,发现一般有两种方法1:Jcrop;2:imgAreaSelect;呵呵,我选了imgAreaSelect;使用很简单么?
二:获取这个插件包:点我就来了开心吧!
三:使用方法简介:
$('#img').imgAreaSelect({
各种参数配置,回调函数
});
01.
$(
'img#select'
).imgAreaSelect({
02.
selectionColor:
'blue'
,
//截取颜色
03.
//看名字就知道了,截取部分的左上右下的点坐标哦
04.
x1:
0
,y1:
0
,x2:
50
,y2:
50
,
05.
maxWidth:
400
,maxHeitht:
400
,
//限定的截取部分宽高:
06.
minWidth:
50
,minHeight:
50
,
07.
selectionOpacity:
0.1
,
//截取的透明度
08.
handles:
true
,
//截取边框的小柄
09.
aspectRatio:
'1:1'
,
//固定比例大小
10.
onSelectEnd:preview
//截取操作完后,需要获取什么的函数,自定义
11.
12.
13.
});
官网在这 百度文库中文对译部分: 他人博客:
-------------------------------------------------------------------------
四:附加解释说明,经过上方各种链接可能聪明的你已经有点不懂了
(截取的原理):
1:给定你想选择显示截取后的大小:比如200
2:实际你截取的大小:select_width:
3: 显示比例:scale = 200 / (selection.width || 1);
4: 如何显示呢?把原图按此比例扩大,然后在控制边距以 -x,-y,偏移
回调函数部分:
01.
var scaleX =
200
/ (selection.width ||
1
);
02.
var scaleY =
200
/ (selection.height ||
1
);
03.
04.
var scaleX1 =
100
/ (selection.width ||
1
);
05.
var scaleY1 =
100
/ (selection.height ||
1
);
06.
07.
$(
'#preview200'
).css({
08.
width: Math.round(scaleX *
300
) +
'px'
,
09.
height: Math.round(scaleY *
300
) +
'px'
,
10.
marginLeft:
'-'
+ Math.round(scaleX*selection.x1) +
'px'
,
11.
marginTop:
'-'
+ Math.round(scaleY*selection.y1) +
'px'
12.
13.
});
五:好了,激动人心的时候来了,请看图:
参考代码:不含服务端对图像的截取
001.
<!DOCTYPE html PUBLIC
'-//W3C//DTD XHTML 1.0 Transitional//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'
>
002.
<html xmlns=
'http://www.w3.org/1999/xhtml'
>
003.
<head>
004.
<meta http-equiv=
'Content-Type'
content=
'text/html; charset=utf-8'
/>
005.
<title>图像选取</title>
006.
007.
<link rel=
'stylesheet'
type=
'text/css'
href=
'css/imgareaselect-default.css'
/>
008.
<script type=
'text/javascript'
src=
'scripts/jquery.min.js'
></script>
009.
<script type=
'text/javascript'
src=
'scripts/jquery.imgareaselect.pack.js'
></script>
010.
<script type=
'text/javascript'
src=
'../_uploadfilecheck.js'
></script>
011.
<script type=
'text/javascript'
>
012.
$(document).ready(function () {
013.
$(
'img#select'
).imgAreaSelect({
014.
selectionColor:
'blue'
,
015.
x1:
0
,y1:
0
,x2:
50
,y2:
50
,
016.
maxWidth:
400
,maxHeitht:
400
,
017.
minWidth:
50
,minHeight:
50
,
018.
selectionOpacity:
0.1
,
019.
handles:
true
,
020.
aspectRatio:
'1:1'
,
021.
onSelectEnd:preview
022.
023.
024.
});
025.
$(
'#button1'
).click(function(){
026.
if
(checkImgType($(
'#imgFile'
)[
0
])){
027.
$(
this
).parent().submit();
028.
029.
}
030.
});
031.
032.
$(
'#button2'
).click(function(){
033.
alert($(
this
).parent().submit());
034.
});
035.
})
036.
function getValue(selection){
037.
$(
'input[name='
x1
']'
).val(selection.x1);
038.
$(
'input[name='
y1
']'
).val(selection.y1);
039.
$(
'input[name='
width
']'
).val(selection.width);
040.
$(
'input[name='
height
']'
).val(selection.height);
041.
}
042.
function preview(img, selection) {
043.
if
(selection.width>
49
){
044.
getValue(selection);
045.
var scaleX =
200
/ (selection.width ||
1
);
046.
var scaleY =
200
/ (selection.height ||
1
);
047.
048.
var scaleX1 =
100
/ (selection.width ||
1
);
049.
var scaleY1 =
100
/ (selection.height ||
1
);
050.
051.
$(
'#preview200'
).css({
052.
width: Math.round(scaleX *
300
) +
'px'
,
053.
height: Math.round(scaleY *
300
) +
'px'
,
054.
marginLeft:
'-'
+ Math.round(scaleX * selection.x1) +
'px'
,
055.
marginTop:
'-'
+ Math.round(scaleY * selection.y1) +
'px'
056.
057.
});
058.
$(
'#preview100'
).css({
059.
width: Math.round(scaleX1 *
300
) +
'px'
,
060.
height: Math.round(scaleY1 *
300
) +
'px'
,
061.
marginLeft:
'-'
+ Math.round(scaleX1* selection.x1) +
'px'
,
062.
marginTop:
'-'
+ Math.round(scaleY1 * selection.y1) +
'px'
063.
064.
});
065.
066.
}
067.
}
068.
069.
070.
</script>
071.
072.
073.
074.
075.
076.
077.
<style type=
'text/css'
>
078.
#container{
079.
// position:absolute;
080.
// left:40px;
081.
// background:#FFF;
082.
083.
border:#
666
2px solid;
084.
border-radius:10px;
085.
width:600px;
086.
height:500px;
087.
padding:20px;
088.
}
089.
#selectdiv{
090.
width:350px;
091.
height:550px;
092.
float
:left;
093.
// border-right:#666 2px solid;
094.
// border:#666 2px solid;
095.
}
096.
#uploaddiv{
097.
margin-top:20px;
098.
border-top:#CCC 1px solid;
099.
}
100.
#prediv200{
101.
height:200px;
102.
width:200px;
103.
overflow:hidden;
104.
border:#CCC 3px dashed;
105.
}
106.
#prediv100{
107.
height:100px;
108.
width:100px;
109.
overflow:hidden;
110.
border:#CCC 3px dashed;
111.
}
112.
#preview{
113.
position:relative;
114.
overflow:hidden;
115.
}
116.
[type=button]{
117.
width:50px;
118.
}
119.
</style>
120.
</head>
121.
122.
<body>
123.
124.
<div id=
'container'
>
125.
126.
<div id=
'selectdiv'
>
127.
<img id=
'select'
src=
'26.jpg'
width=
'300px'
height=
'300px'
/>
128.
129.
<div>
130.
<p>图片上传:<font color=
'red'
>*.gif,*.jpg,*.png,*.bmp</font></p>
131.
132.
<form>
133.
<input type=
'file'
name=
'imgFile'
id=
'imgFile'
><br /><br />
134.
<input type=
'button'
value=
'上传'
id=
'button1'
/>
135.
</form>
136.
</div>
137.
</div>
138.
139.
<div id=
'prediv200'
>
140.
<img id=
'preview200'
src=
'26.jpg'
width=
'200px'
height=
'200px'
/>
141.
</div>
142.
143.
<div id=
'prediv100'
>
144.
<img id=
'preview100'
src=
'26.jpg'
width=
'100px'
height=
'100px'
/>
145.
</div>
146.
147.
<div>
148.
<form>
149.
<input type=
'hidden'
name=
'x1'
value=
'0'
/>
150.
<input type=
'hidden'
name=
'y1'
value=
'0'
/>
151.
<input type=
'hidden'
name=
'width'
value=
'100'
/>
152.
<input type=
'hidden'
name=
'height'
value=
'100'
/>
153.
<br /><br />
154.
<input type=
'button'
value=
'修改'
id=
'button2'
/>
155.
</form>
156.
</div>
157.
</div>
158.
159.
160.
161.
</body>
162.
</html>
文件上传验证js:
01.
/**检查图片上传类型*/
02.
function checkImgType(obj){
03.
04.
var imgFile =
''
;
05.
//获取图片的全路径
06.
var imgFilePath = getImgFullPath(obj);
07.
var endIndex = imgFilePath.lastIndexOf(
'\'
);
08.
var lastIndex = imgFilePath.length-endIndex-
1
;
09.
if
(endIndex != -
1
)
10.
imgFile= imgFilePath.substr(endIndex+
1
,lastIndex);
11.
else
12.
imgFile = imgFilePath;
13.
14.
var tag =
true
;
15.
endIndex = imgFilePath.lastIndexOf(
'.'
);
16.
if
(endIndex == -
1
)
17.
tag =
false
;
18.
19.
var ImgName = imgFilePath.substr(endIndex+
1
,lastIndex);
20.
ImgName = ImgName.toUpperCase();
21.
22.
if
(ImgName !=
'GIF'
&& ImgName !=
'JPG'
&& ImgName !=
'PNG'
&& ImgName !=
'BMP'
){
23.
tag=
false
;
24.
}
25.
if
(!tag) {
26.
alert(
'上传图片的文件类型必须为: *.gif,*.jpg,*.png,*.bmp,请重新选择!'
)
27.
alert(
'你逗我么'
);
28.
// Upload.clear(obj);
29.
return
false
;
30.
}
31.
return
true
;
32.
}
33.
34.
function getImgFullPath(obj) {
35.
if
(obj) {
36.
//ie
37.
if
(window.navigator.userAgent.indexOf(
'MSIE'
) >=
1
) {
38.
obj.select();
39.
return
document.selection.createRange().text;
40.
}
41.
//firefox
42.
else
if
(window.navigator.userAgent.indexOf(
'Firefox'
) >=
1
) {
43.
if
(obj.files) {
44.
return
obj.files.item(
0
).getAsDataURL();
45.
}
46.
return
obj.value;
47.
}
48.
return
obj.value;
49.
}
50.
}