请转载此文的朋友务必附带原文链接，谢谢。
原文链接：http://xuyran.blog.51cto.com/11641754/1866681
|
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
|
//上传头像$(window).load(function() {
$('#upload-file').on('change', function(){
var fimg = this.files[0];
var filter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
if(this.files.length !== 0){
if(!filter.test(fimg.type)){
alertBoxSmall("请选择有效的图片文件！");
}else if(parseInt(fimg.size/1024) > 1024){
alertBoxSmall("图片大小不得超过1M！");
}else{
var reader = new FileReader();
reader.onload = function(e) {
$("#avatar")[0].src = e.target.result;
cropped();
//上传头像遮罩随时变化
$('img#avatar').imgAreaSelect({
aspectRatio: "1:1",
x1: 100,
y1:0,
x2: 300,
y2: 200,
});
}
reader.readAsDataURL(this.files[0]);
}
}
})
//$('#btnCrop').on('click', cropped);
}); |
|
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
|
//上传头像
$('img#avatar').imgAreaSelect({
aspectRatio: "1:1",
x1: 100,
y1:0,
x2: 300,
y2: 200,
onSelectEnd: selectInit,
onSelectChange: preview
});
function cropped(){
var img = $("#avatar").attr("src");
$('.cropped ul li:first-child img').attr("src",img);
$('.cropped ul li:nth-child(2) img').attr("src",img);
$('.cropped ul li:last-child img').attr("src",img);
}function adjust(el, selection) {
var scaleX = $(el).width() / (selection.width || 1);
var scaleY = $(el).height() / (selection.width || 1);
$(el+' img').css({
width: Math.round(scaleX*$('#avatar').width() ) + 'px',
height: Math.round(scaleY*$('#avatar').height() ) + 'px',
marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
});
}function preview(img, selection) {
adjust('#small_preview01', selection);
adjust('#small_preview02', selection);
adjust('#small_preview03', selection);
} |
|
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
|
/*图像上传2*//* * imgAreaSelect default style
*/
.imgareaselect-border1 {
background: url(../images/border-v.gif) repeat-y left top;
}.imgareaselect-border2 {
background: url(../images/border-h.gif) repeat-x left top;
}.imgareaselect-border3 {
background: url(../images/border-v.gif) repeat-y right top;
}.imgareaselect-border4 {
background: url(../images/border-h.gif) repeat-x left bottom;
}.imgareaselect-border1, .imgareaselect-border2,
.imgareaselect-border3, .imgareaselect-border4 {
filter: alpha(opacity=80);
opacity: 0.8;
}.imgareaselect-handle { background-color: #fff;
border: solid 1px #000;
filter: alpha(opacity=50);
opacity: 0.5;
}.imgareaselect-outer { background-color: #000;
filter: alpha(opacity=50);
opacity: 0.5;
max-height: 200px;
}.imgareaselect-selection { } |
|
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
|
<div class="right-container set">
<div class="">
<div class="box02">
<div class="imageBox">
<img id="avatar" src="../Content/images/preview.png"/>
<!-- <div class="spinner" style="display: none">Loading...</div>-->
</div>
<form id="crop_form" method="post" action=".">
<!--通过生成尺寸 后台获取尺寸再进行裁剪-->
<input id="id_top" type="hidden" name="top" >
<input id="id_left" type="hidden" name="left">
<input id="id_right" type="hidden" name="right">
<input id="id_bottom" type="hidden" name="bottom">
<input id="id_width" type="hidden" />
<input id="id_height" type="hidden" />
</form>
<div class="action">
<div class="new-contentarea tc"> <a href="javascript:void(0)" class="upload-img">
<label for="upload-file">上传</label>
</a>
<input type="file" class="" name="upload-file" id="upload-file" />
</div>
<input type="button" id="btnCrop" class="Btnsty_peyton" value="保存">
<div class="imgIntro">你可以上传JPG、JPEG、PNG格式文件，限制大小1M以内</div>
</div>
<div class="cropped" >
<ul>
<li >
<span>100*100</span>
<span class="img01" id="small_preview01"><img src="../Content/images/preview.png" id="avatar1" style="margin-left: -50px;width: 200px;"/></span>
</li>
<li >
<span>55*55</span>
<span class="img02" id="small_preview02"><img src="../Content/images/preview.png" id="avatar2" style="margin-left: -25px;width: 110px;"/></span>
</li>
<li>
<span>32*32</span>
<span class="img03" id="small_preview03"><img src="../Content/images/preview.png" id="avatar3" style="margin-left: -15px;width: 64px;"/></span>
</li>
</ul>
</div>
</div>
|
效果如下，demo见附件：
