前言：想到用户资料中一般有个图像自我截取的部分，为什么要截取呢，因为好看了。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.
}
700
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
