GIF-Konverter<\/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 GIF-Bild hochladen\r\n <\/label>\r\n <div class=\"gif-upload-hint\">\r\n <span class=\"main-hint\">oder legen Sie eine Datei hier ab<\/span>\r\n <span class=\"sub-hint\">(Konvertiert das erste Bild des 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 Erweiterte Einstellungen \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>Ausgabeformat und -qualit\u00e4t<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Format:<\/label>\r\n <select id=\"outputFormat\">\r\n <option value=\"image\/png\" selected>PNG<\/option>\r\n <option value=\"image\/jpeg\">JPEG<\/option>\r\n <option value=\"image\/webp\">WebP<\/option>\r\n <\/select>\r\n\r\n <div class=\"quality-setting hidden\" id=\"qualityControl\">\r\n <label for=\"outputQuality\" class=\"inline-label\">Qualit\u00e4t:<\/label>\r\n <input type=\"range\" id=\"outputQuality\" min=\"0.1\" max=\"1.0\" step=\"0.05\" value=\"0.9\">\r\n <span id=\"qualityValue\">0.90<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Gr\u00f6\u00dfe \u00e4ndern<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Breite:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"Auto\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">H\u00f6he:<\/label>\r\n <input type=\"number\" id=\"outputHeight\" placeholder=\"Auto\" min=\"1\">\r\n <\/div>\r\n <div style=\"margin-top: 10px;\">\r\n <input type=\"checkbox\" id=\"maintainAspectRatio\" checked>\r\n <label for=\"maintainAspectRatio\" class=\"aspect-ratio-label\">Seitenverh\u00e4ltnis beibehalten<\/label>\r\n <\/div>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Hintergrund<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\">\r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Hintergrundfarbe verwenden:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n <small>(N\u00fctzlich f\u00fcr Formate ohne Transparenz wie JPEG oder zum Entfernen vorhandener Transparenz)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Verwandeln<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"90\u00b0 im Uhrzeigersinn drehen\">90\u00b0 im Uhrzeigersinn drehen<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Horizontal spiegeln\">Horizontal spiegeln<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Vertikal spiegeln\">Vertikal spiegeln<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Transformationen zur\u00fccksetzen\">Transformationen zur\u00fccksetzen<\/button>\r\n <\/div>\r\n <small>(Die Drehung kann sich auf die Abmessungen auswirken, wenn das Seitenverh\u00e4ltnis nicht beibehalten wird.)<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n\r\n \r\n <div class=\"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>Andere Formate: <a href=\"https:\/\/pngate.com\/de\/webp-zu-png\/\">Webp zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/avif-to-png\/\">Avif zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/jpeg-to-png\/\">JPEG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/svg-to-png\/\">SVG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/heic-to-png\/\">HEIC zu PNG<\/a><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-inner-section elementor-element elementor-element-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>Fanden Sie dies n\u00fctzlich? Teilen Sie es!<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-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\tTelegramm\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_facebook\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on facebook\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-facebook\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tFacebook\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_twitter\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on twitter\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-twitter\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tTwitter\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_reddit\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on reddit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-reddit\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tReddit\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-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>M\u00fcssen Sie GIF schnell und einfach in PNG konvertieren? Mit unserem kostenlosen Online-GIF-zu-PNG-Konverter k\u00f6nnen Sie animierte oder statische GIFs in hochwertige PNG-Bilder umwandeln \u2013 sofort, ohne Software, kostenlos und unkompliziert.<\/p><h2>Was ist eine GIF-Datei?<\/h2><p>GIF (Graphics Interchange Format) ist ein weit verbreitetes Bildformat, das f\u00fcr seine Animationsunterst\u00fctzung und geringe Dateigr\u00f6\u00dfen bekannt ist. Es ist aufgrund seiner Loop-Animationen und seiner breiten Kompatibilit\u00e4t in sozialen Medien, auf Websites und in Messaging-Apps beliebt.<\/p><p>Allerdings sind GIFs nicht f\u00fcr jede Situation ideal \u2013 insbesondere, wenn Sie ein Standbild mit hoher Qualit\u00e4t, Transparenz oder Bearbeitungsflexibilit\u00e4t ben\u00f6tigen.<\/p><h2>Warum GIF in PNG konvertieren?<\/h2><p>PNG (Portable Network Graphics) ist ein verlustfreies Bildformat mit Transparenzunterst\u00fctzung und eignet sich ideal f\u00fcr die Bearbeitung oder den Einsatz in professionellen Umgebungen. Hier sind einige Gr\u00fcnde, warum Sie GIF in PNG konvertieren sollten:<\/p><ul><li><strong>H\u00f6here Qualit\u00e4t:<\/strong> PNG liefert im Vergleich zu statischen GIFs sch\u00e4rfere, unkomprimierte Bilder.<\/li><li><strong>Transparenzunterst\u00fctzung:<\/strong> PNG unterst\u00fctzt Alpha-Transparenz vollst\u00e4ndig und ist ideal f\u00fcr den Designeinsatz.<\/li><li><strong>Einfache Bearbeitung:<\/strong> PNG-Dateien werden von vielen Grafikeditoren wie Photoshop, GIMP, Figma und anderen unterst\u00fctzt.<\/li><li><strong>Frames extrahieren:<\/strong> Wandeln Sie animierte GIFs ganz einfach in einzelne PNG-Frames um, um sie zu bearbeiten oder zu pr\u00e4sentieren.<\/li><\/ul><p>Verwenden Sie unseren Online-GIF-zu-PNG-Konverter, um all dies zu erledigen \u2013 schnell, sicher und kostenlos.<\/p><h2>So konvertieren Sie GIF online in PNG<\/h2><p>Unser kostenloser GIF-Bildkonverter macht den Vorgang einfach und schnell. Folgen Sie diesen einfachen Schritten:<\/p><ol><li><strong>Laden Sie Ihr GIF hoch<\/strong> \u2013 Ziehen Sie die Datei per Drag & Drop oder w\u00e4hlen Sie sie manuell aus.<\/li><li><strong>Sofort konvertieren<\/strong> \u2013 Die Konvertierung startet automatisch in Ihrem Browser.<\/li><li><strong>PNG herunterladen<\/strong> \u2013 Erhalten Sie Ihre konvertierte PNG-Datei mit einem Klick.<\/li><\/ol><p>Dieses Tool funktioniert direkt in Ihrem Browser \u2013 Sie m\u00fcssen nichts installieren oder ein Konto erstellen. Konvertieren Sie Bilder ohne Qualit\u00e4tsverlust auf jedem Ger\u00e4t.<\/p><h2>Warum unseren Online-GIF-zu-PNG-Konverter verwenden?<\/h2><ul><li><strong>F\u00fcr immer kostenlos<\/strong> \u2013 Keine Abonnements oder Anmeldungen.<\/li><li><strong>Schnell und intuitiv<\/strong> \u2013 Keine Lernkurve. Einfach hochladen und loslegen.<\/li><li><strong>Sicher und privat<\/strong> \u2013 Ihre Dateien werden niemals auf einen Server hochgeladen.<\/li><li><strong>Unterst\u00fctzung mehrerer Ger\u00e4te<\/strong> \u2013 Funktioniert auf dem Desktop, Mobilger\u00e4t oder Tablet.<\/li><li><strong>Erh\u00e4lt die Qualit\u00e4t<\/strong> \u2013 Konvertiert ohne Kompressionsverlust.<\/li><\/ul><p>Egal, ob Sie einen statischen Rahmen extrahieren oder GIFs f\u00fcr Designzwecke konvertieren m\u00fcssen, unser Online-Konverter von GIF zu PNG bietet Ihnen das beste Erlebnis.<\/p><h2>GIF vs. PNG: Wichtige Unterschiede<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Besonderheit<\/th><th>GIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Animation<\/td><td>Unterst\u00fctzt<\/td><td>Nicht unterst\u00fctzt<\/td><\/tr><tr><td>Kompression<\/td><td>Verlustbehaftet oder begrenzt<\/td><td>Verlustfrei<\/td><\/tr><tr><td>Transparenz<\/td><td>Einfach (1 Bit)<\/td><td>Vollst\u00e4ndiger Alphakanal<\/td><\/tr><tr><td>Bearbeitungskompatibilit\u00e4t<\/td><td>Beschr\u00e4nkt<\/td><td>Breite Unterst\u00fctzung<\/td><\/tr><tr><td>Am besten f\u00fcr<\/td><td>Kurze Animationen, Memes<\/td><td>Logos, Grafiken, Design-Assets<\/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>GIF to PNG Converter Convert GIF to PNG for Free Online. Just upload your Gif images below and get high-quality PNG files in seconds. GIF Converter<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\/de\/wp-json\/wp\/v2\/pages\/4715","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/comments?post=4715"}],"version-history":[{"count":70,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4715\/revisions"}],"predecessor-version":[{"id":4974,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4715\/revisions\/4974"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media\/4889"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media?parent=4715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}