<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Imager Quality Decreaser</title>
<style>
.main{
border:2px solid;
margin:5px;
padding: 10px;
}
#output-image{
width:100%;
height:100%;
}
</style>
</head>
<body>
<div class="main">
<input type="file" id="inputImage" accept="image/*" onchange="displayImage()"><br>
<div id="image-container">
<br><img id="output-image" alt="Original Image"><br>
</div>
<div id="options-container">
<br><label>Value:
<input type="number" id="widthInput" value="300">
</label>
<button onclick="quality()">Submit</button><br><br>
<button onclick="downloadImage()">Download</button>
</div>
</div>
<script>
function displayImage() {
const inputImage = document.getElementById('inputImage');
const outputImage = document.getElementById('output-image');
outputImage.src = URL.createObjectURL(inputImage.files[0]);
}
function quality() {
const inputImage = document.getElementById('inputImage');
const outputImage = document.getElementById('output-image');
const widthInput = document.getElementById('widthInput');
const width = parseInt(widthInput.value);
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = URL.createObjectURL(inputImage.files[0]);
img.onload = function() {
canvas.width = width;
canvas.height = (width / img.width) * img.height;
ctx.drawImage(img, 0, 0, width, canvas.height);
// Convert canvas to data URL
const quality = canvas.toDataURL('image/jpeg');
// Display the resized image
outputImage.src = quality;
};
}
function downloadImage() {
const image = document.getElementById('output-image');
const link = document.createElement('a');
link.href = image.src;
link.download = 'resized_image.png';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
</script>
</body>
</html>