Convertidor de GIF<\/title>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n .gif-converter-wrapper {\r\n max-width: 550px;\r\n margin: 0px auto 30px auto;\r\n font-family: sans-serif;\r\n font-size: 16px;\r\n }\r\n\r\n \/* --- \u0417\u043e\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .gif-upload-area {\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n padding: 80px 60px 60px 60px;\r\n text-align: center;\r\n border: 2px dashed #d0d4dc;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 200px;\r\n }\r\n .gif-upload-area.drag-over {\r\n border-color: #007bff;\r\n background-color: #f8f9fa;\r\n }\r\n \/* --- \u0421\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .gif-upload-area.upload-error {\r\n border-color: #dc3545 !important; \/* \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 *\/\r\n \/* background-color: #fff8f8; *\/ \/* \u041b\u0435\u0433\u043a\u0438\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0444\u043e\u043d (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) *\/\r\n }\r\n .gif-upload-area input[type=\"file\"] { display: none; }\r\n .gif-upload-button {\r\n display: inline-block;\r\n background-color: #007bff;\r\n color: #ffffff;\r\n padding: 12px 30px;\r\n border-radius: 50px;\r\n font-size: 1em;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n margin-bottom: 15px;\r\n border: none; outline: none;\r\n }\r\n .gif-upload-button:hover { background-color: #0056b3; }\r\n .gif-upload-button:active { transform: scale(0.98); }\r\n .gif-upload-hint { color: #6c757d; margin: 0; }\r\n .gif-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .gif-upload-hint .main-hint { font-size: 1.0em; }\r\n .gif-upload-hint .sub-hint { font-size: 0.85em; }\r\n\r\n \/* --- \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a --- *\/\r\n .gif-converter-settings { margin-top: 15px; text-align: center; }\r\n .gif-settings-toggle {\r\n cursor: pointer; color: #007bff; text-decoration: none; border: 1px solid #007bff;\r\n padding: 8px 15px; border-radius: 20px; display: inline-block; margin-bottom: 15px;\r\n font-size: 0.9em; transition: background-color 0.3s, color 0.3s;\r\n }\r\n .gif-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .gif-settings-content {\r\n display: none; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #fdfdfd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n text-align: left; font-size: 0.9em;\r\n }\r\n .setting-group {\r\n margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee;\r\n }\r\n .setting-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }\r\n .setting-group h4 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: #333; }\r\n .gif-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }\r\n .gif-settings-content .inline-label {\r\n display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px;\r\n }\r\n small { color: #6c757d; display: block; margin-top: 8px; line-height: 1.4; }\r\n .hidden { display: none !important; }\r\n\r\n \/* === \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER (v5.5) === *\/\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"] {\r\n background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px;\r\n padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle;\r\n font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n width: 80px; margin-right: 10px; display: inline-block;\r\n }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n\r\n .gif-converter-wrapper .gif-settings-content select {\r\n appearance: none; -webkit-appearance: none; -moz-appearance: none;\r\n background-color: #f0f0f0 !important; color: #333 !important;\r\n border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px;\r\n margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit;\r\n line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n width: auto; min-width: 110px; display: inline-block; cursor: pointer;\r\n background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');\r\n background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px;\r\n }\r\n .gif-converter-wrapper .gif-settings-content select::-ms-expand { display: none; }\r\n .gif-converter-wrapper .gif-settings-content select option {\r\n background-color: #f0f0f0; color: #333; padding: 5px 10px;\r\n }\r\n .gif-converter-wrapper .gif-settings-content select:focus,\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]:focus {\r\n outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);\r\n }\r\n \/* === \u041a\u041e\u041d\u0415\u0426 \u0421\u0422\u0418\u041b\u0415\u0419 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER === *\/\r\n\r\n \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u043f\u0443\u0442\u044b *\/\r\n .gif-settings-content input[type=\"color\"],\r\n .gif-settings-content input[type=\"range\"] {\r\n margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;\r\n width: 100%; box-sizing: border-box;\r\n }\r\n .gif-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .gif-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .gif-settings-content input[type=\"checkbox\"] {\r\n margin-right: 5px; vertical-align: middle; width: 16px; height: 16px;\r\n }\r\n .aspect-ratio-label, .bg-color-label {\r\n font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer;\r\n }\r\n .quality-setting { display: flex; align-items: center; gap: 10px; margin-top: 10px; }\r\n .quality-setting label { margin-bottom: 0; }\r\n .quality-setting input[type=\"range\"] { flex-grow: 1; margin-bottom: 0; }\r\n .quality-setting span { min-width: 30px; text-align: right; font-weight: bold; }\r\n .transform-buttons { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .transform-buttons button {\r\n padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc;\r\n background-color: #fff; color: #333; border-radius: 4px;\r\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\r\n }\r\n .transform-buttons button:hover { border-color: #999; background-color: #f0f0f0; color: #333; }\r\n .transform-buttons button:active { background-color: #e0e0e0; }\r\n .transform-buttons button:disabled { color: #999; cursor: not-allowed; background-color: #f8f8f8; border-color: #ddd; }\r\n\r\n \/* --- \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f --- *\/\r\n .gif-converter-status-area {\r\n margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n }\r\n .gif-converter-status {\r\n font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em;\r\n line-height: 1.5; word-wrap: break-word;\r\n }\r\n .gif-converter-status.success { color: #155724; font-weight: bold; }\r\n .gif-converter-status.error { color: #721c24; font-weight: bold; }\r\n .gif-converter-download-area a {\r\n display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff;\r\n text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em;\r\n transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer;\r\n }\r\n .gif-converter-download-area a:hover { background-color: #218838; }\r\n .gif-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"gif-converter-wrapper\"> \r\n\r\n \r\n <div class=\"gif-upload-area\" id=\"gifUploadArea\">\r\n <input type=\"file\" id=\"gifFileInput\" accept=\".gif\" \/>\r\n <label for=\"gifFileInput\" class=\"gif-upload-button\" role=\"button\" tabindex=\"0\">\r\n Subir imagen GIF\r\n <\/label>\r\n <div class=\"gif-upload-hint\">\r\n <span class=\"main-hint\">o suelta un archivo aqu\u00ed<\/span>\r\n <span class=\"sub-hint\">(Convierte el primer fotograma del GIF)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gif-converter-settings\">\r\n <span class=\"gif-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\">\r\n Configuraci\u00f3n avanzada \u25bc\r\n <\/span>\r\n <div class=\"gif-settings-content\" id=\"settingsContent\">\r\n \r\n \r\n <div class=\"setting-group\">\r\n <h4>Formato y calidad de salida<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Formato:<\/label>\r\n <select id=\"outputFormat\">\r\n <option value=\"image\/png\" selected>PNG<\/option>\r\n <option value=\"image\/jpeg\">JPEG<\/option>\r\n <option value=\"image\/webp\">WebP<\/option>\r\n <\/select>\r\n\r\n <div class=\"quality-setting hidden\" id=\"qualityControl\">\r\n <label for=\"outputQuality\" class=\"inline-label\">Calidad:<\/label>\r\n <input type=\"range\" id=\"outputQuality\" min=\"0.1\" max=\"1.0\" step=\"0.05\" value=\"0.9\">\r\n <span id=\"qualityValue\">0.90<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Cambiar el tama\u00f1o<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Ancho:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Altura:<\/label>\r\n <input type=\"number\" id=\"outputHeight\" placeholder=\"auto\" min=\"1\">\r\n <\/div>\r\n <div style=\"margin-top: 10px;\">\r\n <input type=\"checkbox\" id=\"maintainAspectRatio\" checked>\r\n <label for=\"maintainAspectRatio\" class=\"aspect-ratio-label\">Mantener la relaci\u00f3n de aspecto<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Fondo<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Utilice el color de fondo:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(\u00datil para formatos sin transparencia como JPEG, o para eliminar la transparencia existente)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformar<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Girar 90\u00b0 en el sentido de las agujas del reloj\">Girar 90\u00b0 en sentido horario<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Voltear horizontalmente\">Voltear horizontalmente<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Voltear verticalmente\">Voltear verticalmente<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Restablecer transformaciones\">Restablecer transformaciones<\/button>\r\n <\/div>\r\n <small>(La rotaci\u00f3n podr\u00eda afectar las dimensiones si no se mantiene la relaci\u00f3n de aspecto)<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n\r\n \r\n <div class=\"gif-converter-status-area\" id=\"statusArea\" style=\"display: none;\">\r\n <div class=\"gif-converter-status\" id=\"converterStatus\"><\/div>\r\n <div class=\"gif-converter-download-area\" id=\"downloadLinkContainer\"><\/div>\r\n <\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ --- \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM ---\r\n const uploadArea = document.getElementById('gifUploadArea');\r\n const fileInput = document.getElementById('gifFileInput');\r\n const statusArea = document.getElementById('statusArea');\r\n const statusMessage = document.getElementById('converterStatus');\r\n const downloadLinkContainer = document.getElementById('downloadLinkContainer');\r\n const toggleSettingsBtn = document.getElementById('toggleSettingsBtn');\r\n const settingsContent = document.getElementById('settingsContent');\r\n const outputFormatSelect = document.getElementById('outputFormat');\r\n const qualityControlDiv = document.getElementById('qualityControl');\r\n const outputQualitySlider = document.getElementById('outputQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const outputWidthInput = document.getElementById('outputWidth');\r\n const outputHeightInput = document.getElementById('outputHeight');\r\n const maintainAspectRatioCheckbox = document.getElementById('maintainAspectRatio');\r\n const useBackgroundColorCheckbox = document.getElementById('useBackgroundColor');\r\n const backgroundColorPicker = document.getElementById('backgroundColor');\r\n const rotateBtn = document.getElementById('rotateBtn');\r\n const flipHorizontalBtn = document.getElementById('flipHorizontalBtn');\r\n const flipVerticalBtn = document.getElementById('flipVerticalBtn');\r\n const resetTransformBtn = document.getElementById('resetTransformBtn');\r\n\r\n \/\/ --- \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 ---\r\n const elements = { uploadArea, fileInput, statusArea, statusMessage, downloadLinkContainer, toggleSettingsBtn, settingsContent, outputFormatSelect, qualityControlDiv, outputQualitySlider, qualityValueSpan, outputWidthInput, outputHeightInput, maintainAspectRatioCheckbox, useBackgroundColorCheckbox, backgroundColorPicker, rotateBtn, flipHorizontalBtn, flipVerticalBtn, resetTransformBtn };\r\n for (const key in elements) {\r\n if (!elements[key]) {\r\n console.error(`Converter init error: Element with ID or reference \"${key}\" not found.`);\r\n if (uploadArea) uploadArea.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n else document.body.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n return;\r\n }\r\n }\r\n\r\n \/\/ --- \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n let currentRotation = 0; \/\/ \u0432 \u0433\u0440\u0430\u0434\u0443\u0441\u0430\u0445 (0, 90, 180, 270)\r\n let isFlippedHorizontal = false;\r\n let isFlippedVertical = false;\r\n let originalImageDimensions = { width: 0, height: 0 };\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 ---\r\n\r\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\r\n function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'gif-converter-status';\r\n downloadLinkContainer.innerHTML = '';\r\n statusArea.style.display = 'none';\r\n fileInput.value = ''; \/\/ \u0421\u0431\u0440\u043e\u0441 \u0432\u044b\u0431\u043e\u0440\u0430 \u0444\u0430\u0439\u043b\u0430\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438, \u0435\u0441\u043b\u0438 \u0431\u044b\u043b\u0430\r\n resetTransformations();\r\n updateTransformButtonStates();\r\n \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0431\u0440\u043e\u0441 \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e\r\n }\r\n\r\n \/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430\r\n function showStatus(message, type = 'info') {\r\n const prefix = type === 'error' ? '\u274c ' : (type === 'success' ? '\u2705 ' : '\u23f3 ');\r\n statusMessage.textContent = prefix + message;\r\n statusMessage.className = 'gif-converter-status'; \/\/ \u0421\u0431\u0440\u043e\u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\r\n if (type === 'success') {\r\n statusMessage.classList.add('success');\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0445\u0435\r\n } else if (type === 'error') {\r\n statusMessage.classList.add('error');\r\n uploadArea.classList.add('upload-error'); \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435\r\n } else {\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043b\u044f info\r\n }\r\n\r\n if (type !== 'success' && type !== 'info') { \/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u0445\r\n downloadLinkContainer.innerHTML = '';\r\n }\r\n statusArea.style.display = 'block'; \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0441\u0442\u0430\u0442\u0443\u0441\u0430\r\n }\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f UI \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439) ---\r\n function toggleSettings() {\r\n const isHidden = settingsContent.style.display === 'none' || settingsContent.style.display === '';\r\n settingsContent.style.display = isHidden ? 'block' : 'none';\r\n toggleSettingsBtn.textContent = isHidden ? 'Advanced Settings \u25b2' : 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');\r\n settingsContent.setAttribute('aria-hidden', isHidden ? 'false' : 'true');\r\n }\r\n function updateQualityControlVisibility() {\r\n const selectedFormat = outputFormatSelect.value;\r\n const isQualityApplicable = selectedFormat === 'image\/jpeg' || selectedFormat === 'image\/webp';\r\n qualityControlDiv.classList.toggle('hidden', !isQualityApplicable);\r\n qualityControlDiv.setAttribute('aria-hidden', String(!isQualityApplicable));\r\n }\r\n function updateQualityValueDisplay() {\r\n qualityValueSpan.textContent = parseFloat(outputQualitySlider.value).toFixed(2);\r\n }\r\n function toggleBackgroundColorPicker() {\r\n backgroundColorPicker.disabled = !useBackgroundColorCheckbox.checked;\r\n }\r\n function resetTransformations() {\r\n currentRotation = 0;\r\n isFlippedHorizontal = false;\r\n isFlippedVertical = false;\r\n }\r\n function updateTransformButtonStates() {\r\n resetTransformBtn.disabled = (currentRotation === 0 && !isFlippedHorizontal && !isFlippedVertical);\r\n }\r\n\r\n \/\/ --- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 ---\r\n function handleFile(file) {\r\n resetInterface(); \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0431\u0440\u043e\u0441\u0430\r\n\r\n if (!file) return;\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430\r\n if (!\/\\.gif$\/i.test(file.name) && file.type !== 'image\/gif') {\r\n showStatus(`Incorrect file format. Please upload a GIF file (received: ${file.name}, type: ${file.type || 'unknown'}).`, 'error');\r\n return; \/\/ \u041f\u0440\u0435\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\r\n }\r\n\r\n showStatus(`Processing \"${file.name}\"... Reading file.`, 'info');\r\n\r\n const reader = new FileReader();\r\n\r\n reader.onload = function(e) {\r\n \/\/ ... (\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434 reader.onload \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f img.onload, canvas, \u044d\u043a\u0441\u043f\u043e\u0440\u0442) ...\r\n showStatus(`Processing \"${file.name}\"... Decoding image.`, 'info');\r\n const img = new Image();\r\n\r\n img.onload = function() {\r\n originalImageDimensions.width = img.naturalWidth;\r\n originalImageDimensions.height = img.naturalHeight;\r\n\r\n if (originalImageDimensions.width === 0 || originalImageDimensions.height === 0) {\r\n showStatus(`Failed to decode image \"${file.name}\". It might be corrupted or have zero dimensions.`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${file.name}\"... Applying settings.`, 'info');\r\n\r\n const mimeType = outputFormatSelect.value;\r\n const quality = parseFloat(outputQualitySlider.value);\r\n const maintainRatio = maintainAspectRatioCheckbox.checked;\r\n const useBG = useBackgroundColorCheckbox.checked;\r\n const bgColor = backgroundColorPicker.value;\r\n\r\n let desiredWidth = parseInt(outputWidthInput.value, 10) || 0;\r\n let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n\r\n let targetWidth = originalImageDimensions.width;\r\n let targetHeight = originalImageDimensions.height;\r\n\r\n if (desiredWidth > 0 || desiredHeight > 0) {\r\n if (maintainRatio) {\r\n const originalRatio = originalImageDimensions.width \/ originalImageDimensions.height;\r\n if (originalRatio === 0 || !isFinite(originalRatio)) {\r\n showStatus('Error calculating aspect ratio. Original image dimensions might be invalid.', 'error');\r\n return;\r\n }\r\n if (desiredWidth > 0 && desiredHeight <= 0) {\r\n targetWidth = desiredWidth;\r\n targetHeight = Math.round(desiredWidth \/ originalRatio);\r\n } else if (desiredHeight > 0 && desiredWidth <= 0) {\r\n targetHeight = desiredHeight;\r\n targetWidth = Math.round(desiredHeight * originalRatio);\r\n } else if (desiredWidth > 0 && desiredHeight > 0) {\r\n const widthRatio = desiredWidth \/ originalImageDimensions.width;\r\n const heightRatio = desiredHeight \/ originalImageDimensions.height;\r\n const scale = Math.min(widthRatio, heightRatio);\r\n targetWidth = Math.round(originalImageDimensions.width * scale);\r\n targetHeight = Math.round(originalImageDimensions.height * scale);\r\n }\r\n } else {\r\n if (desiredWidth > 0) targetWidth = desiredWidth;\r\n if (desiredHeight > 0) targetHeight = desiredHeight;\r\n }\r\n }\r\n targetWidth = Math.max(1, targetWidth);\r\n targetHeight = Math.max(1, targetHeight);\r\n\r\n const canvas = document.createElement('canvas');\r\n const requiresSwap = currentRotation === 90 || currentRotation === 270;\r\n canvas.width = requiresSwap ? targetHeight : targetWidth;\r\n canvas.height = requiresSwap ? targetWidth : targetHeight;\r\n\r\n const MAX_CANVAS_AREA = 16384 * 16384;\r\n const MAX_CANVAS_DIM = 32767;\r\n if (canvas.width <= 0 || canvas.height <= 0 || canvas.width > MAX_CANVAS_DIM || canvas.height > MAX_CANVAS_DIM || (canvas.width * canvas.height > MAX_CANVAS_AREA)) {\r\n showStatus(`Resulting dimensions (${canvas.width}x${canvas.height}) are invalid or exceed browser limits. Please choose smaller dimensions or reset transformations.`, 'error');\r\n return;\r\n }\r\n\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) {\r\n showStatus('Could not get Canvas 2D context. Your browser might be too old or configuration issue.', 'error');\r\n return;\r\n }\r\n\r\n try {\r\n ctx.save();\r\n\r\n if (useBG || mimeType === 'image\/jpeg') {\r\n ctx.fillStyle = bgColor;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n } else {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n ctx.translate(centerX, centerY);\r\n if (currentRotation !== 0) ctx.rotate(currentRotation * Math.PI \/ 180);\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n\r\n const drawX = -targetWidth \/ 2;\r\n const drawY = -targetHeight \/ 2;\r\n ctx.drawImage(\r\n img,\r\n 0, 0, originalImageDimensions.width, originalImageDimensions.height,\r\n drawX, drawY, targetWidth, targetHeight\r\n );\r\n\r\n ctx.restore();\r\n\r\n showStatus(`Processing \"${file.name}\"... Encoding final image.`, 'info');\r\n let exportQuality = quality;\r\n if (mimeType === 'image\/webp' && quality === 1.0) {\r\n console.log(\"Attempting near-lossless WebP (quality 1.0)\");\r\n }\r\n const dataUrl = canvas.toDataURL(mimeType, (mimeType === 'image\/jpeg' || mimeType === 'image\/webp') ? exportQuality : undefined);\r\n\r\n if (!dataUrl || dataUrl === 'data:,') {\r\n throw new Error(\"Failed to encode image. Canvas returned empty data.\");\r\n }\r\n\r\n \/\/ --- \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0410\u0432\u0442\u043e-\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f ---\r\n const link = document.createElement('a');\r\n link.href = dataUrl;\r\n const originalName = file.name.replace(\/\\.gif$\/i, '');\r\n let extension = mimeType.split('\/')[1];\r\n if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted_${canvas.width}x${canvas.height}.${extension}`;\r\n\r\n \/\/ \u0417\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 - \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438\r\n link.textContent = `Download ${link.download}`;\r\n downloadLinkContainer.innerHTML = '';\r\n downloadLinkContainer.appendChild(link);\r\n\r\n \/\/ \u0418\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n link.click();\r\n \/\/ ------------------------------------\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441 \u041f\u041e\u0421\u041b\u0415 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n\r\n\r\n } catch (error) {\r\n console.error(\"Conversion Error:\", error);\r\n let errorMessage = `Error during conversion: ${error.message || 'Unknown error'}.`;\r\n if (error instanceof DOMException) {\r\n if (error.name === 'IndexSizeError' || error.message.includes(\"large\")) {\r\n errorMessage = `Resulting image dimensions (${canvas.width}x${canvas.height}) might be too large for the browser's Canvas. Try smaller dimensions or reset transformations.`;\r\n } else if (error.name === 'SecurityError') {\r\n errorMessage = `Could not generate image due to browser security restrictions (e.g., tainted canvas).`;\r\n }\r\n } else if (error.message.includes(\"encode\")) {\r\n errorMessage = `Failed to encode image to ${mimeType}. The format might not be fully supported or an issue occurred.`;\r\n }\r\n showStatus(errorMessage, 'error');\r\n }\r\n };\r\n\r\n img.onerror = function(err) {\r\n console.error(\"Image loading error:\", err);\r\n showStatus(`Error loading image \"${file.name}\". Ensure it's a valid, non-corrupted GIF file.`, 'error');\r\n };\r\n\r\n img.src = e.target.result; \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 Data URL\r\n };\r\n\r\n reader.onerror = function(err) {\r\n console.error(\"FileReader error:\", err);\r\n showStatus(`Error reading file \"${file.name}\". Check browser permissions or file integrity.`, 'error');\r\n };\r\n\r\n reader.readAsDataURL(file); \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0447\u0442\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430\r\n }\r\n\r\n\r\n \/\/ --- \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 ---\r\n\r\n \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\r\n\r\n toggleSettingsBtn.addEventListener('click', toggleSettings);\r\n toggleSettingsBtn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSettings(); } });\r\n\r\n outputFormatSelect.addEventListener('change', updateQualityControlVisibility);\r\n outputQualitySlider.addEventListener('input', updateQualityValueDisplay);\r\n\r\n \/\/ \u0410\u0432\u0442\u043e-\u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043f\u043e\u043b\u0435\u0439 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439\r\n outputWidthInput.addEventListener('input', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputWidthInput.value) outputHeightInput.value = '';\r\n });\r\n outputHeightInput.addEventListener('input', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputHeightInput.value) outputWidthInput.value = '';\r\n });\r\n\r\n \/\/ \u041b\u0435\u0439\u0431\u043b \u0434\u043b\u044f \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u0442\u043e\u0436\u0435 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u0435\u043d\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n\r\n useBackgroundColorCheckbox.addEventListener('change', toggleBackgroundColorPicker);\r\n\r\n \/\/ --- \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 ---\r\n function applyTransformation(transformFunc) {\r\n transformFunc();\r\n updateTransformButtonStates();\r\n \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0435\u0441\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c\r\n if (downloadLinkContainer.innerHTML !== '') {\r\n downloadLinkContainer.innerHTML = '';\r\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0438\u043f 'info' \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\r\n showStatus('Transformation settings changed. Please process the file again to apply.', 'info');\r\n }\r\n }\r\n\r\n rotateBtn.addEventListener('click', () => applyTransformation(() => {\r\n currentRotation = (currentRotation + 90) % 360;\r\n }));\r\n flipHorizontalBtn.addEventListener('click', () => applyTransformation(() => {\r\n isFlippedHorizontal = !isFlippedHorizontal;\r\n }));\r\n flipVerticalBtn.addEventListener('click', () => applyTransformation(() => {\r\n isFlippedVertical = !isFlippedVertical;\r\n }));\r\n resetTransformBtn.addEventListener('click', () => applyTransformation(() => {\r\n resetTransformations(); \/\/ \u0421\u0431\u0440\u043e\u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\r\n }));\r\n\r\n \/\/ \u0412\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files.length > 0) {\r\n handleFile(event.target.files[0]);\r\n } else {\r\n resetInterface(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043c\u0435\u043d\u0438\u043b \u0432\u044b\u0431\u043e\u0440\r\n }\r\n });\r\n\r\n \/\/ Drag and Drop\r\n uploadArea.addEventListener('dragover', (event) => {\r\n event.preventDefault();\r\n event.dataTransfer.dropEffect = 'copy';\r\n uploadArea.classList.add('drag-over');\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f\r\n });\r\n uploadArea.addEventListener('dragleave', (event) => {\r\n if (!uploadArea.contains(event.relatedTarget) || event.relatedTarget === null) {\r\n uploadArea.classList.remove('drag-over');\r\n }\r\n });\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault();\r\n uploadArea.classList.remove('drag-over'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u044c drag-over \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435\r\n if (event.dataTransfer.files.length > 0) {\r\n const droppedFile = event.dataTransfer.files[0];\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 \u043f\u0440\u0438 Drop\r\n if (\/\\.gif$\/i.test(droppedFile.name) || droppedFile.type === 'image\/gif') {\r\n fileInput.files = event.dataTransfer.files;\r\n handleFile(droppedFile); \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b\r\n } else {\r\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0440\u0438 Drop\r\n showStatus(`Incorrect file format dropped. Please drop a GIF file (received: ${droppedFile.name}, type: ${droppedFile.type || 'unknown'}).`, 'error');\r\n fileInput.value = ''; \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c input file \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\r\n }\r\n } else {\r\n resetInterface(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c, \u0435\u0441\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u043b\u0438\r\n }\r\n });\r\n\r\n \/\/ --- \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates();\r\n\r\n}); \/\/ \u041a\u043e\u043d\u0435\u0446 'DOMContentLoaded'\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-e92ba5f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e92ba5f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-eda39f5\" data-id=\"eda39f5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a0f5fb4 elementor-widget elementor-widget-text-editor\" data-id=\"a0f5fb4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Otros formatos: <a href=\"https:\/\/pngate.com\/es\/webp-a-png\/\">Webp a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/avif-to-png\/\">Avif a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/jpeg-to-png\/\">JPEG a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/svg-to-png\/\">SVG a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/heic-to-png\/\">HEIC a PNG<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-60222ab elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60222ab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-13ad849\" data-id=\"13ad849\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7801d21 elementor-widget elementor-widget-text-editor\" data-id=\"7801d21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5>\u00bfTe result\u00f3 \u00fatil? \u00a1Comp\u00e1rtelo!<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-5eab9a6 elementor-share-buttons--shape-rounded elementor-share-buttons--align-center elementor-share-buttons--view-icon-text elementor-share-buttons--skin-gradient elementor-grid-0 elementor-share-buttons--color-official elementor-widget elementor-widget-share-buttons\" data-id=\"5eab9a6\" data-element_type=\"widget\" data-widget_type=\"share-buttons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-grid\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_pinterest\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on pinterest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-pinterest\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tPinterest\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_telegram\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on telegram\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-telegram\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tTelegrama\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_facebook\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on facebook\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-facebook\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tFacebook\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_twitter\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on twitter\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-twitter\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tGorjeo\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_reddit\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on reddit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-reddit\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tReddit\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-8637db1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8637db1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e57a4f6\" data-id=\"e57a4f6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-244a5e8\" data-id=\"244a5e8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8ef2d29 elementor-widget elementor-widget-text-editor\" data-id=\"8ef2d29\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>\u00bfNecesitas convertir GIF a PNG r\u00e1pida y f\u00e1cilmente? Nuestro conversor de GIF a PNG online gratuito te permite transformar GIF animados o est\u00e1ticos en im\u00e1genes PNG de alta calidad al instante, sin software, sin coste y sin complicaciones.<\/p><h2>\u00bfQu\u00e9 es un archivo GIF?<\/h2><p>GIF (Formato de Intercambio de Gr\u00e1ficos) es un formato de imagen ampliamente utilizado, conocido por su compatibilidad con animaciones y archivos de peque\u00f1o tama\u00f1o. Es popular en redes sociales, sitios web y aplicaciones de mensajer\u00eda gracias a sus animaciones en bucle y su amplia compatibilidad.<\/p><p>Sin embargo, los GIF no son ideales para todas las situaciones, especialmente cuando necesitas una imagen fija con alta calidad, transparencia o flexibilidad de edici\u00f3n.<\/p><h2>\u00bfPor qu\u00e9 convertir GIF a PNG?<\/h2><p>PNG (Gr\u00e1ficos de Red Port\u00e1tiles) es un formato de imagen sin p\u00e9rdida que admite transparencia y es perfecto para editar o usar en entornos profesionales. Estas son las razones por las que podr\u00edas querer convertir GIF a PNG:<\/p><ul><li><strong>Mayor calidad:<\/strong> PNG ofrece im\u00e1genes m\u00e1s n\u00edtidas y sin comprimir en comparaci\u00f3n con los GIF est\u00e1ticos.<\/li><li><strong>Apoyo a la transparencia:<\/strong> PNG admite totalmente la transparencia alfa, ideal para uso en dise\u00f1o.<\/li><li><strong>Facilidad de edici\u00f3n:<\/strong> Los archivos PNG son ampliamente compatibles con editores gr\u00e1ficos como Photoshop, GIMP, Figma y m\u00e1s.<\/li><li><strong>Extraer fotogramas:<\/strong> Convierta f\u00e1cilmente GIF animados en marcos PNG individuales para editarlos o presentarlos.<\/li><\/ul><p>Utilice nuestro convertidor de GIF a PNG en l\u00ednea para gestionar todo esto: r\u00e1pido, seguro y gratuito.<\/p><h2>C\u00f3mo convertir GIF a PNG en l\u00ednea<\/h2><p>Nuestro convertidor gratuito de GIF simplifica y agiliza el proceso. Sigue estos sencillos pasos:<\/p><ol><li><strong>Sube tu GIF<\/strong> \u2013 Arrastre y suelte el archivo o selecci\u00f3nelo manualmente.<\/li><li><strong>Convertir al instante<\/strong> \u2013 La conversi\u00f3n se inicia autom\u00e1ticamente en su navegador.<\/li><li><strong>Descargar PNG<\/strong> \u2013 Obtenga su archivo PNG convertido con un solo clic.<\/li><\/ol><p>Esta herramienta funciona directamente en tu navegador, sin necesidad de instalar nada ni crear una cuenta. Convierte im\u00e1genes sin perder calidad desde cualquier dispositivo.<\/p><h2>\u00bfPor qu\u00e9 utilizar nuestro convertidor de GIF a PNG en l\u00ednea?<\/h2><ul><li><strong>Libre para siempre<\/strong> \u2013 Sin suscripciones ni registros.<\/li><li><strong>R\u00e1pido e intuitivo<\/strong> Curva de aprendizaje cero. Solo tienes que subirlo y listo.<\/li><li><strong>Seguro y privado<\/strong> \u2013 Sus archivos nunca se cargan en un servidor.<\/li><li><strong>Compatibilidad con m\u00faltiples dispositivos<\/strong> \u2013 Funciona en computadoras de escritorio, dispositivos m\u00f3viles o tabletas.<\/li><li><strong>Conserva la calidad<\/strong> \u2013 Convierte sin p\u00e9rdida de compresi\u00f3n.<\/li><\/ul><p>Ya sea que necesite extraer un marco est\u00e1tico o convertir GIF para fines de dise\u00f1o, nuestro convertidor de GIF a PNG en l\u00ednea le brinda la mejor experiencia.<\/p><h2>GIF vs PNG: Diferencias clave<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Caracter\u00edstica<\/th><th>GIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Animaci\u00f3n<\/td><td>Apoyado<\/td><td>No compatible<\/td><\/tr><tr><td>Compresi\u00f3n<\/td><td>Con p\u00e9rdida o limitada<\/td><td>Sin p\u00e9rdida<\/td><\/tr><tr><td>Transparencia<\/td><td>B\u00e1sico (1 bit)<\/td><td>Canal alfa completo<\/td><\/tr><tr><td>Compatibilidad de edici\u00f3n<\/td><td>Limitado<\/td><td>Amplio apoyo<\/td><\/tr><tr><td>Mejor para<\/td><td>Animaciones cortas, memes<\/td><td>Logotipos, gr\u00e1ficos, recursos de dise\u00f1o<\/td><\/tr><\/tbody><\/table><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-baa8c02\" data-id=\"baa8c02\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Conversor de GIF a PNG. Convierte GIF a PNG gratis online. Sube tus im\u00e1genes GIF a continuaci\u00f3n y obt\u00e9n archivos PNG de alta calidad en segundos. Conversor de GIF.<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4889,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-4715","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/comments?post=4715"}],"version-history":[{"count":70,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4715\/revisions"}],"predecessor-version":[{"id":4974,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4715\/revisions\/4974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media\/4889"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media?parent=4715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}