-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
108 lines (96 loc) · 4.56 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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/svg" href="https://icons.getbootstrap.com/assets/icons/code-slash.svg">
<title>Image Upload and Resize</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="">
<meta property="og:type" content="website">
<meta property="og:title" content="Image Size Reducer">
<meta property="og:description" content="Reduce the size of your image.">
<meta property="og:image" content="https://icons.getbootstrap.com/assets/icons/code-slash.svg">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="">
<meta name="twitter:title" content="Image Size Reducer">
<meta name="twitter:description" content="Reduce the size of your image.">
<meta name="twitter:image" content="https://icons.getbootstrap.com/assets/icons/code-slash.svg">
<style>
#image-container {
max-width: 100%;
}
</style>
</head>
<body>
<div class="container my-5">
<h1 class="mb-4">Upload and Resize Image</h1>
<form id="uploadForm">
<div class="mb-3">
<input type="file" name="image" id="imageInput" class="form-control" required>
</div>
<div class="mb-3">
<label for="quality" class="form-label">Quality: <span id="qualityValue">80</span>%</label>
<input type="range" name="quality" id="quality" class="form-range" min="1" max="100" value="80">
</div>
<div class="mb-3">
<label for="format" class="form-label">Format:</label>
<select name="format" id="format" class="form-select" required>
<option value="jpeg">JPEG</option>
<option value="webp">WEBP</option>
</select>
</div>
<button type="submit" class="btn w-100 fw-medium btn-primary">Upload Image</button>
</form>
<div id="result" class="mt-4 d-none">
<h2>Resized Image</h2>
<p><strong>Original Size:</strong> <span id="originalSize"></span></p>
<p><strong>New Size:</strong> <span id="newSize"></span></p>
<p><strong>Original Dimensions:</strong> <span id="originalDimensions"></span></p>
<img id="resultImage" src="" class="w-100 rounded">
<a id="downloadLink" href="" download="resized_image.jpg" class="btn w-100 fw-medium btn-success mt-2">Download Image</a>
</div>
</div>
<script>
document.getElementById('quality').addEventListener('input', function() {
document.getElementById('qualityValue').textContent = this.value;
});
document.getElementById('uploadForm').addEventListener('submit', function(e) {
e.preventDefault();
var fileInput = document.getElementById('imageInput');
var quality = document.getElementById('quality').value;
var format = document.getElementById('format').value;
var file = fileInput.files[0];
if (!file) {
alert('Please select an image file.');
return;
}
var reader = new FileReader();
reader.onload = function(event) {
var img = new Image();
img.onload = function() {
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
// Set canvas dimensions to the original image dimensions
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
var imageDataUrl = canvas.toDataURL('image/' + format, quality / 100);
var newSize = (imageDataUrl.length * 3 / 4) / (1024 * 1024); // MB
document.getElementById('resultImage').src = imageDataUrl;
document.getElementById('downloadLink').href = imageDataUrl;
document.getElementById('downloadLink').download = 'resized_image.' + format;
document.getElementById('originalSize').textContent = (file.size / (1024 * 1024)).toFixed(2) + ' MB';
document.getElementById('newSize').textContent = newSize.toFixed(2) + ' MB';
document.getElementById('originalDimensions').textContent = img.width + ' x ' + img.height;
document.getElementById('result').classList.remove('d-none');
};
img.src = event.target.result;
};
reader.readAsDataURL(file);
});
</script>
</body>
</html>