Convertidor de WebP a PNG (v1.1)<\/title>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 --- *\/\r\n body { margin: 0; padding: 20px; background-color: #f4f7f6; }\r\n .webp-converter-wrapper { max-width: 550px; margin: 0px auto 30px auto; font-family: sans-serif; font-size: 16px; }\r\n\r\n \/* --- \u0417\u043e\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .webp-upload-area { background-color: #ffffff; border-radius: 20px; padding: 80px 60px 60px 60px; text-align: center; border: 2px dashed #d0d4dc; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05); transition: border-color 0.3s ease, background-color 0.3s ease; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 200px; }\r\n .webp-upload-area.drag-over { border-color: #007bff; background-color: #f8f9fa; }\r\n .webp-upload-area.upload-error { border-color: #dc3545 !important; }\r\n .webp-upload-area input[type=\"file\"] { display: none; }\r\n .webp-upload-button { display: inline-block; background-color: #007bff; color: #ffffff; padding: 12px 30px; border-radius: 50px; font-size: 1em; font-weight: bold; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; margin-bottom: 15px; border: none; outline: none; }\r\n .webp-upload-button:hover { background-color: #0056b3; }\r\n .webp-upload-button:active { transform: scale(0.98); }\r\n .webp-upload-hint { color: #6c757d; margin: 0; }\r\n .webp-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .webp-upload-hint .main-hint { font-size: 1.0em; }\r\n .webp-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 .webp-converter-settings { margin-top: 15px; text-align: center; }\r\n .webp-settings-toggle { cursor: pointer; color: #007bff; text-decoration: none; border: 1px solid #007bff; padding: 8px 15px; border-radius: 20px; display: inline-block; margin-bottom: 15px; font-size: 0.9em; transition: background-color 0.3s, color 0.3s; }\r\n .webp-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .webp-settings-content {\r\n display: none; \/* \u0421\u043a\u0440\u044b\u0442\u043e \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e *\/\r\n 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 .webp-settings-content.is-visible {\r\n display: block !important; \/* \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0438 \u043f\u0435\u0440\u0435\u0431\u0438\u0432\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u0438 \u0442\u0435\u043c\u044b *\/\r\n }\r\n .setting-group { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\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 .webp-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }\r\n .webp-settings-content .inline-label { display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px; }\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 (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c webp-) === *\/\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"] { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 80px; margin-right: 10px; display: inline-block; }\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .webp-converter-wrapper .webp-settings-content select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: auto; min-width: 110px; display: inline-block; cursor: pointer; 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'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px; }\r\n .webp-converter-wrapper .webp-settings-content select::-ms-expand { display: none; }\r\n .webp-converter-wrapper .webp-settings-content select option { background-color: #f0f0f0; color: #333; padding: 5px 10px; }\r\n .webp-converter-wrapper .webp-settings-content select:focus,\r\n .webp-converter-wrapper .webp-settings-content input[type=\"number\"]:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }\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 .webp-settings-content input[type=\"color\"], .webp-settings-content input[type=\"range\"] { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }\r\n .webp-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .webp-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .webp-settings-content input[type=\"checkbox\"] { margin-right: 5px; vertical-align: middle; width: 16px; height: 16px; }\r\n .aspect-ratio-label, .bg-color-label { font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer; }\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 { padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; background-color: #fff; color: #333; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }\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 .webp-converter-status-area {\r\n margin-top: 25px;\r\n padding: 15px 20px;\r\n border: 1px solid #e0e0e0;\r\n border-radius: 8px;\r\n background-color: #f9f9f9;\r\n text-align: center;\r\n box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n display: none; \/* <<< \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0441\u0442\u0430\u0442\u0443\u0441\u0430 *\/\r\n }\r\n .webp-converter-status { font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em; line-height: 1.5; word-wrap: break-word; }\r\n .webp-converter-status.success { color: #155724; font-weight: bold; }\r\n .webp-converter-status.error { color: #721c24; font-weight: bold; }\r\n .webp-converter-download-area a { display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff; text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em; transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer; }\r\n .webp-converter-download-area a:hover { background-color: #218838; }\r\n .webp-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"webp-converter-wrapper\"> \r\n\r\n \r\n <div class=\"webp-upload-area\" id=\"webpUploadArea\"> \r\n <input type=\"file\" id=\"webpFileInput\" accept=\".webp, image\/webp\" \/> \r\n <label for=\"webpFileInput\" class=\"webp-upload-button\" role=\"button\" tabindex=\"0\"> \r\n Subir imagen WebP\r\n <\/label>\r\n <div class=\"webp-upload-hint\"> \r\n <span class=\"main-hint\">o suelta un archivo aqu\u00ed<\/span>\r\n <span class=\"sub-hint\">(Convierte archivos WebP a PNG de forma predeterminada)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"webp-converter-settings\"> \r\n <span class=\"webp-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\"> \r\n Configuraci\u00f3n avanzada \u25bc\r\n <\/span>\r\n <div class=\"webp-settings-content\" id=\"settingsContent\"> \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 <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 <small>Nota: PNG no tiene p\u00e9rdida, el control deslizante de calidad afecta solo a JPEG\/WebP.<\/small>\r\n <small>Nota: Es posible que se pierdan los metadatos (como EXIF) de WebP.<\/small>\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\">A\u00f1adir 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 eliminar transparencias o si se imprime en formato JPEG)<\/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=\"webp-converter-status-area\" id=\"statusArea\"> \r\n <div class=\"webp-converter-status\" id=\"converterStatus\"><\/div> \r\n <div class=\"webp-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('webpUploadArea'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n const fileInput = document.getElementById('webpFileInput'); \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u043e\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 \/\/ ... \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a \u043e\u0441\u0442\u0430\u044e\u0442\u0441\u044f \u0442\u0435\u043c\u0438 \u0436\u0435 (ID \u043d\u0435 \u043c\u0435\u043d\u044f\u043b\u0438\u0441\u044c)\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\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 (statusArea) statusArea.style.display = 'block'; \/\/ \u041f\u043e\u043a\u0430\u0437\u0430\u0442\u044c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430, \u0435\u0441\u043b\u0438 \u043e\u043d\u0430 \u0435\u0441\u0442\u044c\r\n if (statusMessage) statusMessage.textContent = 'Initialization Error! UI elements missing.';\r\n else 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;\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 function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'webp-converter-status'; \/\/ \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043a\u043b\u0430\u0441\u0441\r\n downloadLinkContainer.innerHTML = '';\r\n statusArea.style.display = 'none'; \/\/ <<< \u0423\u0431\u0435\u0436\u0434\u0430\u0435\u043c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u0443\u0441 \u0441\u043a\u0440\u044b\u0442 \u043f\u0440\u0438 \u0441\u0431\u0440\u043e\u0441\u0435\r\n fileInput.value = '';\r\n uploadArea.classList.remove('upload-error');\r\n resetTransformations(); \/\/ \u0421\u0431\u0440\u043e\u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u043a\u043d\u043e\u043f\u043e\u043a \u0438 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n updateTransformButtonStates(); \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043e\u043a\r\n }\r\n\r\n function showStatus(message, type = 'info') {\r\n const prefix = type === 'error' ? '\u274c ' : (type === 'success' ? '\u2705 ' : '\u23f3 ');\r\n \r\n \/\/ <<< \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043f\u0435\u0440\u0435\u0434 \u0432\u044b\u0432\u043e\u0434\u043e\u043c \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\r\n statusArea.style.display = 'block'; \r\n\r\n statusMessage.textContent = prefix + message;\r\n statusMessage.className = 'webp-converter-status'; \/\/ \u0421\u0431\u0440\u043e\u0441 \u0434\u043e \u0431\u0430\u0437\u043e\u0432\u043e\u0433\u043e \u043a\u043b\u0430\u0441\u0441\u0430\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0440\u0430\u0442\u044c \u043f\u043e\u0434\u0441\u0432\u0435\u0442\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e\r\n\r\n if (type === 'success') {\r\n statusMessage.classList.add('success');\r\n } else if (type === 'error') {\r\n statusMessage.classList.add('error');\r\n uploadArea.classList.add('upload-error'); \/\/ \u041f\u043e\u0434\u0441\u0432\u0435\u0442\u0438\u0442\u044c \u0437\u043e\u043d\u0443 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435\r\n downloadLinkContainer.innerHTML = ''; \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435\r\n } else {\r\n \/\/ \u0414\u043b\u044f 'info' \u043c\u043e\u0436\u043d\u043e \u0442\u043e\u0436\u0435 \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0441\u0441\u044b\u043b\u043a\u0443 \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0431\u044b\u043b\u0430 \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0430\u044f\r\n downloadLinkContainer.innerHTML = '';\r\n }\r\n }\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u043f\u0435\u0440\u0435\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a ---\r\n function toggleSettings() {\r\n const isCurrentlyVisible = settingsContent.classList.contains('is-visible');\r\n if (isCurrentlyVisible) {\r\n settingsContent.classList.remove('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n } else {\r\n settingsContent.classList.add('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25b2';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'true');\r\n settingsContent.setAttribute('aria-hidden', 'false');\r\n }\r\n }\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430\u043c\u0438 (\u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439) ---\r\n function updateQualityControlVisibility() {\r\n const selectedFormat = outputFormatSelect.value;\r\n if (selectedFormat === 'image\/jpeg' || selectedFormat === 'image\/webp') {\r\n qualityControlDiv.classList.remove('hidden');\r\n } else {\r\n qualityControlDiv.classList.add('hidden');\r\n }\r\n }\r\n\r\n function updateQualityValueDisplay() {\r\n qualityValueSpan.textContent = parseFloat(outputQualitySlider.value).toFixed(2);\r\n }\r\n\r\n function toggleBackgroundColorPicker() {\r\n backgroundColorPicker.disabled = !useBackgroundColorCheckbox.checked;\r\n if(!backgroundColorPicker.disabled) {\r\n backgroundColorPicker.parentElement.querySelector('label').style.fontWeight = 'bold'; \/\/ \u0412\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u044b\u0439 \u0430\u043a\u0446\u0435\u043d\u0442\r\n } else {\r\n backgroundColorPicker.parentElement.querySelector('label').style.fontWeight = 'normal';\r\n }\r\n }\r\n\r\n function resetTransformations() {\r\n currentRotation = 0;\r\n isFlippedHorizontal = false;\r\n isFlippedVertical = false;\r\n updateTransformButtonStates();\r\n \/\/ \u0415\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0439 \u0444\u0430\u0439\u043b, \u043c\u043e\u0436\u043d\u043e \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443\r\n if (fileInput.files.length > 0) {\r\n \/\/ \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u044b\u0437\u043e\u0432 handleFile \u0438\u043b\u0438 \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e\u0439 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438,\r\n \/\/ \u043d\u043e \u044d\u0442\u043e \u0443\u0441\u043b\u043e\u0436\u043d\u0438\u0442 \u043b\u043e\u0433\u0438\u043a\u0443 \u0431\u0435\u0437 \u044f\u0432\u043d\u043e\u0433\u043e \u0442\u0440\u0435\u0431\u043e\u0432\u0430\u043d\u0438\u044f. \u041f\u043e\u043a\u0430 \u043f\u0440\u043e\u0441\u0442\u043e \u0441\u0431\u0440\u043e\u0441 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f.\r\n }\r\n }\r\n\r\n function updateTransformButtonStates() {\r\n \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0435 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u0435, \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0442\u0438\u043b\u0438 \u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438\/\u043d\u0435\u0430\u043a\u0442\u0438\u0432\u043d\u043e\u0441\u0442\u0438 \u043f\u0440\u0438 \u0436\u0435\u043b\u0430\u043d\u0438\u0438\r\n \/\/ resetTransformBtn.disabled = (currentRotation === 0 && !isFlippedHorizontal && !isFlippedVertical);\r\n \/\/ \u041c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432\u0438\u0437\u0443\u0430\u043b\u044c\u043d\u043e\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0430\u043a\u0442\u0438\u0432\u043d\u044b\u0445 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043d\u0430 \u043a\u043d\u043e\u043f\u043a\u0430\u0445\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(); \/\/ \u0421\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\r\n if (!file) {\r\n console.log(\"No file provided to handleFile.\");\r\n return;\r\n }\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 (\u0442\u043e\u043b\u044c\u043a\u043e WebP)\r\n const fileName = file.name || 'Unnamed file';\r\n const fileMimeType = file.type || '';\r\n const isWebP = \/\\.webp$\/i.test(fileName) || fileMimeType === 'image\/webp';\r\n\r\n if (!isWebP) {\r\n showStatus(`Incorrect file format. Please upload a WebP file (received: ${fileName}, type: ${fileMimeType || 'unknown'}).`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Reading file.`, 'info');\r\n const reader = new FileReader();\r\n\r\n reader.onload = function(e) {\r\n if (!e.target || !e.target.result) {\r\n showStatus(`Error reading file \"${fileName}\": Empty result.`, 'error');\r\n return;\r\n }\r\n showStatus(`Processing \"${fileName}\"... 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(`Error processing \"${fileName}\": Image has zero dimensions.`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Applying settings.`, 'info');\r\n\r\n \/\/ \u041f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438\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 let desiredWidth = parseInt(outputWidthInput.value, 10) || 0;\r\n let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n let targetWidth = originalImageDimensions.width;\r\n let targetHeight = originalImageDimensions.height;\r\n\r\n \/\/ \u0420\u0430\u0441\u0447\u0435\u0442 \u043d\u043e\u0432\u043e\u0433\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u0441 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435\u043c \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439\r\n if (desiredWidth > 0 || desiredHeight > 0) {\r\n if (maintainRatio) {\r\n if (desiredWidth > 0 && desiredHeight === 0) {\r\n targetHeight = Math.round(originalImageDimensions.height * (desiredWidth \/ originalImageDimensions.width));\r\n targetWidth = desiredWidth;\r\n } else if (desiredHeight > 0 && desiredWidth === 0) {\r\n targetWidth = Math.round(originalImageDimensions.width * (desiredHeight \/ originalImageDimensions.height));\r\n targetHeight = desiredHeight;\r\n } else { \/\/ \u041e\u0431\u0430 \u0437\u0430\u0434\u0430\u043d\u044b, \u0431\u0435\u0440\u0435\u043c \u043c\u0435\u043d\u044c\u0448\u0438\u0439 \u043c\u0430\u0441\u0448\u0442\u0430\u0431\r\n const ratioW = desiredWidth \/ originalImageDimensions.width;\r\n const ratioH = desiredHeight \/ originalImageDimensions.height;\r\n if (ratioW < ratioH) {\r\n targetWidth = desiredWidth;\r\n targetHeight = Math.round(originalImageDimensions.height * ratioW);\r\n } else {\r\n targetHeight = desiredHeight;\r\n targetWidth = Math.round(originalImageDimensions.width * ratioH);\r\n }\r\n }\r\n } else { \/\/ \u041f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u043d\u0435 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f\r\n if (desiredWidth > 0) targetWidth = desiredWidth;\r\n if (desiredHeight > 0) targetHeight = desiredHeight;\r\n }\r\n }\r\n\r\n \/\/ \u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043d\u0435 \u043d\u0443\u043b\u0435\u0432\u044b\u0435\r\n targetWidth = Math.max(1, targetWidth);\r\n targetHeight = Math.max(1, targetHeight);\r\n\r\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c Canvas\r\n const canvas = document.createElement('canvas');\r\n \/\/ \u0423\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u043f\u043e\u0432\u043e\u0440\u043e\u0442 \u043f\u0440\u0438 \u0437\u0430\u0434\u0430\u043d\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u043a\u0430\u043d\u0432\u0430\u0441\u0430\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\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043b\u0438\u043c\u0438\u0442\u043e\u0432 Canvas\r\n const MAX_CANVAS_AREA = 16384 * 16384; \/\/ \u041f\u0440\u0438\u043c\u0435\u0440\u043d\u044b\u0439 \u043b\u0438\u043c\u0438\u0442 \u043f\u043b\u043e\u0449\u0430\u0434\u0438\r\n const MAX_CANVAS_DIM = 32767; \/\/ \u041b\u0438\u043c\u0438\u0442 \u043f\u043e \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u043e\u0440\u043e\u043d\u0435\r\n if (canvas.width <= 0 || canvas.height <= 0 ||\r\n canvas.width > MAX_CANVAS_DIM || canvas.height > MAX_CANVAS_DIM ||\r\n (canvas.width * canvas.height > MAX_CANVAS_AREA)) {\r\n showStatus(`Error processing \"${fileName}\": Resulting image dimensions (${canvas.width}x${canvas.height}) exceed browser limits. Try reducing size or removing rotation.`, 'error');\r\n return;\r\n }\r\n\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) {\r\n showStatus(`Error processing \"${fileName}\": Could not get 2D context for canvas.`, 'error');\r\n return;\r\n }\r\n\r\n try {\r\n \/\/ \u041e\u0447\u0438\u0441\u0442\u043a\u0430 \u0438\u043b\u0438 \u0444\u043e\u043d\r\n ctx.save(); \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430\r\n if (useBG || mimeType === 'image\/jpeg') { \/\/ JPEG \u0432\u0441\u0435\u0433\u0434\u0430 \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0444\u043e\u043d\u0430\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); \/\/ \u0414\u043b\u044f PNG\/WebP \u043f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u044b\u0439\r\n }\r\n\r\n \/\/ \u0426\u0435\u043d\u0442\u0440\u0438\u0440\u0443\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n ctx.translate(centerX, centerY);\r\n\r\n \/\/ \u041f\u0440\u0438\u043c\u0435\u043d\u044f\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n if (currentRotation !== 0) {\r\n ctx.rotate(currentRotation * Math.PI \/ 180);\r\n }\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n\r\n \/\/ \u0420\u0438\u0441\u0443\u0435\u043c \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u043e \u0441\u043c\u0435\u0449\u0435\u043d\u0438\u0435\u043c, \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u043e \u0431\u044b\u043b\u043e \u043f\u043e \u0446\u0435\u043d\u0442\u0440\u0443 \u043f\u043e\u0441\u043b\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439\r\n \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u0434\u043b\u044f drawImage - \u044d\u0442\u043e \u0440\u0430\u0437\u043c\u0435\u0440\u044b *\u0434\u043e* \u043f\u043e\u0432\u043e\u0440\u043e\u0442\u0430\r\n const drawX = -targetWidth \/ 2;\r\n const drawY = -targetHeight \/ 2;\r\n ctx.drawImage(\r\n img, \/\/ \u0418\u0441\u0445\u043e\u0434\u043d\u043e\u0435 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435\r\n 0, 0, originalImageDimensions.width, originalImageDimensions.height, \/\/ Source rect\r\n drawX, drawY, targetWidth, targetHeight \/\/ Destination rect (\u043c\u0430\u0441\u0448\u0442\u0430\u0431\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u043e\u0435)\r\n );\r\n\r\n ctx.restore(); \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 (\u0443\u0431\u0438\u0440\u0430\u0435\u043c translate, rotate, scale)\r\n\r\n showStatus(`Processing \"${fileName}\"... Encoding final image.`, 'info');\r\n\r\n \/\/ \u042d\u043a\u0441\u043f\u043e\u0440\u0442 \u0432 Data URL\r\n let exportQuality = quality;\r\n if (mimeType === 'image\/webp' && quality >= 0.99) {\r\n \/\/ \u0414\u043b\u044f WebP \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u043e 1.0 \u043c\u043e\u0436\u0435\u0442 \u043e\u0437\u043d\u0430\u0447\u0430\u0442\u044c lossless, \u043d\u043e \u043d\u0435 \u0432\u0441\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u044b \u044d\u0442\u043e \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u044e\u0442 \u044f\u0432\u043d\u043e \u0447\u0435\u0440\u0435\u0437 API.\r\n \/\/ \u0427\u0430\u0441\u0442\u043e 0.9 - 0.95 \u0434\u0430\u0435\u0442 \u043f\u043e\u0447\u0442\u0438 \u043d\u0435\u043e\u0442\u043b\u0438\u0447\u0438\u043c\u044b\u0439 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442 \u0441 \u043c\u0435\u043d\u044c\u0448\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u043c.\r\n console.log(`Attempting high-quality WebP encoding (quality: ${quality}). Note: True lossless might not be guaranteed via canvas API.`);\r\n } else if (mimeType === 'image\/jpeg') {\r\n console.log(`Encoding JPEG with quality: ${quality}`);\r\n } else {\r\n console.log(`Encoding PNG (lossless, quality setting ignored).`);\r\n }\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(\"Canvas returned empty data URL during encoding.\");\r\n }\r\n\r\n \/\/ \u0421\u043e\u0437\u0434\u0430\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u0441\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 = fileName.replace(\/\\.webp$\/i, ''); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c .webp\r\n let extension = mimeType.split('\/')[1];\r\n if (extension === 'jpeg') extension = 'jpg'; \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c .jpg \u0434\u043b\u044f jpeg\r\n link.download = `${originalName}_converted.${extension}`; \/\/ \u0418\u043c\u044f \u0444\u0430\u0439\u043b\u0430 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u043e\r\n link.textContent = `Download ${link.download}`;\r\n downloadLinkContainer.innerHTML = ''; \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u043f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0443\u044e \u0441\u0441\u044b\u043b\u043a\u0443\r\n downloadLinkContainer.appendChild(link);\r\n\r\n \/\/ \u0410\u0432\u0442\u043e-\u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n link.click();\r\n\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n\r\n } catch (error) {\r\n console.error(\"Error during canvas drawing or export:\", error);\r\n showStatus(`Error processing \"${fileName}\": ${error.message}. Check console for details.`, '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 data for \"${fileName}\". The file might be corrupted or not a valid WebP.`, 'error');\r\n };\r\n\r\n img.src = e.target.result; \/\/ \u0423\u0441\u0442\u0430\u043d\u0430\u0432\u043b\u0438\u0432\u0430\u0435\u043c \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a \u0434\u043b\u044f <img \/>\r\n };\r\n\r\n reader.onerror = function(err) {\r\n console.error(\"FileReader error:\", err);\r\n showStatus(`Error reading file \"${fileName}\".`, '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 \/\/ --- \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 statusArea.style.display = 'none'; \/\/ \u0423\u0431\u0435\u0434\u0438\u043c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u0443\u0441 \u0441\u043a\u0440\u044b\u0442 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\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 \/\/ \u0423\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0432\u0432\u043e\u0434\u043e\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439\r\n outputWidthInput.addEventListener('input', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputWidthInput.value && originalImageDimensions.width > 0) {\r\n \/\/ \u0415\u0441\u043b\u0438 \u0448\u0438\u0440\u0438\u043d\u0430 \u0432\u0432\u0435\u0434\u0435\u043d\u0430 \u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f, \u043e\u0447\u0438\u0449\u0430\u0435\u043c \u0432\u044b\u0441\u043e\u0442\u0443 \u0438\u043b\u0438 \u0441\u0447\u0438\u0442\u0430\u0435\u043c \u0435\u0435\r\n \/\/ outputHeightInput.value = ''; \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 - \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c\r\n \/\/ \u0411\u043e\u043b\u0435\u0435 \u0441\u043b\u043e\u0436\u043d\u044b\u0439 - \u043f\u043e\u0441\u0447\u0438\u0442\u0430\u0442\u044c, \u043d\u043e \u043c\u043e\u0436\u0435\u0442 \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0431\u0435\u0441\u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0439 \u0446\u0438\u043a\u043b, \u0435\u0441\u043b\u0438 \u043d\u0435 \u0430\u043a\u043a\u0443\u0440\u0430\u0442\u043d\u043e\r\n }\r\n });\r\n outputHeightInput.addEventListener('input', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputHeightInput.value && originalImageDimensions.height > 0) {\r\n \/\/ outputWidthInput.value = ''; \/\/ \u041f\u0440\u043e\u0441\u0442\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 - \u043e\u0447\u0438\u0441\u0442\u0438\u0442\u044c\r\n }\r\n });\r\n\r\n \/\/ \u041a\u043b\u0438\u043a \u043f\u043e \u0442\u0435\u043a\u0441\u0442\u0443 \u0440\u044f\u0434\u043e\u043c \u0441 \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430\u043c\u0438\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n useBackgroundColorCheckbox.addEventListener('change', toggleBackgroundColorPicker);\r\n\r\n \/\/ --- \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n \/\/ \u041e\u0431\u0449\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0434\u043b\u044f \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438 \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0438 (\u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d)\r\n function applyTransformation(transformFunc) {\r\n transformFunc(); \/\/ \u0412\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u043c \u0441\u0430\u043c\u0443 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e (\u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0435 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f)\r\n updateTransformButtonStates(); \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0432\u0438\u0434 \u043a\u043d\u043e\u043f\u043e\u043a\r\n \/\/ \u0415\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u0443\u0436\u0435 \u0437\u0430\u0433\u0440\u0443\u0436\u0435\u043d, \u0438\u043d\u0438\u0446\u0438\u0438\u0440\u0443\u0435\u043c \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u043a\u0443\r\n if (fileInput.files.length > 0) {\r\n handleFile(fileInput.files[0]); \/\/ \u041f\u0435\u0440\u0435\u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0442\u0435\u043a\u0443\u0449\u0438\u0439 \u0444\u0430\u0439\u043b \u0441 \u043d\u043e\u0432\u044b\u043c\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\u043c\u0438\r\n }\r\n }\r\n\r\n rotateBtn.addEventListener('click', () => applyTransformation(() => { currentRotation = (currentRotation + 90) % 360; }));\r\n flipHorizontalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedHorizontal = !isFlippedHorizontal; }));\r\n flipVerticalBtn.addEventListener('click', () => applyTransformation(() => { isFlippedVertical = !isFlippedVertical; }));\r\n resetTransformBtn.addEventListener('click', () => {\r\n \/\/ Reset \u043d\u0443\u0436\u043d\u043e \u043e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0442\u044c \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e, \u0442.\u043a. \u043e\u043d \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0432\u0441\u0435\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 if (fileInput.files.length > 0) {\r\n handleFile(fileInput.files[0]); \/\/ \u041f\u0435\u0440\u0435\u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u0441 \u0438\u0441\u0445\u043e\u0434\u043d\u044b\u043c\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\u043c\u0438\r\n }\r\n });\r\n\r\n \/\/ --- \u0412\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430 \u0447\u0435\u0440\u0435\u0437 input ---\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files && event.target.files.length > 0) {\r\n resetTransformations(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\r\n handleFile(event.target.files[0]);\r\n }\r\n else {\r\n console.log(\"File input cleared.\");\r\n resetInterface(); \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b\u044b \u043e\u0442\u043c\u0435\u043d\u0435\u043d\u044b\r\n }\r\n });\r\n\r\n \/\/ --- Drag and Drop ---\r\n uploadArea.addEventListener('dragover', (event) => {\r\n event.preventDefault(); \/\/ \u041d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0434\u043b\u044f \u0441\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u043d\u0438\u044f drop\r\n uploadArea.classList.add('drag-over');\r\n });\r\n\r\n uploadArea.addEventListener('dragleave', (event) => {\r\n event.preventDefault();\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0447\u0442\u043e \u0443\u0448\u043b\u0438 \u0438\u043c\u0435\u043d\u043d\u043e \u0438\u0437 \u0437\u043e\u043d\u044b, \u0430 \u043d\u0435 \u043d\u0430 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0439 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\r\n if (event.relatedTarget && !uploadArea.contains(event.relatedTarget)) {\r\n uploadArea.classList.remove('drag-over');\r\n } else if (!event.relatedTarget) { \/\/ \u0423\u0448\u043b\u0438 \u0437\u0430 \u043f\u0440\u0435\u0434\u0435\u043b\u044b \u043e\u043a\u043d\u0430\r\n uploadArea.classList.remove('drag-over');\r\n }\r\n });\r\n\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault();\r\n uploadArea.classList.remove('drag-over');\r\n if (event.dataTransfer && 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 \u043f\u0440\u0438 Drop (\u0442\u043e\u043b\u044c\u043a\u043e WebP)\r\n const fileNameDrop = droppedFile.name || 'Dropped file';\r\n const fileMimeTypeDrop = droppedFile.type || '';\r\n const isWebPDrop = \/\\.webp$\/i.test(fileNameDrop) || fileMimeTypeDrop === 'image\/webp';\r\n\r\n if (isWebPDrop) {\r\n \/\/ \u041f\u043e\u043c\u0435\u0449\u0430\u0435\u043c \u0444\u0430\u0439\u043b \u0432 input, \u0447\u0442\u043e\u0431\u044b change \u0441\u0440\u0430\u0431\u043e\u0442\u0430\u043b \u0435\u0434\u0438\u043d\u043e\u043e\u0431\u0440\u0430\u0437\u043d\u043e (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e, \u043d\u043e \u0443\u0434\u043e\u0431\u043d\u043e)\r\n fileInput.files = event.dataTransfer.files;\r\n resetTransformations(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0434\u0440\u043e\u043f\u0435 \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\r\n handleFile(droppedFile);\r\n } else {\r\n showStatus(`Incorrect file format dropped. Please drop a WebP file (received: ${fileNameDrop}, type: ${fileMimeTypeDrop || 'unknown'}).`, 'error');\r\n fileInput.value = ''; \/\/ \u041e\u0447\u0438\u0441\u0442\u0438\u0442\u044c input \u043d\u0430 \u0441\u043b\u0443\u0447\u0430\u0439, \u0435\u0441\u043b\u0438 \u0442\u0430\u043c \u0447\u0442\u043e-\u0442\u043e \u0431\u044b\u043b\u043e\r\n }\r\n } else {\r\n console.log(\"Drop event without files.\");\r\n resetInterface();\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 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates(); \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c \u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0435 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n resetInterface(); \/\/ \u0423\u0431\u0435\u0434\u0438\u0442\u044c\u0441\u044f, \u0447\u0442\u043e \u0441\u0442\u0430\u0442\u0443\u0441 \u0441\u043a\u0440\u044b\u0442 \u043f\u0440\u0438 \u043f\u0435\u0440\u0432\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\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-0d46798 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"0d46798\" 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-989b29d\" data-id=\"989b29d\" 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-a123126 elementor-widget elementor-widget-text-editor\" data-id=\"a123126\" 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\/avif-to-png\/\">Avif a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/gif-to-png\/\">GIF 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-304c542 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"304c542\" 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-dff8af1\" data-id=\"dff8af1\" 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-834225d elementor-widget elementor-widget-text-editor\" data-id=\"834225d\" 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-0fb2ffc 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=\"0fb2ffc\" 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-7b8c91f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"7b8c91f\" 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-546ec88\" data-id=\"546ec88\" 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-6e2efc8\" data-id=\"6e2efc8\" 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-47e55af elementor-widget elementor-widget-text-editor\" data-id=\"47e55af\" 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>\u00bfQuieres convertir WebP a PNG r\u00e1pidamente y sin perder calidad? Usa nuestro convertidor de im\u00e1genes WebP online gratuito para obtener archivos PNG n\u00edtidos en segundos: sin registro, sin software y sin l\u00edmites.<\/p><h2>\u00bfQu\u00e9 es un archivo WebP?<\/h2><p>WebP es un formato de imagen moderno desarrollado por Google que ofrece una excelente compresi\u00f3n manteniendo la calidad de la imagen. Se usa ampliamente en sitios web para reducir los tiempos de carga y ahorrar ancho de banda.<\/p><p>Sin embargo, a\u00fan no todo el software ni todas las plataformas son totalmente compatibles con WebP. Ah\u00ed es donde entra en juego PNG: un formato universalmente compatible, perfecto para editar, compartir y dise\u00f1ar.<\/p><h2>\u00bfPor qu\u00e9 convertir WebP a PNG?<\/h2><p>He aqu\u00ed por qu\u00e9 es posible que desees convertir tus archivos WebP a PNG:<\/p><ul><li><strong>Compatibilidad:<\/strong> PNG funciona en todas partes: en navegadores, aplicaciones, editores y dispositivos.<\/li><li><strong>Calidad sin p\u00e9rdida:<\/strong> PNG mantiene cada p\u00edxel intacto, perfecto para editar e imprimir.<\/li><li><strong>Apoyo a la transparencia:<\/strong> Ambos formatos admiten transparencia, pero PNG es m\u00e1s confiable.<\/li><li><strong>Mejor para el dise\u00f1o:<\/strong> PNG es el formato preferido en herramientas de dise\u00f1o como Photoshop, Figma y Canva.<\/li><\/ul><p>Utilice nuestro convertidor en l\u00ednea de WebP a PNG para cambiar de formato instant\u00e1neamente sin p\u00e9rdida de calidad.<\/p><h2>C\u00f3mo convertir WebP a PNG en l\u00ednea<\/h2><p>Siga estos sencillos pasos para convertir su imagen en segundos:<\/p><ol><li><strong>Sube tu archivo WebP<\/strong> \u2013 Arr\u00e1strelo y su\u00e9ltelo o selecci\u00f3nelo desde su dispositivo.<\/li><li><strong>Espere la conversi\u00f3n instant\u00e1nea<\/strong> \u2013 El archivo se procesa directamente en su navegador.<\/li><li><strong>Descargar la imagen PNG<\/strong> \u2013 Haga clic para guardar su archivo PNG de alta calidad.<\/li><\/ol><p>Sin instalaciones, sin marcas de agua y privacidad total: convierta WebP a PNG en l\u00ednea con facilidad.<\/p><h2>Beneficios de nuestro convertidor en l\u00ednea de WebP a PNG<\/h2><ul><li><strong>100% Gratis<\/strong> \u2013 Sin costes, sin l\u00edmites, sin publicidad.<\/li><li><strong>R\u00e1pido y eficiente<\/strong> \u2013 Conversi\u00f3n con un solo clic en segundos.<\/li><li><strong>No se necesita software<\/strong> \u2013 Funciona completamente en su navegador.<\/li><li><strong>Seguro y privado<\/strong> \u2013 Los archivos se procesan localmente, no se cargan.<\/li><li><strong>Salida de alta calidad<\/strong> \u2013 No hay p\u00e9rdida de compresi\u00f3n durante la conversi\u00f3n.<\/li><li><strong>Compatibilidad entre dispositivos<\/strong> \u2013 \u00daselo en Windows, Mac, Android, iPhone y m\u00e1s.<\/li><\/ul><h2>WebP vs PNG: Comparaci\u00f3n r\u00e1pida<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Caracter\u00edstica<\/th><th>WebP<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Compresi\u00f3n<\/td><td>Con p\u00e9rdida o sin p\u00e9rdida<\/td><td>Sin p\u00e9rdida<\/td><\/tr><tr><td>Transparencia<\/td><td>Apoyado<\/td><td>Apoyado<\/td><\/tr><tr><td>Tama\u00f1o del archivo<\/td><td>Menor<\/td><td>M\u00e1s grande<\/td><\/tr><tr><td>Compatibilidad<\/td><td>Limitado (aplicaciones\/navegadores m\u00e1s antiguos)<\/td><td>Universal<\/td><\/tr><tr><td>Mejor para<\/td><td>Optimizaci\u00f3n web<\/td><td>Edici\u00f3n, dise\u00f1o, compartir<\/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-b0d2bb3\" data-id=\"b0d2bb3\" 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>Convertidor de WEBP a PNG. Convierte WEBP a PNG gratis en l\u00ednea. Simplemente sube tus im\u00e1genes WEBP a continuaci\u00f3n y obt\u00e9n archivos PNG de alta calidad en segundos.<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4887,"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-2833","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/2833","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=2833"}],"version-history":[{"count":89,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/2833\/revisions"}],"predecessor-version":[{"id":4980,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/2833\/revisions\/4980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media\/4887"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media?parent=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}