{"id":12014,"date":"2025-11-05T21:30:19","date_gmt":"2025-11-06T00:30:19","guid":{"rendered":"https:\/\/collage.com.ar\/?page_id=12014"},"modified":"2025-11-06T20:27:06","modified_gmt":"2025-11-06T23:27:06","slug":"recortar-imagenes","status":"publish","type":"page","link":"https:\/\/collage.com.ar\/index.php\/recortar-imagenes\/","title":{"rendered":"Recortar Im\u00e1genes"},"content":{"rendered":"\n<!-- Estilos para la nueva interfaz visual -->\n<style>\n    .compressor-container {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        background-color: #2c3e50; \/* Fondo azul oscuro *\/\n        color: #ecf0f1; \/* Texto casi blanco *\/\n        padding: 25px;\n        border-radius: 12px;\n        max-width: 500px;\n        box-shadow: 0 4px 15px rgba(0,0,0,0.2);\n    }\n\n    .compressor-container h3 {\n        text-align: center;\n        margin-top: 0;\n        margin-bottom: 25px;\n        font-weight: 600;\n        letter-spacing: 0.5px;\n    }\n\n    \/* Ocultamos el input de archivo por defecto *\/\n    #file-input {\n        display: none;\n    }\n\n    \/* Estilo para el bot\u00f3n falso que activa el input *\/\n    .file-upload-label {\n        display: block;\n        background-color: #34495e; \/* Gris azulado para el fondo de la tarjeta *\/\n        padding: 20px;\n        border-radius: 8px;\n        text-align: center;\n        cursor: pointer;\n        transition: background-color 0.3s;\n        margin-bottom: 15px;\n    }\n    .file-upload-label:hover {\n        background-color: #4a627a; \/* Un poco m\u00e1s claro al pasar el mouse *\/\n    }\n    .file-upload-label span {\n        display: block;\n        font-size: 1.1em;\n        font-weight: 500;\n    }\n    #file-name-display {\n        text-align: center;\n        font-size: 0.9em;\n        color: #95a5a6; \/* Gris claro para el nombre del archivo *\/\n        margin-top: -10px;\n        margin-bottom: 20px;\n        min-height: 1.2em;\n    }\n\n    #image-info {\n        background-color: #34495e;\n        padding: 15px;\n        border-radius: 8px;\n        margin-bottom: 20px;\n    }\n    #image-info p {\n        margin: 5px 0;\n    }\n\n    #controls label {\n        display: block;\n        margin-bottom: 8px;\n        font-weight: 500;\n    }\n    \n    #controls input[type=\"number\"] {\n        width: 100%;\n        padding: 12px;\n        border: 2px solid #4a627a;\n        background-color: #2c3e50;\n        color: #ecf0f1;\n        border-radius: 8px;\n        box-sizing: border-box;\n        font-size: 1.1em;\n        text-align: center;\n    }\n    \n    \/* Bot\u00f3n principal de acci\u00f3n *\/\n    #compress-button {\n        display: block;\n        width: 100%;\n        background-color: #3498db; \/* Azul brillante *\/\n        color: white;\n        border: none;\n        padding: 15px;\n        border-radius: 8px;\n        cursor: pointer;\n        font-size: 1.2em;\n        font-weight: bold;\n        margin-top: 20px;\n        transition: background-color 0.3s;\n    }\n    #compress-button:hover {\n        background-color: #2980b9; \/* Azul m\u00e1s oscuro al pasar el mouse *\/\n    }\n\n    #status {\n        margin-top: 15px;\n        font-weight: bold;\n        text-align: center;\n        min-height: 1.2em;\n    }\n<\/style>\n\n<div class=\"compressor-container\">\n    <h3>HERRAMIENTA DE COMPRESI\u00d3N<\/h3>\n\n    <!-- Bot\u00f3n personalizado para seleccionar archivo -->\n    <label for=\"file-input\" class=\"file-upload-label\">\n        <span>Paso 1: Seleccionar Fotograf\u00eda<\/span>\n    <\/label>\n    <input type=\"file\" id=\"file-input\" accept=\"image\/jpeg, image\/png\">\n    <p id=\"file-name-display\"><\/p>\n\n    <!-- Informaci\u00f3n de la imagen (inicialmente oculto) -->\n    <div id=\"image-info\" style=\"display:none;\">\n        <p id=\"original-size\"><\/p>\n        <p id=\"original-dimensions\"><\/p>\n    <\/div>\n\n    <!-- Controles para el nuevo peso (inicialmente oculto) -->\n    <div id=\"controls\" style=\"display:none;\">\n        <label for=\"target-size-kb\">Paso 2: Indica el peso m\u00e1ximo (en KB)<\/label>\n        <input type=\"number\" id=\"target-size-kb\" placeholder=\"Ej: 500\">\n        <button id=\"compress-button\">Bajar Peso y Descargar<\/button>\n    <\/div>\n\n    <!-- Mensajes de estado -->\n    <div id=\"status\"><\/div>\n<\/div>\n\n<script>\n    \/\/ Se seleccionan los nuevos elementos por su ID\n    const fileInput = document.getElementById('file-input');\n    const fileNameDisplay = document.getElementById('file-name-display');\n    const imageInfoDiv = document.getElementById('image-info');\n    const controlsDiv = document.getElementById('controls');\n    const originalSizeDisplay = document.getElementById('original-size');\n    const originalDimensionsDisplay = document.getElementById('original-dimensions');\n    const targetSizeInput = document.getElementById('target-size-kb');\n    const compressButton = document.getElementById('compress-button');\n    const statusDisplay = document.getElementById('status');\n\n    let currentFile = null;\n\n    fileInput.addEventListener('change', (event) => {\n        const file = event.target.files[0];\n        if (!file) {\n            fileNameDisplay.textContent = \"\";\n            return;\n        }\n        currentFile = file;\n\n        \/\/ Mostrar nombre de archivo\n        fileNameDisplay.textContent = `Archivo: ${file.name}`;\n        \n        \/\/ Mostrar datos de la imagen\n        originalSizeDisplay.textContent = `Peso original: ${(file.size \/ 1024).toFixed(2)} KB`;\n\n        const reader = new FileReader();\n        reader.onload = (e) => {\n            const img = new Image();\n            img.onload = () => {\n                originalDimensionsDisplay.textContent = `Dimensiones: ${img.width}x${img.height}`;\n                imageInfoDiv.style.display = 'block';\n                controlsDiv.style.display = 'block';\n                statusDisplay.textContent = \"\";\n            };\n            img.src = e.target.result;\n        };\n        reader.readAsDataURL(file);\n    });\n\n    compressButton.addEventListener('click', () => {\n        if (!currentFile || !targetSizeInput.value) {\n            statusDisplay.textContent = \"Por favor, selecciona una imagen y define un peso.\";\n            return;\n        }\n\n        const targetSize = parseInt(targetSizeInput.value) * 1024;\n        statusDisplay.textContent = \"Comprimiendo, por favor espera...\";\n\n        const reader = new FileReader();\n        reader.onload = (e) => {\n            const img = new Image();\n            img.onload = () => {\n                comprimirImagen(img, targetSize);\n            };\n            img.src = e.target.result;\n        };\n        reader.readAsDataURL(currentFile);\n    });\n    \n    function comprimirImagen(img, targetSizeInBytes) {\n        const canvas = document.createElement('canvas');\n        canvas.width = img.width;\n        canvas.height = img.height;\n        const ctx = canvas.getContext('2d');\n        ctx.drawImage(img, 0, 0);\n\n        let quality = 0.9;\n        \n        const tryCompress = (currentQuality) => {\n            canvas.toBlob((blob) => {\n                if (blob.size <= targetSizeInBytes || currentQuality <= 0.1) {\n                    descargarImagen(blob);\n                } else {\n                    tryCompress(currentQuality - 0.1);\n                }\n            }, 'image\/jpeg', currentQuality);\n        };\n        \n        tryCompress(quality);\n    }\n\n    function descargarImagen(blob) {\n        const originalName = currentFile.name.split('.').slice(0, -1).join('.');\n        const newFileName = `${originalName}_chica.jpg`;\n\n        const url = URL.createObjectURL(blob);\n        const a = document.createElement('a');\n        a.href = url;\n        a.download = newFileName;\n        document.body.appendChild(a);\n        a.click();\n        \n        document.body.removeChild(a);\n        URL.revokeObjectURL(url);\n        \n        statusDisplay.textContent = `\u00a1Listo! Descargado como ${newFileName} (${(blob.size \/ 1024).toFixed(2)} KB).`;\n    }\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>HERRAMIENTA DE COMPRESI\u00d3N Paso 1: Seleccionar Fotograf\u00eda Paso 2: Indica el peso m\u00e1ximo (en KB) Bajar Peso y Descargar<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-12014","page","type-page","status-publish","hentry"],"acf":[],"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/12014","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/comments?post=12014"}],"version-history":[{"count":3,"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/12014\/revisions"}],"predecessor-version":[{"id":12020,"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/pages\/12014\/revisions\/12020"}],"wp:attachment":[{"href":"https:\/\/collage.com.ar\/index.php\/wp-json\/wp\/v2\/media?parent=12014"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}