-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathimgFrm.html
38 lines (38 loc) · 1.71 KB
/
imgFrm.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
<!-- imgFrm.html -->
<!-- simple HTML framework using img tag -->
<!DOCTYPE html><html lang="en">
<head>
<meta charset="utf8">
<title>imgFrm.html</title>
</head>
<body>
<form id="imgFrm">
<label>Image path:<input type="text" id="imgPath"></label>
<input type="button" value="Load" id="imgInputB">
<input type="button" value="Run" id="imgRunB">
<p id="imgFrmSize">Image size:</p>
<br><img src="./defaultImg.png" alt="IMAGE" id="_IMAGE">
</form>
<script type="text/javascript">
//function that loads a given image file by file path, and shows this image
(function(){
var slf=window,
pth=slf.document.getElementById('imgPath'),
IMG=slf.document.getElementById('_IMAGE'),
B=slf.document.getElementById('imgInputB'),
size=slf.document.getElementById('imgFrmSize'),
_INPUT=function(){
IMG.src=(/^[/.:_\-a-zA-Z0-9]+(?:\.png|\.gif|\.jpg|\.jpeg|\.bmp|\.svg)$/.test(pth.value))?pth.value:'./defaultImg.png';
size.innerHTML='Image size:'+IMG.width+'x'+IMG.height+' px';
};
size.innerHTML='Image size:400x400 px';
B.addEventListener('click',_INPUT,true);
}());
</script>
</body>
</html>
<!-- /*imgFrm.html*/ -->
<!-- /* Copyright (c) 2017 Yuji SODE <yuji.sode@gmail.com>*/ -->
<!-- /* This software is released under the MIT License.*/ -->
<!-- /* See LICENSE or http://opensource.org/licenses/mit-license.php*/ -->
<!-- /*simple HTML framework using img tag*/ -->