-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbw.html
57 lines (57 loc) · 1.35 KB
/
bw.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</style>
</head>
<body>
<input type="range" min="1" max="100" value="50" class="slider" id="vs" onchange="g()">
<p>
<input type="file" id="fr" name="filename">
</p>
<canvas id="dc" width=256 height=256 style="width:90vmin;height:90vmin;margin:0"></canvas>
<script>
var data;
var img;
var ctxt;
function handleFileSelect(evt) {
var files = evt.target.files
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader()
reader.onload = (function(theFile) {
return function(e) {
getInfo(e.target.result)
}
})(f)
reader.readAsDataURL(f)
}
}
function getInfo(pic) {
ctxt = dc.getContext('2d');
img = new Image;
img.src = pic;
img.style.width=dc.width;
img.onload = function() {
ctxt.drawImage(img, 0, 0,dc.width,dc.width*img.height/img.width);
data = ctxt.getImageData(0, 0, dc.width, dc.height).data;
g();
}
}
function g()
{
if(!data)return;
ctxt.clearRect(0,0,dc.width,dc.height);
for(i=0;i<dc.width;i++)
{
for(j=0;j<dc.height;j++)
{
if(data[j*dc.width*4+i*4]+data[j*dc.width*4+i*4+1]+data[j*dc.width*4+i*4+2]<vs.value*3*2.56)
ctxt.fillRect(i,j,1,1);
}
}
}
document.getElementById('fr').addEventListener('change',handleFileSelect,false)
</script>
</body>
</html>