index.html
5.5 KB
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
<!DOCTYPE html>
<html ng-app="myApp">
<head lang="en" >
<meta charset="UTF-8">
<title></title>
<link href="../spm_modules/bootstrap-css/1.0.0/bootstrap.css" rel="stylesheet">
<link rel="stylesheet/less" type="text/css" href="../spm_modules/xn-style-common/2.2.9/public/common.less" >
<link href="../directive/ng-img-crop.css" rel="stylesheet">
<link href="../demo/base.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>
<script type="text/javascript" src="../spm_modules/xn-angular/1.0.0/angular.js"></script>
<script type="text/javascript" src="../directive/ng-img-crop.js"></script>
<style>
.file-none{
width: 0;
height: 0;
overflow: hidden;
opacity: 0;
display: none;
}
.cropArea {
background: #E4E4E4;
overflow: hidden;
height:350px;
}
</style>
</head>
<body ng-controller="MyController">
<div class="xn-width auto clearfix">
<div class="xn-input-line clearfix ">
<span class="demo-title">Demo：</span>
</div>
<div class="xn-input-line clearfix">
<div class="xn-col-md-3 xn-text-right xn-lh">选择图片：</div>
<div class="xn-col-md-6"> <label class="btn btn-primary" for="fileInput">选择图片</label><input class="file-none f-left" type="file" id="fileInput" /></div>
</div>
<div class="xn-input-line clearfix">
<div class="xn-col-md-3 xn-text-right xn-lh">选择后图片：</div>
<div class="xn-col-md-13">
<div class="cropArea">
<img-crop image="myImage" result-image="myCroppedImage" area-type="square"></img-crop>
</div>
</div>
<div class="xn-col-md-3 xn-text-right xn-lh">剪切后的图：</div>
<div class="xn-col-md-5">
<img ng-src="{{myCroppedImage}}" />
</div>
</div>
<div class="xn-input-line clearfix ">
<span class="demo-title">Options：</span>
</div>
<div class="xn-input-line clearfix">
<img src="img/img-crop.jpg">
</div>
<div class="xn-input-line clearfix ">
<span class="demo-title">说明：</span>
</div>
<div class="xn-input-line clearfix">
<div class="demo-sub-title"><span>image</span></div>
<p class="demo-p"> 数据绑定到的可分配角度表达式。 NgImgCrop获取一个图像进行裁剪。</p>
<div class="demo-sub-title"><span>result-image</span></div>
<p class="demo-p"> 数据绑定到的可分配角度表达式。 NgImgCrop将裁剪后的图像的数据uri放入其中。</p>
<div class="demo-sub-title"><span>change-on-fly</span></div>
<p class="demo-p">可选的。默认情况下，为了减少CPU使用率，当用户拖动/调整裁剪区域的大小时，结果图像仅在用户停止拖动/调整大小后更新。设置为true可在用户拖动/调整裁剪区域时始终更新结果图像。</p>
<div class="demo-sub-title"><span>area-type</span></div>
<p class="demo-p">可选的。裁剪区域的类型。可能的值：circle | square。默认值：圆。</p>
<div class="demo-sub-title"><span>area-min-size</span></div>
<p class="demo-p">可选的。最小。裁剪区域的宽度/高度（以像素为单位）。默认值：80。</p>
<div class="demo-sub-title"><span>result-image-size</span></div>
<p class="demo-p"> 可选的。结果图片的宽度/高度（以像素为单位）。默认值：200。</p>
<div class="demo-sub-title"><span>result-image-format</span></div>
<p class="demo-p"> 可选的。结果图像的格式。可能的值包括image / jpeg，image / png和image / webp。浏览器支持不同。默认值：image / png。</p>
<div class="demo-sub-title"><span>result-image-quality</span></div>
<p class="demo-p"> 可选的。结果图像的质量。可能的值介于0.0和1.0之间（含）。默认值：浏览器默认值。</p>
<div class="demo-sub-title"><span>on-change</span></div>
<p class="demo-p">可选的。更改图像裁剪部分时评估的表达式。裁剪后的图像数据可用为$dataURI。</p>
<div class="demo-sub-title"><span>on-load-begin</span></div>
<p class="demo-p">可选的。用于评估源图像何时开始加载的表达式。</p>
<div class="demo-sub-title"><span>on-load-done</span></div>
<p class="demo-p">可选的。用于评估源图像何时成功加载的表达式。</p>
<div class="demo-sub-title"><span>on-load-error</span></div>
<p class="demo-p">可选的。用于评估源图像未加载的表达式。</p>
</div>
</div>
<script type="text/javascript">
angular.module("myApp", ["ngImgCrop"])
.controller("MyController", ["$scope", function($scope) {
$scope.myImage='';
$scope.myCroppedImage='';
var handleFileSelect=function(evt) {
var file=evt.currentTarget.files[0];
var reader = new FileReader();
reader.onload = function (evt) {
$scope.$apply(function($scope){
$scope.myImage=evt.target.result;
});
};
reader.readAsDataURL(file);
};
angular.element(document.querySelector('#fileInput')).on('change',handleFileSelect);
}]);
</script>
</body>
</html>