WebP-zu-PNG-Konverter (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 WebP-Bild hochladen\r\n <\/label>\r\n <div class=\"webp-upload-hint\"> \r\n <span class=\"main-hint\">oder legen Sie eine Datei hier ab<\/span>\r\n <span class=\"sub-hint\">(Konvertiert WebP-Dateien standardm\u00e4\u00dfig in PNG)<\/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 Erweiterte Einstellungen \u25bc\r\n <\/span>\r\n <div class=\"webp-settings-content\" id=\"settingsContent\"> \r\n \r\n <div class=\"setting-group\">\r\n <h4>Ausgabeformat und -qualit\u00e4t<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Format:<\/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\">Qualit\u00e4t:<\/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>Hinweis: PNG ist verlustfrei, der Qualit\u00e4tsregler wirkt sich nur auf JPEG\/WebP aus.<\/small>\r\n <small>Hinweis: Metadaten (wie EXIF) von WebP k\u00f6nnen verloren gehen.<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Gr\u00f6\u00dfe \u00e4ndern<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Breite:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"Auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">H\u00f6he:<\/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\">Seitenverh\u00e4ltnis beibehalten<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Hintergrund<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Hintergrundfarbe hinzuf\u00fcgen:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(N\u00fctzlich zum Entfernen von Transparenz oder bei der Ausgabe im JPEG-Format)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Verwandeln<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"90\u00b0 im Uhrzeigersinn drehen\">90\u00b0 im Uhrzeigersinn drehen<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Horizontal spiegeln\">Horizontal spiegeln<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Vertikal spiegeln\">Vertikal spiegeln<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Transformationen zur\u00fccksetzen\">Transformationen zur\u00fccksetzen<\/button>\r\n <\/div>\r\n <small>(Die Drehung kann sich auf die Abmessungen auswirken, wenn das Seitenverh\u00e4ltnis nicht beibehalten wird.)<\/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>Andere Formate: <a href=\"https:\/\/pngate.com\/de\/avif-to-png\/\">Avif zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/gif-to-png\/\">Gif zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/jpeg-to-png\/\">JPEG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/svg-to-png\/\">SVG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/heic-to-png\/\">HEIC zu 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>Fanden Sie dies n\u00fctzlich? Teilen Sie es!<\/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\tTelegramm\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\tTwitter\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>M\u00f6chten Sie WebP schnell und ohne Qualit\u00e4tsverlust in PNG konvertieren? Nutzen Sie unseren kostenlosen Online-WebP-Bildkonverter und erhalten Sie in Sekundenschnelle gestochen scharfe PNG-Dateien \u2013 ganz ohne Anmeldung, Software und Einschr\u00e4nkungen.<\/p><h2>Was ist eine WebP-Datei?<\/h2><p>WebP ist ein modernes Bildformat von Google, das eine hervorragende Komprimierung bei gleichbleibender Bildqualit\u00e4t bietet. Es wird h\u00e4ufig auf Websites verwendet, um Ladezeiten zu verk\u00fcrzen und Bandbreite zu sparen.<\/p><p>Allerdings unterst\u00fctzen noch nicht alle Softwareprogramme und Plattformen WebP vollst\u00e4ndig. Hier kommt PNG ins Spiel \u2013 ein universell kompatibles Format, das sich perfekt zum Bearbeiten, Teilen und Gestalten eignet.<\/p><h2>Warum WebP in PNG konvertieren?<\/h2><p>Aus folgenden Gr\u00fcnden m\u00f6chten Sie Ihre WebP-Dateien m\u00f6glicherweise in PNG konvertieren:<\/p><ul><li><strong>Kompatibilit\u00e4t:<\/strong> PNG funktioniert \u00fcberall \u2013 in Browsern, Apps, Editoren und Ger\u00e4ten.<\/li><li><strong>Verlustfreie Qualit\u00e4t:<\/strong> PNG beh\u00e4lt jedes Pixel bei und ist perfekt zum Bearbeiten und Drucken geeignet.<\/li><li><strong>Transparenzunterst\u00fctzung:<\/strong> Beide Formate unterst\u00fctzen Transparenz, aber PNG ist zuverl\u00e4ssiger.<\/li><li><strong>Besser f\u00fcrs Design:<\/strong> PNG wird in Designtools wie Photoshop, Figma und Canva bevorzugt.<\/li><\/ul><p>Verwenden Sie unseren Online-Konverter von WebP zu PNG, um sofort und ohne Qualit\u00e4tsverlust zwischen Formaten zu wechseln.<\/p><h2>So konvertieren Sie WebP online in PNG<\/h2><p>Befolgen Sie diese einfachen Schritte, um Ihr Bild in Sekundenschnelle zu konvertieren:<\/p><ol><li><strong>Laden Sie Ihre WebP-Datei hoch<\/strong> \u2013 Ziehen Sie es per Drag & Drop oder w\u00e4hlen Sie es von Ihrem Ger\u00e4t aus.<\/li><li><strong>Warten Sie auf die sofortige Konvertierung<\/strong> \u2013 Die Datei wird direkt in Ihrem Browser verarbeitet.<\/li><li><strong>Laden Sie das PNG-Bild herunter<\/strong> \u2013 Klicken Sie, um Ihre hochwertige PNG-Datei zu speichern.<\/li><\/ol><p>Keine Installationen, keine Wasserzeichen und vollst\u00e4ndiger Datenschutz \u2013 konvertieren Sie WebP ganz einfach online in PNG.<\/p><h2>Vorteile unseres Online-WebP-zu-PNG-Konverters<\/h2><ul><li><strong>100% Kostenlos<\/strong> \u2013 Keine Kosten, keine Beschr\u00e4nkungen, keine Werbung.<\/li><li><strong>Schnell & effizient<\/strong> \u2013 Konvertierung mit einem Klick in Sekunden.<\/li><li><strong>Keine Software erforderlich<\/strong> \u2013 Funktioniert vollst\u00e4ndig in Ihrem Browser.<\/li><li><strong>Sicher und privat<\/strong> \u2013 Dateien werden lokal verarbeitet, nicht hochgeladen.<\/li><li><strong>Hochwertige Ausgabe<\/strong> \u2013 Kein Kompressionsverlust w\u00e4hrend der Konvertierung.<\/li><li><strong>Ger\u00e4te\u00fcbergreifende Unterst\u00fctzung<\/strong> \u2013 Verwendung auf Windows, Mac, Android, iPhone und mehr.<\/li><\/ul><h2>WebP vs. PNG: Schneller Vergleich<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Besonderheit<\/th><th>WebP<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Kompression<\/td><td>Verlustbehaftet oder verlustfrei<\/td><td>Verlustfrei<\/td><\/tr><tr><td>Transparenz<\/td><td>Unterst\u00fctzt<\/td><td>Unterst\u00fctzt<\/td><\/tr><tr><td>Dateigr\u00f6\u00dfe<\/td><td>Kleiner<\/td><td>Gr\u00f6\u00dfer<\/td><\/tr><tr><td>Kompatibilit\u00e4t<\/td><td>Eingeschr\u00e4nkt (\u00e4ltere Apps\/Browser)<\/td><td>Universal<\/td><\/tr><tr><td>Am besten f\u00fcr<\/td><td>Weboptimierung<\/td><td>Bearbeiten, Gestalten, Teilen<\/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>WEBP-zu-PNG-Konverter: Konvertieren Sie WEBP kostenlos online in PNG. Laden Sie einfach Ihre WEBP-Bilder hoch und erhalten Sie in Sekundenschnelle hochwertige PNG-Dateien. WebP zu<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\/de\/wp-json\/wp\/v2\/pages\/2833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/comments?post=2833"}],"version-history":[{"count":89,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/2833\/revisions"}],"predecessor-version":[{"id":4980,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/2833\/revisions\/4980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media\/4887"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media?parent=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}