Bugün için son kod paylaşımımı da yapıyorum arkadaşlar. Resimleri istediğiniz ölçeğe göre küçültüp veya büyütebileceğiniz bir script oldu. İsteyen, istediği gibi değiştirerek kullanabilir.
Paylaştığım Diğer Hazır Kodlar; Süper Lig Puan Durumu (PHP) Son Deprem Verileri (PHP) Javascript ile Klavye Hız Testi Javascript ile Vücut Kitle İndeksi Hesaplama Javascript ile Kredi Hesaplama Link Kısaltma Servisi (PHP) Döviz Kurları Çevirici (PHP) Resim Ölçeklendirme (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>