ikat-art/index.html at master · KinoLien/ikat-art · GitHub

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
<!DOCTYPE html>
<html lang="en-US">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<title>Ikat/ikkat art generator</title>
		<link rel="stylesheet" type="text/css" href="css/main.css">
		<script type="text/javascript" src="js/canvas-toBlob.js"></script>
		<script type="text/javascript" src="js/FileSaver.min.js"></script>
		<script type="text/javascript" src="js/main.js?v=2"></script>
 	</head>
 	<body>
 		<h2>Ikat/ikkat art generator</h2>
 		<div class="wrap">
 			<div class="wrap-origin">
 				<h3>Origin</h3>
 				<div class="image-wrap">
 					<img id="originImg" onload="onImageLoad(this);">
 				</div>
 			</div>
 			<div class="wrap-operation">
 				<br/>
 				<input id="fileinput" type="file" onchange="onFileChange(event);" accept="image/*" style="display: none;">
 				<button onclick="onChooseClick();">Choose</button>

 				<p>Unit</p>
 				<input id="unitNumber" type="number" min="1" value="2">
 				<select id="unit">
 					<option value="1">px</option>
 					<option value="0">%</option>
 				</select>

 				<p>Direction</p>
 				<select id="direction">
 					<option value="0">Vertical</option>
 					<option value="1">Horizontal</option>
 				</select>

 				<p>Scale Range(%)</p>
 				<div>
 					<input class="input-inline" type="number" id="scaleFrom" value="1" min="1" />
 					<input class="input-inline" type="number" id="scaleTo" value="6" min="1" />
 				</div>

 				<br/>
 				<button onclick="onGenerateClick();"> &gt;&gt; </button>

 				<br/><br/>
 				<button onclick="onGetResultClick();">Get File</button>
 			</div>
 			<div class="wrap-result">
 				<h3>Result</h3>
 				<div class="image-wrap">
 					<canvas id="resultCanvas"></canvas>
 				</div>
 			</div>
 		</div>
 		<!-- Global Site Tag (gtag.js) - Google Analytics -->
		<script async src="https://www.googletagmanager.com/gtag/js?id=UA-9111169-3"></script>
		<script>
			window.dataLayer = window.dataLayer || [];
			function gtag(){dataLayer.push(arguments)};
			gtag('js', new Date());

			gtag('config', 'UA-9111169-3');
		</script>

 	</body>
 </html>