Convertisseur GIF<\/title>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n .gif-converter-wrapper {\r\n max-width: 550px;\r\n margin: 0px auto 30px auto;\r\n font-family: sans-serif;\r\n font-size: 16px;\r\n }\r\n\r\n \/* --- \u0417\u043e\u043d\u0430 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .gif-upload-area {\r\n background-color: #ffffff;\r\n border-radius: 20px;\r\n padding: 80px 60px 60px 60px;\r\n text-align: center;\r\n border: 2px dashed #d0d4dc;\r\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);\r\n transition: border-color 0.3s ease, background-color 0.3s ease;\r\n position: relative;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: center;\r\n min-height: 200px;\r\n }\r\n .gif-upload-area.drag-over {\r\n border-color: #007bff;\r\n background-color: #f8f9fa;\r\n }\r\n \/* --- \u0421\u0442\u0438\u043b\u044c \u0434\u043b\u044f \u043e\u0448\u0438\u0431\u043a\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438 --- *\/\r\n .gif-upload-area.upload-error {\r\n border-color: #dc3545 !important; \/* \u041a\u0440\u0430\u0441\u043d\u0430\u044f \u0440\u0430\u043c\u043a\u0430 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435 *\/\r\n \/* background-color: #fff8f8; *\/ \/* \u041b\u0435\u0433\u043a\u0438\u0439 \u043a\u0440\u0430\u0441\u043d\u044b\u0439 \u0444\u043e\u043d (\u043e\u043f\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e) *\/\r\n }\r\n .gif-upload-area input[type=\"file\"] { display: none; }\r\n .gif-upload-button {\r\n display: inline-block;\r\n background-color: #007bff;\r\n color: #ffffff;\r\n padding: 12px 30px;\r\n border-radius: 50px;\r\n font-size: 1em;\r\n font-weight: bold;\r\n cursor: pointer;\r\n transition: background-color 0.3s ease, transform 0.2s ease;\r\n margin-bottom: 15px;\r\n border: none; outline: none;\r\n }\r\n .gif-upload-button:hover { background-color: #0056b3; }\r\n .gif-upload-button:active { transform: scale(0.98); }\r\n .gif-upload-hint { color: #6c757d; margin: 0; }\r\n .gif-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .gif-upload-hint .main-hint { font-size: 1.0em; }\r\n .gif-upload-hint .sub-hint { font-size: 0.85em; }\r\n\r\n \/* --- \u0421\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a --- *\/\r\n .gif-converter-settings { margin-top: 15px; text-align: center; }\r\n .gif-settings-toggle {\r\n cursor: pointer; color: #007bff; text-decoration: none; border: 1px solid #007bff;\r\n padding: 8px 15px; border-radius: 20px; display: inline-block; margin-bottom: 15px;\r\n font-size: 0.9em; transition: background-color 0.3s, color 0.3s;\r\n }\r\n .gif-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n .gif-settings-content {\r\n display: none; padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #fdfdfd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n text-align: left; font-size: 0.9em;\r\n }\r\n .setting-group {\r\n margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee;\r\n }\r\n .setting-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }\r\n .setting-group h4 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: #333; }\r\n .gif-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }\r\n .gif-settings-content .inline-label {\r\n display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px;\r\n }\r\n small { color: #6c757d; display: block; margin-top: 8px; line-height: 1.4; }\r\n .hidden { display: none !important; }\r\n\r\n \/* === \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER (v5.5) === *\/\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"] {\r\n background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px;\r\n padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle;\r\n font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n width: 80px; margin-right: 10px; display: inline-block;\r\n }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n\r\n .gif-converter-wrapper .gif-settings-content select {\r\n appearance: none; -webkit-appearance: none; -moz-appearance: none;\r\n background-color: #f0f0f0 !important; color: #333 !important;\r\n border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px;\r\n margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit;\r\n line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease;\r\n width: auto; min-width: 110px; display: inline-block; cursor: pointer;\r\n background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');\r\n background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px;\r\n }\r\n .gif-converter-wrapper .gif-settings-content select::-ms-expand { display: none; }\r\n .gif-converter-wrapper .gif-settings-content select option {\r\n background-color: #f0f0f0; color: #333; padding: 5px 10px;\r\n }\r\n .gif-converter-wrapper .gif-settings-content select:focus,\r\n .gif-converter-wrapper .gif-settings-content input[type=\"number\"]:focus {\r\n outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);\r\n }\r\n \/* === \u041a\u041e\u041d\u0415\u0426 \u0421\u0422\u0418\u041b\u0415\u0419 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER === *\/\r\n\r\n \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u043f\u0443\u0442\u044b *\/\r\n .gif-settings-content input[type=\"color\"],\r\n .gif-settings-content input[type=\"range\"] {\r\n margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px;\r\n width: 100%; box-sizing: border-box;\r\n }\r\n .gif-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .gif-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .gif-settings-content input[type=\"checkbox\"] {\r\n margin-right: 5px; vertical-align: middle; width: 16px; height: 16px;\r\n }\r\n .aspect-ratio-label, .bg-color-label {\r\n font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer;\r\n }\r\n .quality-setting { display: flex; align-items: center; gap: 10px; margin-top: 10px; }\r\n .quality-setting label { margin-bottom: 0; }\r\n .quality-setting input[type=\"range\"] { flex-grow: 1; margin-bottom: 0; }\r\n .quality-setting span { min-width: 30px; text-align: right; font-weight: bold; }\r\n .transform-buttons { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .transform-buttons button {\r\n padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc;\r\n background-color: #fff; color: #333; border-radius: 4px;\r\n transition: background-color 0.2s, border-color 0.2s, color 0.2s;\r\n }\r\n .transform-buttons button:hover { border-color: #999; background-color: #f0f0f0; color: #333; }\r\n .transform-buttons button:active { background-color: #e0e0e0; }\r\n .transform-buttons button:disabled { color: #999; cursor: not-allowed; background-color: #f8f8f8; border-color: #ddd; }\r\n\r\n \/* --- \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f --- *\/\r\n .gif-converter-status-area {\r\n margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n }\r\n .gif-converter-status {\r\n font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em;\r\n line-height: 1.5; word-wrap: break-word;\r\n }\r\n .gif-converter-status.success { color: #155724; font-weight: bold; }\r\n .gif-converter-status.error { color: #721c24; font-weight: bold; }\r\n .gif-converter-download-area a {\r\n display: inline-block; padding: 10px 25px; background-color: #28a745; color: #fff;\r\n text-decoration: none; border-radius: 50px; font-weight: bold; font-size: 0.95em;\r\n transition: background-color 0.3s ease, transform 0.2s ease; border: none; cursor: pointer;\r\n }\r\n .gif-converter-download-area a:hover { background-color: #218838; }\r\n .gif-converter-download-area a:active { transform: scale(0.98); }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"gif-converter-wrapper\"> \r\n\r\n \r\n <div class=\"gif-upload-area\" id=\"gifUploadArea\">\r\n <input type=\"file\" id=\"gifFileInput\" accept=\".gif\" \/>\r\n <label for=\"gifFileInput\" class=\"gif-upload-button\" role=\"button\" tabindex=\"0\">\r\n T\u00e9l\u00e9charger une image GIF\r\n <\/label>\r\n <div class=\"gif-upload-hint\">\r\n <span class=\"main-hint\">ou d\u00e9posez un fichier ici<\/span>\r\n <span class=\"sub-hint\">(Convertit la premi\u00e8re image du GIF)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"gif-converter-settings\">\r\n <span class=\"gif-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\">\r\n Param\u00e8tres avanc\u00e9s \u25bc\r\n <\/span>\r\n <div class=\"gif-settings-content\" id=\"settingsContent\">\r\n \r\n \r\n <div class=\"setting-group\">\r\n <h4>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\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 <\/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\">Utiliser la 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 les formats sans transparence comme JPEG, ou pour supprimer la transparence existante)<\/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=\"gif-converter-status-area\" id=\"statusArea\" style=\"display: none;\">\r\n <div class=\"gif-converter-status\" id=\"converterStatus\"><\/div>\r\n <div class=\"gif-converter-download-area\" id=\"downloadLinkContainer\"><\/div>\r\n <\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ --- \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM ---\r\n const uploadArea = document.getElementById('gifUploadArea');\r\n const fileInput = document.getElementById('gifFileInput');\r\n const statusArea = document.getElementById('statusArea');\r\n const statusMessage = document.getElementById('converterStatus');\r\n const downloadLinkContainer = document.getElementById('downloadLinkContainer');\r\n const toggleSettingsBtn = document.getElementById('toggleSettingsBtn');\r\n const settingsContent = document.getElementById('settingsContent');\r\n const outputFormatSelect = document.getElementById('outputFormat');\r\n const qualityControlDiv = document.getElementById('qualityControl');\r\n const outputQualitySlider = document.getElementById('outputQuality');\r\n const qualityValueSpan = document.getElementById('qualityValue');\r\n const outputWidthInput = document.getElementById('outputWidth');\r\n const outputHeightInput = document.getElementById('outputHeight');\r\n const maintainAspectRatioCheckbox = document.getElementById('maintainAspectRatio');\r\n const useBackgroundColorCheckbox = document.getElementById('useBackgroundColor');\r\n const backgroundColorPicker = document.getElementById('backgroundColor');\r\n const rotateBtn = document.getElementById('rotateBtn');\r\n const flipHorizontalBtn = document.getElementById('flipHorizontalBtn');\r\n const flipVerticalBtn = document.getElementById('flipVerticalBtn');\r\n const resetTransformBtn = document.getElementById('resetTransformBtn');\r\n\r\n \/\/ --- \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u043e\u0432 ---\r\n const elements = { uploadArea, fileInput, statusArea, statusMessage, downloadLinkContainer, toggleSettingsBtn, settingsContent, outputFormatSelect, qualityControlDiv, outputQualitySlider, qualityValueSpan, outputWidthInput, outputHeightInput, maintainAspectRatioCheckbox, useBackgroundColorCheckbox, backgroundColorPicker, rotateBtn, flipHorizontalBtn, flipVerticalBtn, resetTransformBtn };\r\n for (const key in elements) {\r\n if (!elements[key]) {\r\n console.error(`Converter init error: Element with ID or reference \"${key}\" not found.`);\r\n if (uploadArea) uploadArea.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n else document.body.innerHTML = '<p style=\"color:red;\">Initialization Error! UI elements missing.<\/p>';\r\n return;\r\n }\r\n }\r\n\r\n \/\/ --- \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n let currentRotation = 0; \/\/ \u0432 \u0433\u0440\u0430\u0434\u0443\u0441\u0430\u0445 (0, 90, 180, 270)\r\n let isFlippedHorizontal = false;\r\n let isFlippedVertical = false;\r\n let originalImageDimensions = { width: 0, height: 0 };\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 ---\r\n\r\n \/\/ \u0424\u0443\u043d\u043a\u0446\u0438\u044f \u0441\u0431\u0440\u043e\u0441\u0430 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430\r\n function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'gif-converter-status';\r\n downloadLinkContainer.innerHTML = '';\r\n statusArea.style.display = 'none';\r\n fileInput.value = ''; \/\/ \u0421\u0431\u0440\u043e\u0441 \u0432\u044b\u0431\u043e\u0440\u0430 \u0444\u0430\u0439\u043b\u0430\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438, \u0435\u0441\u043b\u0438 \u0431\u044b\u043b\u0430\r\n resetTransformations();\r\n updateTransformButtonStates();\r\n \/\/ \u0417\u0434\u0435\u0441\u044c \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0441\u0431\u0440\u043e\u0441 \u0434\u0440\u0443\u0433\u0438\u0445 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a, \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e\r\n }\r\n\r\n \/\/ \u041e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0442\u0430\u0442\u0443\u0441\u0430\r\n function showStatus(message, type = 'info') {\r\n const prefix = type === 'error' ? '\u274c ' : (type === 'success' ? '\u2705 ' : '\u23f3 ');\r\n statusMessage.textContent = prefix + message;\r\n statusMessage.className = 'gif-converter-status'; \/\/ \u0421\u0431\u0440\u043e\u0441 \u043a\u043b\u0430\u0441\u0441\u043e\u0432\r\n if (type === 'success') {\r\n statusMessage.classList.add('success');\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 \u043f\u0440\u0438 \u0443\u0441\u043f\u0435\u0445\u0435\r\n } else if (type === 'error') {\r\n statusMessage.classList.add('error');\r\n uploadArea.classList.add('upload-error'); \/\/ \u0414\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u043a\u0440\u0430\u0441\u043d\u0443\u044e \u0440\u0430\u043c\u043a\u0443 \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0435\r\n } else {\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0440\u0430\u043c\u043a\u0443 \u043e\u0448\u0438\u0431\u043a\u0438 \u0434\u043b\u044f info\r\n }\r\n\r\n if (type !== 'success' && type !== 'info') { \/\/ \u041e\u0447\u0438\u0449\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f \u043f\u0440\u0438 \u043e\u0448\u0438\u0431\u043a\u0430\u0445\r\n downloadLinkContainer.innerHTML = '';\r\n }\r\n statusArea.style.display = 'block'; \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u0431\u043b\u043e\u043a \u0441\u0442\u0430\u0442\u0443\u0441\u0430\r\n }\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f UI \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043a (\u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439) ---\r\n function toggleSettings() {\r\n const isHidden = settingsContent.style.display === 'none' || settingsContent.style.display === '';\r\n settingsContent.style.display = isHidden ? 'block' : 'none';\r\n toggleSettingsBtn.textContent = isHidden ? 'Advanced Settings \u25b2' : 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', isHidden ? 'true' : 'false');\r\n settingsContent.setAttribute('aria-hidden', isHidden ? 'false' : 'true');\r\n }\r\n function updateQualityControlVisibility() {\r\n const selectedFormat = outputFormatSelect.value;\r\n const isQualityApplicable = selectedFormat === 'image\/jpeg' || selectedFormat === 'image\/webp';\r\n qualityControlDiv.classList.toggle('hidden', !isQualityApplicable);\r\n qualityControlDiv.setAttribute('aria-hidden', String(!isQualityApplicable));\r\n }\r\n function updateQualityValueDisplay() {\r\n qualityValueSpan.textContent = parseFloat(outputQualitySlider.value).toFixed(2);\r\n }\r\n function toggleBackgroundColorPicker() {\r\n backgroundColorPicker.disabled = !useBackgroundColorCheckbox.checked;\r\n }\r\n function resetTransformations() {\r\n currentRotation = 0;\r\n isFlippedHorizontal = false;\r\n isFlippedVertical = false;\r\n }\r\n function updateTransformButtonStates() {\r\n resetTransformBtn.disabled = (currentRotation === 0 && !isFlippedHorizontal && !isFlippedVertical);\r\n }\r\n\r\n \/\/ --- \u041e\u0441\u043d\u043e\u0432\u043d\u0430\u044f \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0444\u0430\u0439\u043b\u0430 ---\r\n function handleFile(file) {\r\n resetInterface(); \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u043d\u043e\u0432\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0441\u0431\u0440\u043e\u0441\u0430\r\n\r\n if (!file) return;\r\n\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430\r\n if (!\/\\.gif$\/i.test(file.name) && file.type !== 'image\/gif') {\r\n showStatus(`Incorrect file format. Please upload a GIF file (received: ${file.name}, type: ${file.type || 'unknown'}).`, 'error');\r\n return; \/\/ \u041f\u0440\u0435\u0440\u044b\u0432\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435\r\n }\r\n\r\n showStatus(`Processing \"${file.name}\"... Reading file.`, 'info');\r\n\r\n const reader = new FileReader();\r\n\r\n reader.onload = function(e) {\r\n \/\/ ... (\u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u043a\u043e\u0434 reader.onload \u0431\u0435\u0437 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u0439, \u0432\u043a\u043b\u044e\u0447\u0430\u044f img.onload, canvas, \u044d\u043a\u0441\u043f\u043e\u0440\u0442) ...\r\n showStatus(`Processing \"${file.name}\"... Decoding image.`, 'info');\r\n const img = new Image();\r\n\r\n img.onload = function() {\r\n originalImageDimensions.width = img.naturalWidth;\r\n originalImageDimensions.height = img.naturalHeight;\r\n\r\n if (originalImageDimensions.width === 0 || originalImageDimensions.height === 0) {\r\n showStatus(`Failed to decode image \"${file.name}\". It might be corrupted or have zero dimensions.`, 'error');\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${file.name}\"... Applying settings.`, 'info');\r\n\r\n const mimeType = outputFormatSelect.value;\r\n const quality = parseFloat(outputQualitySlider.value);\r\n const maintainRatio = maintainAspectRatioCheckbox.checked;\r\n const useBG = useBackgroundColorCheckbox.checked;\r\n const bgColor = backgroundColorPicker.value;\r\n\r\n let desiredWidth = parseInt(outputWidthInput.value, 10) || 0;\r\n let desiredHeight = parseInt(outputHeightInput.value, 10) || 0;\r\n\r\n let targetWidth = originalImageDimensions.width;\r\n let targetHeight = originalImageDimensions.height;\r\n\r\n if (desiredWidth > 0 || desiredHeight > 0) {\r\n if (maintainRatio) {\r\n const originalRatio = originalImageDimensions.width \/ originalImageDimensions.height;\r\n if (originalRatio === 0 || !isFinite(originalRatio)) {\r\n showStatus('Error calculating aspect ratio. Original image dimensions might be invalid.', 'error');\r\n return;\r\n }\r\n if (desiredWidth > 0 && desiredHeight <= 0) {\r\n targetWidth = desiredWidth;\r\n targetHeight = Math.round(desiredWidth \/ originalRatio);\r\n } else if (desiredHeight > 0 && desiredWidth <= 0) {\r\n targetHeight = desiredHeight;\r\n targetWidth = Math.round(desiredHeight * originalRatio);\r\n } else if (desiredWidth > 0 && desiredHeight > 0) {\r\n const widthRatio = desiredWidth \/ originalImageDimensions.width;\r\n const heightRatio = desiredHeight \/ originalImageDimensions.height;\r\n const scale = Math.min(widthRatio, heightRatio);\r\n targetWidth = Math.round(originalImageDimensions.width * scale);\r\n targetHeight = Math.round(originalImageDimensions.height * scale);\r\n }\r\n } else {\r\n if (desiredWidth > 0) targetWidth = desiredWidth;\r\n if (desiredHeight > 0) targetHeight = desiredHeight;\r\n }\r\n }\r\n targetWidth = Math.max(1, targetWidth);\r\n targetHeight = Math.max(1, targetHeight);\r\n\r\n const canvas = document.createElement('canvas');\r\n const requiresSwap = currentRotation === 90 || currentRotation === 270;\r\n canvas.width = requiresSwap ? targetHeight : targetWidth;\r\n canvas.height = requiresSwap ? targetWidth : targetHeight;\r\n\r\n const MAX_CANVAS_AREA = 16384 * 16384;\r\n const MAX_CANVAS_DIM = 32767;\r\n if (canvas.width <= 0 || canvas.height <= 0 || canvas.width > MAX_CANVAS_DIM || canvas.height > MAX_CANVAS_DIM || (canvas.width * canvas.height > MAX_CANVAS_AREA)) {\r\n showStatus(`Resulting dimensions (${canvas.width}x${canvas.height}) are invalid or exceed browser limits. Please choose smaller dimensions or reset transformations.`, 'error');\r\n return;\r\n }\r\n\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) {\r\n showStatus('Could not get Canvas 2D context. Your browser might be too old or configuration issue.', 'error');\r\n return;\r\n }\r\n\r\n try {\r\n ctx.save();\r\n\r\n if (useBG || mimeType === 'image\/jpeg') {\r\n ctx.fillStyle = bgColor;\r\n ctx.fillRect(0, 0, canvas.width, canvas.height);\r\n } else {\r\n ctx.clearRect(0, 0, canvas.width, canvas.height);\r\n }\r\n\r\n const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n ctx.translate(centerX, centerY);\r\n if (currentRotation !== 0) ctx.rotate(currentRotation * Math.PI \/ 180);\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n\r\n const drawX = -targetWidth \/ 2;\r\n const drawY = -targetHeight \/ 2;\r\n ctx.drawImage(\r\n img,\r\n 0, 0, originalImageDimensions.width, originalImageDimensions.height,\r\n drawX, drawY, targetWidth, targetHeight\r\n );\r\n\r\n ctx.restore();\r\n\r\n showStatus(`Processing \"${file.name}\"... Encoding final image.`, 'info');\r\n let exportQuality = quality;\r\n if (mimeType === 'image\/webp' && quality === 1.0) {\r\n console.log(\"Attempting near-lossless WebP (quality 1.0)\");\r\n }\r\n const dataUrl = canvas.toDataURL(mimeType, (mimeType === 'image\/jpeg' || mimeType === 'image\/webp') ? exportQuality : undefined);\r\n\r\n if (!dataUrl || dataUrl === 'data:,') {\r\n throw new Error(\"Failed to encode image. Canvas returned empty data.\");\r\n }\r\n\r\n \/\/ --- \u0418\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0410\u0432\u0442\u043e-\u0421\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f ---\r\n const link = document.createElement('a');\r\n link.href = dataUrl;\r\n const originalName = file.name.replace(\/\\.gif$\/i, '');\r\n let extension = mimeType.split('\/')[1];\r\n if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted_${canvas.width}x${canvas.height}.${extension}`;\r\n\r\n \/\/ \u0417\u0430\u043f\u0430\u0441\u043d\u043e\u0439 \u0432\u0430\u0440\u0438\u0430\u043d\u0442 - \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438\r\n link.textContent = `Download ${link.download}`;\r\n downloadLinkContainer.innerHTML = '';\r\n downloadLinkContainer.appendChild(link);\r\n\r\n \/\/ \u0418\u043d\u0438\u0446\u0438\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u043e\u0435 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u0435\r\n link.click();\r\n \/\/ ------------------------------------\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441 \u041f\u041e\u0421\u041b\u0415 \u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\r\n showStatus(`Success! Download started for \"${link.download}\".`, 'success');\r\n\r\n\r\n } catch (error) {\r\n console.error(\"Conversion Error:\", error);\r\n let errorMessage = `Error during conversion: ${error.message || 'Unknown error'}.`;\r\n if (error instanceof DOMException) {\r\n if (error.name === 'IndexSizeError' || error.message.includes(\"large\")) {\r\n errorMessage = `Resulting image dimensions (${canvas.width}x${canvas.height}) might be too large for the browser's Canvas. Try smaller dimensions or reset transformations.`;\r\n } else if (error.name === 'SecurityError') {\r\n errorMessage = `Could not generate image due to browser security restrictions (e.g., tainted canvas).`;\r\n }\r\n } else if (error.message.includes(\"encode\")) {\r\n errorMessage = `Failed to encode image to ${mimeType}. The format might not be fully supported or an issue occurred.`;\r\n }\r\n showStatus(errorMessage, 'error');\r\n }\r\n };\r\n\r\n img.onerror = function(err) {\r\n console.error(\"Image loading error:\", err);\r\n showStatus(`Error loading image \"${file.name}\". Ensure it's a valid, non-corrupted GIF file.`, 'error');\r\n };\r\n\r\n img.src = e.target.result; \/\/ \u0417\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443 \u0438\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u044f \u0438\u0437 Data URL\r\n };\r\n\r\n reader.onerror = function(err) {\r\n console.error(\"FileReader error:\", err);\r\n showStatus(`Error reading file \"${file.name}\". Check browser permissions or file integrity.`, 'error');\r\n };\r\n\r\n reader.readAsDataURL(file); \/\/ \u041d\u0430\u0447\u0438\u043d\u0430\u0435\u043c \u0447\u0442\u0435\u043d\u0438\u0435 \u0444\u0430\u0439\u043b\u0430\r\n }\r\n\r\n\r\n \/\/ --- \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u0438 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 ---\r\n\r\n \/\/ \u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e\u0441\u0442\u0438 \u0434\u043b\u044f \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c\u043e\u0433\u043e \u0431\u043b\u043e\u043a\u0430\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\r\n\r\n toggleSettingsBtn.addEventListener('click', toggleSettings);\r\n toggleSettingsBtn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSettings(); } });\r\n\r\n outputFormatSelect.addEventListener('change', updateQualityControlVisibility);\r\n outputQualitySlider.addEventListener('input', updateQualityValueDisplay);\r\n\r\n \/\/ \u0410\u0432\u0442\u043e-\u043e\u0447\u0438\u0441\u0442\u043a\u0430 \u043f\u043e\u043b\u0435\u0439 \u043f\u0440\u0438 \u0441\u043e\u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0438 \u043f\u0440\u043e\u043f\u043e\u0440\u0446\u0438\u0439\r\n outputWidthInput.addEventListener('input', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputWidthInput.value) outputHeightInput.value = '';\r\n });\r\n outputHeightInput.addEventListener('input', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputHeightInput.value) outputWidthInput.value = '';\r\n });\r\n\r\n \/\/ \u041b\u0435\u0439\u0431\u043b \u0434\u043b\u044f \u0447\u0435\u043a\u0431\u043e\u043a\u0441\u0430 \u0442\u043e\u0436\u0435 \u043a\u043b\u0438\u043a\u0430\u0431\u0435\u043b\u0435\u043d\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n\r\n useBackgroundColorCheckbox.addEventListener('change', toggleBackgroundColorPicker);\r\n\r\n \/\/ --- \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0438 \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 ---\r\n function applyTransformation(transformFunc) {\r\n transformFunc();\r\n updateTransformButtonStates();\r\n \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442, \u0435\u0441\u043b\u0438 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u0437\u043c\u0435\u043d\u0438\u043b\u0438\u0441\u044c\r\n if (downloadLinkContainer.innerHTML !== '') {\r\n downloadLinkContainer.innerHTML = '';\r\n \/\/ \u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c \u0442\u0438\u043f 'info' \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0441\u043e\u043e\u0431\u0449\u0435\u043d\u0438\u044f\r\n showStatus('Transformation settings changed. Please process the file again to apply.', 'info');\r\n }\r\n }\r\n\r\n rotateBtn.addEventListener('click', () => applyTransformation(() => {\r\n currentRotation = (currentRotation + 90) % 360;\r\n }));\r\n flipHorizontalBtn.addEventListener('click', () => applyTransformation(() => {\r\n isFlippedHorizontal = !isFlippedHorizontal;\r\n }));\r\n flipVerticalBtn.addEventListener('click', () => applyTransformation(() => {\r\n isFlippedVertical = !isFlippedVertical;\r\n }));\r\n resetTransformBtn.addEventListener('click', () => applyTransformation(() => {\r\n resetTransformations(); \/\/ \u0421\u0431\u0440\u043e\u0441 \u043f\u0435\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u044f\r\n }));\r\n\r\n \/\/ \u0412\u044b\u0431\u043e\u0440 \u0444\u0430\u0439\u043b\u0430\r\n fileInput.addEventListener('change', (event) => {\r\n if (event.target.files.length > 0) {\r\n handleFile(event.target.files[0]);\r\n } else {\r\n resetInterface(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043e\u0442\u043c\u0435\u043d\u0438\u043b \u0432\u044b\u0431\u043e\u0440\r\n }\r\n });\r\n\r\n \/\/ Drag and Drop\r\n uploadArea.addEventListener('dragover', (event) => {\r\n event.preventDefault();\r\n event.dataTransfer.dropEffect = 'copy';\r\n uploadArea.classList.add('drag-over');\r\n uploadArea.classList.remove('upload-error'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u043f\u0440\u0438 \u043d\u0430\u0447\u0430\u043b\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0441\u043a\u0438\u0432\u0430\u043d\u0438\u044f\r\n });\r\n uploadArea.addEventListener('dragleave', (event) => {\r\n if (!uploadArea.contains(event.relatedTarget) || event.relatedTarget === null) {\r\n uploadArea.classList.remove('drag-over');\r\n }\r\n });\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault();\r\n uploadArea.classList.remove('drag-over'); \/\/ \u0423\u0431\u0438\u0440\u0430\u0435\u043c \u0441\u0442\u0438\u043b\u044c drag-over \u0432 \u043b\u044e\u0431\u043e\u043c \u0441\u043b\u0443\u0447\u0430\u0435\r\n if (event.dataTransfer.files.length > 0) {\r\n const droppedFile = event.dataTransfer.files[0];\r\n \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u0444\u0430\u0439\u043b\u0430 \u043f\u0440\u0438 Drop\r\n if (\/\\.gif$\/i.test(droppedFile.name) || droppedFile.type === 'image\/gif') {\r\n fileInput.files = event.dataTransfer.files;\r\n handleFile(droppedFile); \/\/ \u041e\u0431\u0440\u0430\u0431\u0430\u0442\u044b\u0432\u0430\u0435\u043c \u0444\u0430\u0439\u043b\r\n } else {\r\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0448\u0438\u0431\u043a\u0443 \u0444\u043e\u0440\u043c\u0430\u0442\u0430 \u043f\u0440\u0438 Drop\r\n showStatus(`Incorrect file format dropped. Please drop a GIF file (received: ${droppedFile.name}, type: ${droppedFile.type || 'unknown'}).`, 'error');\r\n fileInput.value = ''; \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c input file \u043d\u0430 \u0432\u0441\u044f\u043a\u0438\u0439 \u0441\u043b\u0443\u0447\u0430\u0439\r\n }\r\n } else {\r\n resetInterface(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c, \u0435\u0441\u043b\u0438 \u043d\u0438\u0447\u0435\u0433\u043e \u043d\u0435 \u043f\u0435\u0440\u0435\u0442\u0430\u0449\u0438\u043b\u0438\r\n }\r\n });\r\n\r\n \/\/ --- \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates();\r\n\r\n}); \/\/ \u041a\u043e\u043d\u0435\u0446 'DOMContentLoaded'\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-e92ba5f elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"e92ba5f\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-eda39f5\" data-id=\"eda39f5\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-a0f5fb4 elementor-widget elementor-widget-text-editor\" data-id=\"a0f5fb4\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Autres formats : <a href=\"https:\/\/pngate.com\/fr\/webp-vers-png\/\">Webp vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/avif-to-png\/\">Avif vers 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-60222ab elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"60222ab\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-inner-column elementor-element elementor-element-13ad849\" data-id=\"13ad849\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-7801d21 elementor-widget elementor-widget-text-editor\" data-id=\"7801d21\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h5>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-5eab9a6 elementor-share-buttons--shape-rounded elementor-share-buttons--align-center elementor-share-buttons--view-icon-text elementor-share-buttons--skin-gradient elementor-grid-0 elementor-share-buttons--color-official elementor-widget elementor-widget-share-buttons\" data-id=\"5eab9a6\" data-element_type=\"widget\" data-widget_type=\"share-buttons.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-grid\">\n\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_pinterest\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on pinterest\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-pinterest\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tPinterest\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_telegram\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on telegram\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-telegram\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\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-8637db1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"8637db1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-e57a4f6\" data-id=\"e57a4f6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-244a5e8\" data-id=\"244a5e8\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-8ef2d29 elementor-widget elementor-widget-text-editor\" data-id=\"8ef2d29\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Besoin de convertir des GIF en PNG rapidement et facilement\u00a0? Notre convertisseur GIF en PNG en ligne gratuit vous permet de transformer des GIF anim\u00e9s ou statiques en images PNG de haute qualit\u00e9, instantan\u00e9ment, sans logiciel, sans frais et sans tracas.<\/p><h2>Qu'est-ce qu'un fichier GIF ?<\/h2><p>Le format GIF (Graphics Interchange Format) est un format d'image largement utilis\u00e9, connu pour sa prise en charge des animations et la taille r\u00e9duite des fichiers. Il est populaire sur les r\u00e9seaux sociaux, les sites web et les applications de messagerie gr\u00e2ce \u00e0 ses animations en boucle et \u00e0 sa grande compatibilit\u00e9.<\/p><p>Cependant, les GIF ne sont pas id\u00e9aux pour toutes les situations, en particulier lorsque vous avez besoin d'une image fixe de haute qualit\u00e9, de transparence ou de flexibilit\u00e9 d'\u00e9dition.<\/p><h2>Pourquoi convertir GIF en PNG\u00a0?<\/h2><p>PNG (Portable Network Graphics) est un format d'image sans perte qui prend en charge la transparence et est id\u00e9al pour l'\u00e9dition ou l'utilisation professionnelle. Voici pourquoi convertir un GIF en PNG\u00a0:<\/p><ul><li><strong>Qualit\u00e9 sup\u00e9rieure :<\/strong> Le format PNG fournit des images plus nettes et non compress\u00e9es par rapport aux GIF statiques.<\/li><li><strong>Support de transparence :<\/strong> PNG prend enti\u00e8rement en charge la transparence alpha, id\u00e9ale pour une utilisation en conception.<\/li><li><strong>Facilit\u00e9 d'\u00e9dition :<\/strong> Les fichiers PNG sont largement pris en charge par les \u00e9diteurs graphiques tels que Photoshop, GIMP, Figma, etc.<\/li><li><strong>Extraire les cadres :<\/strong> Transformez facilement des GIF anim\u00e9s en cadres PNG individuels pour l'\u00e9dition ou la pr\u00e9sentation.<\/li><\/ul><p>Utilisez notre convertisseur GIF en PNG en ligne pour g\u00e9rer tout cela \u2014 rapidement, en toute s\u00e9curit\u00e9 et gratuitement.<\/p><h2>Comment convertir un GIF en PNG en ligne<\/h2><p>Notre convertisseur d'images GIF gratuit simplifie et acc\u00e9l\u00e8re le processus. Suivez ces \u00e9tapes simples\u00a0:<\/p><ol><li><strong>T\u00e9l\u00e9chargez votre GIF<\/strong> \u2013 Faites glisser et d\u00e9posez le fichier ou s\u00e9lectionnez-le manuellement.<\/li><li><strong>Convertissez instantan\u00e9ment<\/strong> \u2013 La conversion d\u00e9marre automatiquement dans votre navigateur.<\/li><li><strong>T\u00e9l\u00e9charger PNG<\/strong> \u2013 Obtenez votre fichier PNG converti en un clic.<\/li><\/ol><p>Cet outil fonctionne directement dans votre navigateur\u00a0: aucune installation ni cr\u00e9ation de compte n'est requise. Convertissez vos images sans perte de qualit\u00e9, quel que soit votre appareil.<\/p><h2>Pourquoi utiliser notre convertisseur GIF en PNG en ligne\u00a0?<\/h2><ul><li><strong>Gratuit pour toujours<\/strong> \u2013 Pas d\u2019abonnement ni d\u2019inscription.<\/li><li><strong>Rapide et intuitif<\/strong> \u2013 Aucune courbe d'apprentissage. T\u00e9l\u00e9chargez et c'est parti.<\/li><li><strong>S\u00fbr et priv\u00e9<\/strong> \u2013 Vos fichiers ne sont jamais t\u00e9l\u00e9charg\u00e9s sur un serveur.<\/li><li><strong>Prise en charge multi-appareils<\/strong> \u2013 Fonctionne sur ordinateur de bureau, mobile ou tablette.<\/li><li><strong>Pr\u00e9serve la qualit\u00e9<\/strong> \u2013 Conversion sans perte de compression.<\/li><\/ul><p>Que vous ayez besoin d'extraire une image statique ou de convertir des GIF \u00e0 des fins de conception, notre convertisseur GIF en PNG en ligne vous offre la meilleure exp\u00e9rience.<\/p><h2>GIF vs PNG\u00a0: principales diff\u00e9rences<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Fonctionnalit\u00e9<\/th><th>GIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Animation<\/td><td>Soutenu<\/td><td>Non pris en charge<\/td><\/tr><tr><td>Compression<\/td><td>Avec perte ou limit\u00e9<\/td><td>Sans perte<\/td><\/tr><tr><td>Transparence<\/td><td>Basique (1 bit)<\/td><td>Canal alpha complet<\/td><\/tr><tr><td>Compatibilit\u00e9 d'\u00e9dition<\/td><td>Limit\u00e9<\/td><td>Largement soutenu<\/td><\/tr><tr><td>Id\u00e9al pour<\/td><td>Animations courtes, m\u00e8mes<\/td><td>Logos, graphiques, \u00e9l\u00e9ments de conception<\/td><\/tr><\/tbody><\/table><p>\u00a0<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t<div class=\"elementor-column elementor-col-33 elementor-top-column elementor-element elementor-element-baa8c02\" data-id=\"baa8c02\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Convertisseur GIF en PNG\u00a0: convertissez vos GIF en PNG gratuitement en ligne. T\u00e9l\u00e9chargez simplement vos images GIF ci-dessous et obtenez des fichiers PNG de haute qualit\u00e9 en quelques secondes. Convertisseur GIF<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4889,"parent":0,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"class_list":["post-4715","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4715","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=4715"}],"version-history":[{"count":70,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4715\/revisions"}],"predecessor-version":[{"id":4974,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4715\/revisions\/4974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media\/4889"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media?parent=4715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}