-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathscript.js
More file actions
122 lines (98 loc) · 3.7 KB
/
script.js
File metadata and controls
122 lines (98 loc) · 3.7 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
/* global describe skeletonization url2img */
var WIDTH = 256;
var HEIGHT = 256;
var stockIdx = 0;
var demo = document.getElementById("demo");
var stock = [
{url:"https://cdn.glitch.com/51dda229-d755-451b-a499-79a1285996fa%2Fhorse.jpg?1550457913227", args:{invert:true, blur:5, threshold:132}},
{url:"https://cdn.glitch.com/51dda229-d755-451b-a499-79a1285996fa%2Fhanzi.jpg?1550462271316", args:{invert:false, blur:5, threshold:90}},
{url:"https://cdn.glitch.com/51dda229-d755-451b-a499-79a1285996fa%2Fcmuscs.jpg?1550464003459", args:{invert:true, blur:3, threshold:100}},
{url:"https://cdn.glitch.com/51dda229-d755-451b-a499-79a1285996fa%2Fopencv.jpg?1550463543394", args:{invert:true, blur:1, threshold:10}},
{url:"https://cdn.glitch.com/51dda229-d755-451b-a499-79a1285996fa%2Ffence.jpg?1550465936397", args:{invert:false, blur:2, threshold:80}},
{url:"https://cdn.glitch.com/51dda229-d755-451b-a499-79a1285996fa%2Fmanuscript.jpg?1550466540959", args:{invert:true, blur:0, threshold:110}},
]
function loadStock(i){
var c = stock[i];
// inp.value = c.url;
inparg.value = JSON.stringify(c.args);
processImageFromUrl(c.url,c.args);
}
function loadReadme(){
var client = new XMLHttpRequest();
client.open('GET', 'README.md');
client.onreadystatechange = function() {
if (client.readyState == 4 && client.status == "200") {
var converter = new showdown.Converter();
var text = client.responseText.toString();
var html = converter.makeHtml(text)//.replace("skeletonization.js","README");
document.getElementById("readme").innerHTML = html;
}
}
client.send();
}
loadReadme();
var inpdiv = document.createElement("div");
inpdiv.innerHTML += "Upload Image: ";
var inp = document.createElement("input");
inp.type = "file";
inp.addEventListener('change', function(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
canv0.getContext("2d").drawImage(img, 0, 0, WIDTH, HEIGHT);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}, false);
inpdiv.appendChild(inp);
var procbtn = document.createElement("button");
procbtn.innerHTML = "Skeletonize!";
procbtn.onclick = function(){attemptSkeletonization(JSON.parse(inparg.value));};
inpdiv.appendChild(procbtn);
var randbtn = document.createElement("button");
randbtn.innerHTML = "Random Image";
randbtn.onclick = function(){stockIdx++;loadStock(stockIdx%stock.length)};
inpdiv.appendChild(randbtn);
var inpargdiv = document.createElement("div");
inpargdiv.innerHTML += "Settings: ";
var inparg = document.createElement("input");
inparg.type = "text";
inparg.style.width = "445px";
inparg.value = "{}";
inpargdiv.appendChild(inparg);
var statusdiv = document.createElement("div");
statusdiv.innerHTML += "[STATUS] Loading...";
demo.appendChild(inpdiv);
demo.appendChild(inpargdiv);
var canv0 = document.createElement("canvas");
canv0.width = WIDTH;
canv0.height = HEIGHT;
canv0.id = "canv0";
demo.appendChild(canv0);
var canv1 = document.createElement("canvas");
canv1.id = "canv1";
canv1.width = WIDTH;
canv1.height = HEIGHT;
demo.appendChild(canv1);
demo.appendChild(statusdiv);
skeletonization.setup(256,256);
var attemptSkeletonization = function(args){
function f(){
var success = skeletonization.skeletonize(canv0.id,Object.assign({},{outputCanvasId:"canv1"},args));
if (success == -1){
setTimeout(f, 200);
}else{
statusdiv.innerHTML = "[STATUS] OK.";
}
}
f();
}
var processImageFromUrl = function (url,args) {
url2img(url,function(img){
canv0.getContext("2d").drawImage(img, 0, 0, WIDTH, HEIGHT);
attemptSkeletonization(args);
});
}
loadStock(0);