Convertisseur WebP en 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 T\u00e9l\u00e9charger une image WebP\r\n <\/label>\r\n <div class=\"webp-upload-hint\"> \r\n <span class=\"main-hint\">ou d\u00e9posez un fichier ici<\/span>\r\n <span class=\"sub-hint\">(Convertit les fichiers WebP en PNG par d\u00e9faut)<\/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 Param\u00e8tres avanc\u00e9s \u25bc\r\n <\/span>\r\n <div class=\"webp-settings-content\" id=\"settingsContent\"> \r\n \r\n <div class=\"setting-group\">\r\n <h4>Format et qualit\u00e9 de sortie<\/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\u00e9:<\/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>Remarque\u00a0: le format PNG est sans perte, le curseur de qualit\u00e9 affecte uniquement JPEG\/WebP.<\/small>\r\n <small>Remarque\u00a0: les m\u00e9tadonn\u00e9es (comme EXIF) de WebP peuvent \u00eatre perdues.<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Redimensionner<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Largeur:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Hauteur:<\/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\">Maintenir le rapport hauteur\/largeur<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Arri\u00e8re-plan<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Ajouter une couleur d'arri\u00e8re-plan\u00a0:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(Utile pour supprimer la transparence ou pour la sortie au format JPEG)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformer<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Rotation de 90\u00b0 dans le sens des aiguilles d'une montre\">Rotation de 90\u00b0 dans le sens des aiguilles d'une montre<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Retourner horizontalement\">Retourner horizontalement<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Retourner verticalement\">Retourner verticalement<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"R\u00e9initialiser les transformations\">R\u00e9initialiser les transformations<\/button>\r\n <\/div>\r\n <small>(La rotation peut affecter les dimensions si le rapport hauteur\/largeur n'est pas maintenu)<\/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>Autres formats : <a href=\"https:\/\/pngate.com\/fr\/avif-to-png\/\">Avif vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/gif-to-png\/\">Gif en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/jpeg-to-png\/\">JPEG en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/svg-to-png\/\">SVG en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/heic-to-png\/\">HEIC vers 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>Vous avez trouv\u00e9 cela utile\u00a0? Partagez-le\u00a0!<\/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\tT\u00e9l\u00e9gramme\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\tGazouillement\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>Vous souhaitez convertir rapidement des fichiers WebP en PNG sans perte de qualit\u00e9\u00a0? Utilisez notre convertisseur d'images WebP en ligne gratuit pour obtenir des fichiers PNG nets en quelques secondes\u00a0: sans inscription, sans logiciel et sans limite.<\/p><h2>Qu'est-ce qu'un fichier WebP\u00a0?<\/h2><p>WebP est un format d'image moderne d\u00e9velopp\u00e9 par Google qui offre une excellente compression tout en pr\u00e9servant la qualit\u00e9 de l'image. Il est largement utilis\u00e9 sur les sites web pour r\u00e9duire les temps de chargement et \u00e9conomiser la bande passante.<\/p><p>Cependant, tous les logiciels et plateformes ne prennent pas encore pleinement en charge WebP. C'est l\u00e0 qu'intervient le PNG\u00a0: un format universellement compatible, id\u00e9al pour l'\u00e9dition, le partage et la conception.<\/p><h2>Pourquoi convertir WebP en PNG\u00a0?<\/h2><p>Voici pourquoi vous souhaiterez peut-\u00eatre convertir vos fichiers WebP en PNG\u00a0:<\/p><ul><li><strong>Compatibilit\u00e9:<\/strong> PNG fonctionne partout : dans les navigateurs, les applications, les \u00e9diteurs et les appareils.<\/li><li><strong>Qualit\u00e9 sans perte :<\/strong> PNG conserve chaque pixel intact, parfait pour l'\u00e9dition et l'impression.<\/li><li><strong>Support de transparence :<\/strong> Les deux formats prennent en charge la transparence, mais le format PNG est plus fiable.<\/li><li><strong>Meilleur pour la conception :<\/strong> Le format PNG est privil\u00e9gi\u00e9 dans les outils de conception tels que Photoshop, Figma et Canva.<\/li><\/ul><p>Utilisez notre convertisseur WebP vers PNG en ligne pour changer de format instantan\u00e9ment sans perte de qualit\u00e9.<\/p><h2>Comment convertir un fichier WebP en PNG en ligne<\/h2><p>Suivez ces \u00e9tapes simples pour convertir votre image en quelques secondes\u00a0:<\/p><ol><li><strong>T\u00e9l\u00e9chargez votre fichier WebP<\/strong> \u2013 Faites-le glisser et d\u00e9posez-le ou s\u00e9lectionnez-le depuis votre appareil.<\/li><li><strong>Attendez la conversion instantan\u00e9e<\/strong> \u2013 Le fichier est trait\u00e9 directement dans votre navigateur.<\/li><li><strong>T\u00e9l\u00e9charger l'image PNG<\/strong> \u2013 Cliquez pour enregistrer votre fichier PNG de haute qualit\u00e9.<\/li><\/ol><p>Aucune installation, aucun filigrane et confidentialit\u00e9 totale : convertissez facilement WebP en PNG en ligne.<\/p><h2>Avantages de notre convertisseur WebP en PNG en ligne<\/h2><ul><li><strong>100% Gratuit<\/strong> \u2013 Sans frais, sans limites, sans publicit\u00e9.<\/li><li><strong>Rapide et efficace<\/strong> \u2013 Conversion en un clic en quelques secondes.<\/li><li><strong>Aucun logiciel n\u00e9cessaire<\/strong> \u2013 Fonctionne enti\u00e8rement dans votre navigateur.<\/li><li><strong>S\u00fbr et priv\u00e9<\/strong> \u2013 Les fichiers sont trait\u00e9s localement et non t\u00e9l\u00e9charg\u00e9s.<\/li><li><strong>Sortie de haute qualit\u00e9<\/strong> \u2013 Aucune perte de compression lors de la conversion.<\/li><li><strong>Prise en charge multi-appareils<\/strong> \u2013 \u00c0 utiliser sur Windows, Mac, Android, iPhone et plus encore.<\/li><\/ul><h2>WebP vs PNG\u00a0: comparaison rapide<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Fonctionnalit\u00e9<\/th><th>WebP<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Compression<\/td><td>Avec ou sans perte<\/td><td>Sans perte<\/td><\/tr><tr><td>Transparence<\/td><td>Soutenu<\/td><td>Soutenu<\/td><\/tr><tr><td>Taille du fichier<\/td><td>Plus petit<\/td><td>Plus grand<\/td><\/tr><tr><td>Compatibilit\u00e9<\/td><td>Limit\u00e9 (anciennes applications\/navigateurs)<\/td><td>Universel<\/td><\/tr><tr><td>Id\u00e9al pour<\/td><td>Optimisation Web<\/td><td>\u00c9dition, conception, partage<\/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>Convertisseur WEBP en PNG\u00a0: convertissez gratuitement vos images WEBP en PNG en ligne. T\u00e9l\u00e9chargez simplement vos images WEBP ci-dessous et obtenez des fichiers PNG de haute qualit\u00e9 en quelques secondes.<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\/fr\/wp-json\/wp\/v2\/pages\/2833","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/comments?post=2833"}],"version-history":[{"count":89,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/2833\/revisions"}],"predecessor-version":[{"id":4980,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/2833\/revisions\/4980"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media\/4887"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media?parent=2833"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}