-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
93 lines (84 loc) · 6.08 KB
/
index.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
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
<!DOCTYPE html>
<html lang='en' class='notranslate' translate='no'>
<head>
<meta name='google' content='notranslate' />
<meta charset='UTF-8'>
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta name='description' content='Generic web application which resizes an image via canvas element.'>
<meta name='keywords' content='JavaScript,CSS,Bootstrap,HTML,Image,Resize,Canvas'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name='viewport' content='width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' />
<meta http-equiv='X-UA-Compatible' content='IE=Edge,chrome=1' />
<meta http-equiv='Content-Language' content='en' />
<title>Image Resizer | Preserves Aspect Ratio with Canvas</title>
<meta name='msapplication-TileColor' content='#ffffff' />
<meta name='theme-color' content='#ffffff' />
<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent' />
<meta name='apple-mobile-web-app-capable' content='yes' />
<meta name='mobile-web-app-capable' content='yes' />
<meta name='HandheldFriendly' content='True' />
<meta name='MobileOptimized' content='320' />
<meta http-equiv='Content-Security-Policy' content='upgrade-insecure-requests' />
<link href='css/bootstrap-4.5.2.min.css' rel='stylesheet' type='text/css' />
<link href='css/offcanvas.css' rel='stylesheet' type='text/css' />
<link href='css/custom.css' rel='stylesheet' type='text/css' />
<link rel='icon' href='img/favicon-16x16.png' type='image/x-icon'>
</head>
<body class='noselect'>
<noscript>You need to enable JavaScript to run this app.</noscript>
<p id="copyrightBanner">© Copyright <span id="yearDisplay"></span> | Created by <a href="https://medium.com/@geek-cc" target="_blank">the Girl with a ribbon</a> ξ(🎀˶❛◡❛) | ⧉ Image Resizer — Browser Utility Tool | ☁🚫 Works Offline</p>
<div class='container-fluid'>
<div class='row'>
<div class='col-sm-4 col-12'>
<div class="card rounded-0 h-100">
<div class="card-header p-1"><button id='uploadFileBtn' class='btn btn-sm btn-light border-primary text-primary rounded-0 m-0 pt-0 pb-0 pl-1 pr-1'>📂 <small>Upload Image…</small><input id='uploadFile' type='file' accept='image/*' /></button>
</div>
<div class="card-body p-1">
<table class='table table-bordered table-condensed w-100 small mb-0 text-left'>
<tr>
<th width='70%'><small class='lead small'><strong>Name</strong></small></th>
<td id='fileName' class='small'></td>
</tr>
<tr>
<th><small class='lead small'><strong>Last Modified</strong></small></th>
<td id='lastModified' class='small'></td>
</tr>
<tr>
<th><small class='lead small'><strong>Size</strong></small></th>
<td id='fileSize' class='small'></td>
</tr>
<tr>
<th><small class='lead small'><strong>Original Dimensions</strong></small> <small class='text-muted'>Width <strong>×</strong> Height</small></th>
<td id='imgDimensions' class='small'></td>
</tr>
<tr>
<th><small class='lead small'><strong>Type</strong></small></th>
<td id='fileType' class='small'></td>
</tr>
</table>
<hr>
<big><u><div class='custom-card-title'>📝 Guidelines to Resize Image 🖼</div></u></big>
<div class='custom-card-title'>❶ Upload an image file by selecting: </div>❝📂 <small class='text-primary'>Upload Image…</small>❞
<div class='custom-card-title'>❷ Proceed to specify preferred dimensions: </div><small><mark>Note: Image's original aspect ratio is preserved.</mark></small>
<div class='custom-card-title'>❸ Finally, save <strong>⛶</strong> resized image by selecting: </div>❝<small class='text-primary'>💾 Save Resized Image…</small>❞
</div>
</div>
</div>
<div class='col-sm-8 col-12'>
<div class="card rounded-0 h-100">
<div class="card-header p-1">📏 <span class='small'><small class='text-primary'>Width</small><input id='resizedImgW' type='number' step='1' class='rounded-0 border border-primary text-primary ml-1 mr-1 mb-0 mt-0' /><small class='text-primary'>px</small> <strong class='text-primary'>×</strong> <small class='text-primary'>Height</small><input id='resizedImgH' type='number' step='1' class='rounded-0 border border-primary text-primary ml-1 mr-1 mb-0 mt-0' /><small class='text-primary'>px</small></span> <button id='saveImageBtn' type='button' class='btn btn-sm btn-light border-primary text-primary rounded-0 m-0 pt-0 pb-0 pl-1 pr-1 float-right'><small>💾 Save Resized Image…</small></button></div>
<div class="card-body p-0">
<div id='previewUploadedImage' class='previewedImage p-0 w-100'></div>
</div>
</div>
</div>
</div>
</div>
<script src='js/polyfill.js'></script>
<script src='js/ie10-viewport-bug-workaround.js'></script>
<script src='js/bootstrap-native-v4.js'></script>
<script src='js/main.js'></script>
</body>
</html>