-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
113 lines (103 loc) · 4.24 KB
/
index.html
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
<!doctype html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>angular-image-crop</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.11/angular.min.js"></script>
<script src="image-crop.js"></script>
<link rel="stylesheet" href="image-crop-styles.css">
<script>
var myApp = null;
(function() {
angular.module('myApp', ['ImageCropper'])
.controller('MainController', ['$scope', function($scope) {
$scope.fileChanged = function(e) {
var files = e.target.files;
var fileReader = new FileReader();
fileReader.readAsDataURL(files[0]);
fileReader.onload = function(e) {
$scope.imgSrc = this.result;
$scope.$apply();
};
}
$scope.clear = function() {
$scope.imageCropStep = 1;
delete $scope.imgSrc;
delete $scope.result;
delete $scope.resultBlob;
$element.find('#fileInput')[0].value = "";
};
$scope.save = function() {
if (!!$scope.result) {
var result = {};
result['image'] = $scope.result;
var fd = new FormData();
fd.append("image", $scope.resultBlob);
var oReq = new XMLHttpRequest();
oReq.open("POST", "/profile/logo");
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
$scope.avatar = $scope.result;
console.dir('上传图片成功啦！');
} else {
console.dir('更新头像失败');
}
};
oReq.send(fd);
} else {
console.dir('请剪切图片后上传');
}
};
}]);
})();
</script>
<body>
<div ng-controller="MainController" style="text-align: center;">
<div id="uploader-img-crop" class="text-center">
<!-- 上传并预览裁剪图片 -->
<div class="uploader-img-previous">
<image-crop
data-height="200"
data-width="200"
data-shape="square"
data-step="imageCropStep"
src="imgSrc"
data-result="result"
data-result-blob="resultBlob"
crop="initCrop"
padding="250"
max-size="1024"></image-crop>
</div>
<!-- 裁剪后图片 -->
<ul class="uploader-img-crop-result" ng-show="imageCropStep == 3">
<li class="uploader-img-result">
<img ng-src="{{ imgSrc }}"/>
<p>64px*64px</p>
</li>
<li class="uploader-img-result">
<img ng-src="{{ imgSrc }}"/>
<p>128px*128px</p>
</li>
<li class="uploader-img-result">
<img ng-src="{{ imgSrc }}"/>
<p>180px*180px</p>
</li>
</ul>
<!-- 操作按钮 -->
<div class="uploader-img-tool">
<br/>
<div class="btn btn-upload btn-info">
<span>上传图像</span>
<input type="file" name="fileInput" id="fileInput" onchange="angular.element(this).scope().fileChanged(event)" />
</div>
<button class="btn btn-info" ng-click="initCrop = true">剪切</button>
<button class="btn btn-info" ng-click="save()">确定</button>
<button class="btn btn-default" ng-click="clear()">取消</button>
</div>
</div>
</div>
</body>
</head>
</html>