Neler yeni

Resim Ölçeklendirme (Javascript) // Ücretsiz Kod

Ad
F****
Soyad
U***
Katılım
17 Ağustos 2023
Konum
Ankara
Konular
31
Mesajlar
34
Ticaret - 0%
0   0   0
  
iletişim
Meslek
Grafik Tasarım
1174391112.png



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>
 

Tema özelleştirme sistemi

Bu menüden forum temasının bazı alanlarını kendinize özel olarak düzenleye bilirsiniz.

Zevkine göre renk kombinasyonunu belirle

Gece/Gündüz modunu seç

Gece ve gündüz modlarından tarzınıza yada ihtiyaçlarınıza uygun olanı seçerek kullana bilirsiniz.

Tam ekran yada dar ekran

Temanızın gövde büyüklüğünü sevkiniz, ihtiyacınıza göre dar yada geniş olarak kulana bilirsiniz.

Izgara yada normal mod

Temanızda forum listeleme yapısını ızgara yapısında yada normal yapıda listemek için kullanabilirsiniz.

Forum arkaplan resimleri

Forum arkaplanlarına eklenmiş olan resimlerinin kontrolü senin elinde, resimleri aç/kapat

Sidebar blogunu kapat/aç

Forumun kalabalığında kurtulmak için sidebar (kenar çubuğunu) açıp/kapatarak gereksiz kalabalıklardan kurtula bilirsiniz.

Yapışkan sidebar kapat/aç

Yapışkan sidebar ile sidebar alanını daha hızlı ve verimli kullanabilirsiniz.

Radius aç/kapat

Blok köşelerinde bulunan kıvrımları kapat/aç bu şekilde tarzını yansıt.