-
Notifications
You must be signed in to change notification settings - Fork 196
/
demo.js
135 lines (98 loc) · 3.85 KB
/
demo.js
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
$(function() {
//Console logging (html)
if (!window.console)
console = {};
var console_out = document.getElementById('console_out');
console.log = function(message) {
console_out.innerHTML += message + '<br />';
console_out.scrollTop = console_out.scrollHeight;
}
//Slider init
$("#slider-range-min").slider({
range: "min",
value: 30,
min: 1,
max: 100,
slide: function(event, ui) {
$("#jpeg_encode_quality").val(ui.value);
}
});
$("#jpeg_encode_quality").val($("#slider-range-min").slider("value"));
/** DRAG AND DROP STUFF WITH FILE API **/
var holder = document.getElementById('holder');
holder.ondragover = function() {
this.className = 'is_hover';
return false;
};
holder.ondragend = function() {
this.className = '';
return false;
};
holder.ondrop = function(e) {
this.className = '';
e.preventDefault();
document.getElementById("holder_helper").removeChild(document.getElementById("holder_helper_title"));
var file = e.dataTransfer.files[0],
reader = new FileReader();
reader.onload = function(event) {
var i = document.getElementById("source_image");
i.src = event.target.result;
i.onload = function(){
image_width=$(i).width(),
image_height=$(i).height();
if(image_width > image_height){
i.style.width="320px";
}else{
i.style.height="300px";
}
i.style.display = "block";
console.log("Image loaded");
}
};
console.log("Filename:" + file.name);
console.log("Filesize:" + (parseInt(file.size) / 1024) + " Kb");
console.log("Type:" + file.type);
reader.readAsDataURL(file);
return false;
};
var encodeButton = document.getElementById('jpeg_encode_button');
var encodeQuality = document.getElementById('jpeg_encode_quality');
//HANDLE COMPRESS BUTTON
encodeButton.addEventListener('click', function(e) {
var source_image = document.getElementById('source_image');
var result_image = document.getElementById('result_image');
if (source_image.src == "") {
alert("You must load an image first!");
return false;
}
var quality = parseFloat(encodeQuality.value / 100);
console.log("Quality >>" + quality);
console.log("process start...");
var time_start = new Date().getTime();
result_image.src = jic.compress(source_image,quality).src;
result_image.onload = function(){
var image_width=$(result_image).width(),
image_height=$(result_image).height();
if(image_width > image_height){
result_image.style.width="320px";
}else{
result_image.style.height="300px";
}
result_image.style.display = "block";
}
var duration = new Date().getTime() - time_start;
console.log("process finished...");
console.log('Processed in: ' + duration + 'ms');
}, false);
//HANDLE UPLOAD BUTTON
var uploadButton = document.getElementById("jpeg_upload_button");
uploadButton.addEventListener('click', function(e) {
var result_image = document.getElementById('result_image');
if (result_image.src == "") {
alert("You must load an image and compress it first!");
return false;
}
jic.upload(result_image, 'upload.php', 'file', 'new.jpg');
}, false);
/*** END OF DRAG & DROP STUFF WITH FILE API **/
});