-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathdemo.html
149 lines (135 loc) · 3.23 KB
/
demo.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE html>
<html>
<head>
<title>Chobi Demo</title>
</head>
<style type="text/css">
.division{
padding: 2%;
}
.canvas-container{
display:inline-block;
border:1px solid black;
}
.header{
text-align: center;
}
#canvas{
width: 800px;
height: 500px;
}
</style>
<script type="text/javascript" src="src/Chobi.min.js"></script>
<script type="text/javascript">
//make global Chobi object
var imgObj = null,backupImg = null;
function loadFileToCanvas(){
//pass input type=file element to Chobi constructor
imgObj = new Chobi(document.getElementById("image-file"));
imgObj.ready(function(){
backupImg = imgObj.getImage();
imgObj.canvas = document.getElementById("canvas");
imgObj.loadImageToCanvas();
});
}
function loadUrlToCanvas(){
//pass image URL to Chobi constructor
imgObj = new Chobi("demo.jpg");
imgObj.ready(function(){
backupImg = imgObj.getImage();
imgObj.canvas = document.getElementById("canvas");
imgObj.loadImageToCanvas();
});
}
//0 -> Black and white
//1 -> sepia
//2 -> negative
//3 -> vintage
//4 -> crossprocess
//5 -> Brightness increase
//6 -> Brightness decrease
//7 -> Contrast increase
//8 -> Contrast decrease
//filter chaining is also possible, like imgObj.brightness(-5).sepia().negative();
function filter(id){
if(imgObj == null){
alert("Choose an image first!");
return;
}
if(id==0){
imgObj.blackAndWhite();
}
else if(id==1){
imgObj.sepia();
}
else if(id==2){
imgObj.negative();
}
else if(id==3){
imgObj.vintage();
}
else if(id==4){
imgObj.crossProcess();
}
else if(id==5){
imgObj.brightness(1);
}
else if(id==6){
imgObj.brightness(-1);
}
else if(id==7){
imgObj.contrast(1);
}
else if(id==8){
imgObj.contrast(-1);
}
imgObj.loadImageToCanvas();
}
function download(){
if(imgObj == null){
alert("Choose an image first!");
return;
}
imgObj.download("my-manipulated-image");
}
function reset(){
imgObj = new Chobi(backupImg);
imgObj.ready(function(){
this.canvas = document.getElementById("canvas");
this.loadImageToCanvas();
});
}
</script>
<body>
<h1 class="header">Chobi Demo</h1>
<hr/>
<div class="division">
<h1>Load Image From File</h1>
<input type="file" id="image-file" onchange="loadFileToCanvas()">
</div>
<hr/>
<div class="division">
<h1>Load Image From URL (demo.jpg)</h1>
<button onclick="loadUrlToCanvas()">Load Image</button>
</div>
<hr/>
<div class="division">
<h2>Filters are applied on top of one another. Reselect the image to start from beginning or press the reset button</h2>
<button onclick="reset()">Reset</button>
<button onclick="filter(0)">Black and White</button>
<button onclick="filter(1)">Sepia</button>
<button onclick="filter(2)">Negative</button>
<button onclick="filter(3)">Vintage</button>
<button onclick="filter(4)">Cross Process</button>
<button onclick="filter(5)">Brightness +1</button>
<button onclick="filter(6)">Brightness -1</button>
<button onclick="filter(7)">Contrast +1</button>
<button onclick="filter(8)">Contrast -1</button>
<hr/>
<button onclick="download()">Download</button>
</div>
<div class="canvas-container">
<canvas width="800" height="500" id="canvas"></canvas>
</div>
</body>
</html>