-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
106 lines (86 loc) · 3.66 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
<!doctype>
<html ng-app>
<head>
<meta charset="utf-8" />
<title> lightness </title>
<script src="http://code.jquery.com/jquery-1.8.2.min.js" language="javascript" charset="utf-8" ></script>
<script src="lib/tinycolor-min.js" type="text/javascript" language="javascript" charset="utf-8" ></script>
<script src="lightness.js" type="text/javascript" language="javascript" charset="utf-8" ></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script type="text/javascript" charset="utf-8">
function DemoCtrl($scope) {
$scope.greyscale = false;
$scope.cols = 3;
$scope.rows = 3;
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
//this should be in a directive but since this is just a demo
var update = function(image,canvas,cols,rows,greyscale) {
var start = new Date();
var data = lightness(image,cols,rows);
var time = new Date() - start;
//lighest and darkest
var darkest = data[0];
var lightest = data[0];
for (var i=0; i<data.length; i++) {
if (data[i].hsl.l > lightest.hsl.l) {
lightest = data[i];
}
if (data[i].hsl.l < darkest.hsl.l) {
darkest = data[i];
}
}
var block_width = Math.ceil(image.width/cols);
var block_height = Math.ceil(image.height/rows);
var ctx = canvas.getContext('2d');
for (var i=0; i<data.length; i++) {
var c = data[i].color;
if (greyscale) {
ctx.fillStyle = tinycolor.greyscale(c).toRgbString();
} else {
ctx.fillStyle = c.toRgbString();
}
var x = (i % cols)* block_width;
var y = Math.floor(i/cols) * block_height;
ctx.fillRect(x,y,block_width,block_height);
//text
if (data[i] === darkest) {
ctx.fillStyle = '#fff';
ctx.fillText('darkest' ,x+block_width*0.1,y+block_height/2);
} else if (data[i] === lightest) {
ctx.fillStyle = '#000';
ctx.fillText('lightest',x+block_width*0.1,y+block_height/2);
}
}
return time;
}
//wait for image to load
$(image).load(function(){
canvas.width = image.width;
canvas.height = image.height;
$scope.time = update(image,canvas,$scope.cols,$scope.rows,$scope.greyscale);
$scope.$apply();
});
//watch for changes of
var updateOnChange = function(val,old) {
if (angular.isDefined(val)) {
$scope.time = update(image,canvas,$scope.cols,$scope.rows,$scope.greyscale);
};
};
$scope.$watch('cols',updateOnChange);
$scope.$watch('rows',updateOnChange);
$scope.$watch('greyscale',updateOnChange);
}
</script>
</head>
<body ng-controller="DemoCtrl">
<div
<h1>lightness</h1>
Columns <input type="number" ng-model="cols" /><br/>
Rows <input type="number" ng-model="rows" /><br/>
Greyscale <input type="checkbox" ng-model="greyscale" /><br/>
{{time}}ms to calculate <br/>
<canvas id="canvas" width="640" height="853"></canvas>
<img id="image" src="images/tree.jpg" />
</body>
</html>