-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage.html
36 lines (36 loc) · 1.43 KB
/
page.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Image Optimizer</title>
</head>
<body>
<a href="https://github.com/lucasromerodb/image-optimizer-using-sharp">GitHub repo</a>
<h1>Image optimizer</h1>
<form id="form" action="/api/optimized" enctype="multipart/form-data" method="post">
<input type="file" id="file" name="file" title="Select image" accept="image/*" onchange="showPreview(event)" />
<br /><br />
<button type="submit">🌈 Get optimized image</button>
</form>
<h2>Preview before optimization</h2>
<p id="fileInfo"></p>
<img id="filePreview" alt="preview" />
<script>
const formatFileSize = function (bytes) {
const sufixes = ["B", "kB", "MB", "GB", "TB"];
const i = Math.floor(Math.log(bytes) / Math.log(1024));
return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sufixes[i]}`;
};
const showPreview = (event) => {
const preview = document.getElementById("filePreview");
const fileInfo = document.getElementById("fileInfo");
preview.src = URL.createObjectURL(event.target.files[0]);
fileInfo.innerHTML = "File size: " + formatFileSize(event.target.files[0].size);
preview.onload = function () {
URL.revokeObjectURL(preview.src); // free memory
};
};
</script>
</body>
</html>