JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resim Boyutlandırma</title>
<style>
body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #ccc;}
h1 {text-align: center;padding: 20px;}
#upload-form {max-width: 500px;margin: 20px auto;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
label {display: block;margin-bottom: 8px;}
input[type="file"] {margin-bottom: 16px;display: none;}
.custom-file-upload {border: 1px solid #ccc;display: inline-block;padding: 6px 12px;cursor: pointer;border-radius: 4px;background-color: #007bff;color: #fff;transition: background-color 0.3s ease;}
.custom-file-upload:hover {background-color: #0056b3;}
button {display: block;margin: 0 auto;background-color: #007bff;color: #fff;border: none;padding: 10px 20px;border-radius: 4px;cursor: pointer;}
button:hover {background-color: #0056b3;}
#result {max-width: 500px;margin: 20px auto;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.download-link {display: inline-block;background-color: #007bff;color: #fff;border: none;padding: 10px 20px;border-radius: 4px;text-decoration: none;margin-top: 10px;cursor: pointer;transition: background-color 0.3s ease; width:92%;text-align:center;}
.download-link:hover {background-color: #0056b3;}
img {max-width: 100%;height: auto;margin-top: 20px;}
input[type="number"] {padding: 10px;border: 1px solid #ccc;border-radius: 4px;width: 100px;font-size: 14px;}
.info {margin-top: 20px;}
</style>
</head>
<body>
<center><form id="upload-form" enctype="multipart/form-data">
<label for="image" class="custom-file-upload">
Resim Seç
<input type="file" name="image" id="image" accept="image/*">
</label>
<label style="margin-top:15px;" for="scale">Ölçek (%):</label>
<input style="margin-bottom:15px;" type="number" id="scale" name="scale" min="1" max="200" value="50">
<button style="margin-top:15px;" type="button" onclick="resizeImage()">Yeniden Boyutlandır</button>
</form></center>
<div id="result"></div>
<script>
function resizeImage() {
const imageInput = document.getElementById('image');
const scaleInput = document.getElementById('scale');
const resultDiv = document.getElementById('result');
if (imageInput.files.length === 0) {
resultDiv.innerHTML = 'Please select an image.';
return;
}
const file = imageInput.files[0];
const scale = parseInt(scaleInput.value) / 100;
const reader = new FileReader();
reader.onload = function (event) {
const img = new Image();
img.src = event.target.result;
img.onload = function () {
const originalWidth = img.width;
const originalHeight = img.height;
const originalSizeKB = (file.size / 1024).toFixed(2);
const canvas = document.createElement('canvas');
const newWidth = img.width * scale;
const newHeight = img.height * scale;
canvas.width = newWidth;
canvas.height = newHeight;
const ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0, newWidth, newHeight);
const resizedDataURL = canvas.toDataURL(file.type);
const newSizeKB = (resizedDataURL.length / 1024).toFixed(2);
resultDiv.innerHTML = `
<a href="${resizedDataURL}" class="download-link" download="resized_image">Boyutlandırılmış Resmi İndir</a>
<img src="${resizedDataURL}" alt="Yeniden Ölçeklendirilen Resim"><br>
<br><strong>Orijinal Ölçüler:</strong> ${originalWidth} x ${originalHeight}<br>
<strong>Orijinal Boyut:</strong> ${originalSizeKB} KB<br><br>
<strong>Yeni Ölçüler:</strong> ${newWidth} x ${newHeight}<br>
<strong>Yeni Boyut:</strong> ${newSizeKB} KB
`;
};
};
reader.readAsDataURL(file);
}
</script>
</body>
</html>
