HEIC-zu-PNG-Konverter<\/title>\r\n\r\n\r\n\r\n\r\n<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/heic2any@0.0.4\/dist\/heic2any.min.js\"><\/script>\r\n\r\n<style>\r\n \/* --- \u041e\u0431\u0449\u0438\u0435 \u0441\u0442\u0438\u043b\u0438 (\u0430\u043d\u0430\u043b\u043e\u0433\u0438\u0447\u043d\u044b SVG, \u043a\u043b\u0430\u0441\u0441\u044b \u043f\u0435\u0440\u0435\u0438\u043c\u0435\u043d\u043e\u0432\u0430\u043d\u044b \u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c heic-) --- *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n background-color: #f4f7f6;\r\n }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-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 \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-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 .heic-upload-area.drag-over { border-color: #007bff; background-color: #f8f9fa; }\r\n .heic-upload-area.upload-error { border-color: #dc3545 !important; }\r\n .heic-upload-area input[type=\"file\"] { display: none; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-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 .heic-upload-button:hover { background-color: #0056b3; }\r\n .heic-upload-button:active { transform: scale(0.98); }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-upload-hint { color: #6c757d; margin: 0; }\r\n .heic-upload-hint span { display: block; margin-bottom: 5px; line-height: 1.4; }\r\n .heic-upload-hint .main-hint { font-size: 1.0em; }\r\n .heic-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 \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-converter-settings { margin-top: 15px; text-align: center; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-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 .heic-settings-toggle:hover { background-color: #007bff; color: #fff; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-settings-content {\r\n display: none;\r\n padding: 20px; border: 1px solid #e0e0e0; border-radius: 8px;\r\n background-color: #fdfdfd; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);\r\n text-align: left; font-size: 0.9em;\r\n }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-settings-content.is-visible {\r\n display: block !important;\r\n }\r\n .setting-group { margin-bottom: 18px; padding-bottom: 15px; border-bottom: 1px solid #eee; }\r\n .setting-group:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }\r\n .setting-group h4 { margin-top: 0; margin-bottom: 12px; font-size: 1.1em; color: #333; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-settings-content label { display: block; margin-bottom: 5px; font-weight: bold; color: #555; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-settings-content .inline-label { display: inline-block; margin-right: 10px; margin-bottom: 0; vertical-align: middle; line-height: 30px; }\r\n small { color: #6c757d; display: block; margin-top: 8px; line-height: 1.4; }\r\n .hidden { display: none !important; }\r\n\r\n \/* === \u0421\u0422\u0418\u041b\u0418 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER (\u0441 \u043f\u0440\u0435\u0444\u0438\u043a\u0441\u043e\u043c heic-) === *\/\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"] { background-color: #f0f0f0; color: #333; border: 1px solid #ccc; border-radius: 4px; padding: 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: 80px; margin-right: 10px; display: inline-block; }\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"]::placeholder { color: #6c757d; opacity: 1; }\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"]::-webkit-input-placeholder { color: #6c757d; opacity: 1; }\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"]::-moz-placeholder { color: #6c757d; opacity: 1; }\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"]:-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"]::-ms-input-placeholder { color: #6c757d; opacity: 1; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-converter-wrapper .heic-settings-content select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: #f0f0f0 !important; color: #333 !important; border: 1px solid #ccc; border-radius: 4px; padding: 8px 35px 8px 12px; margin-bottom: 10px; box-sizing: border-box; vertical-align: middle; font-size: inherit; line-height: 1.4; transition: border-color 0.2s ease, box-shadow 0.2s ease; width: auto; min-width: 110px; display: inline-block; cursor: pointer; background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'); background-repeat: no-repeat; background-position: right 12px center; background-size: 10px 10px; }\r\n .heic-converter-wrapper .heic-settings-content select::-ms-expand { display: none; }\r\n .heic-converter-wrapper .heic-settings-content select option { background-color: #f0f0f0; color: #333; padding: 5px 10px; }\r\n .heic-converter-wrapper .heic-settings-content select:focus,\r\n .heic-converter-wrapper .heic-settings-content input[type=\"number\"]:focus { outline: none; border-color: #86b7fe; box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25); }\r\n \/* === \u041a\u041e\u041d\u0415\u0426 \u0421\u0422\u0418\u041b\u0415\u0419 \u0414\u041b\u042f SELECT \u0418 INPUT NUMBER === *\/\r\n\r\n \/* \u041e\u0441\u0442\u0430\u043b\u044c\u043d\u044b\u0435 \u0438\u043d\u043f\u0443\u0442\u044b (\u043f\u0440\u0435\u0444\u0438\u043a\u0441 heic-) *\/\r\n .heic-settings-content input[type=\"color\"], .heic-settings-content input[type=\"range\"] { margin-bottom: 10px; padding: 8px; border: 1px solid #ccc; border-radius: 4px; width: 100%; box-sizing: border-box; }\r\n .heic-settings-content input[type=\"range\"] { height: 8px; padding: 0; cursor: pointer; }\r\n .heic-settings-content input[type=\"color\"] { height: 30px; padding: 2px; cursor: pointer; }\r\n .heic-settings-content input[type=\"checkbox\"] { margin-right: 5px; vertical-align: middle; width: 16px; height: 16px; }\r\n .aspect-ratio-label, .bg-color-label { font-weight: normal; display: inline-block; margin-left: 0; vertical-align: middle; cursor: pointer; }\r\n .quality-setting { display: flex; align-items: center; gap: 10px; margin-top: 10px; }\r\n .quality-setting label { margin-bottom: 0; }\r\n .quality-setting input[type=\"range\"] { flex-grow: 1; margin-bottom: 0; }\r\n .quality-setting span { min-width: 30px; text-align: right; font-weight: bold; }\r\n .transform-buttons { display: flex; gap: 10px; flex-wrap: wrap; }\r\n .transform-buttons button { padding: 8px 12px; font-size: 0.9em; cursor: pointer; border: 1px solid #ccc; background-color: #fff; color: #333; border-radius: 4px; transition: background-color 0.2s, border-color 0.2s, color 0.2s; }\r\n .transform-buttons button:hover { border-color: #999; background-color: #f0f0f0; color: #333; }\r\n .transform-buttons button:active { background-color: #e0e0e0; }\r\n .transform-buttons button:disabled { color: #999; cursor: not-allowed; background-color: #f8f8f8; border-color: #ddd; }\r\n\r\n \/* --- \u041e\u0431\u043b\u0430\u0441\u0442\u044c \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u0438 \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f --- *\/\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-converter-status-area { margin-top: 25px; padding: 15px 20px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #f9f9f9; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04); }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 *\/\r\n .heic-converter-status { font-style: normal; color: #333; margin-bottom: 15px; font-size: 0.9em; line-height: 1.5; word-wrap: break-word; }\r\n .heic-converter-status.success { color: #155724; font-weight: bold; }\r\n .heic-converter-status.error { color: #721c24; font-weight: bold; }\r\n \/* \u0418\u0437\u043c\u0435\u043d\u0435\u043d \u043f\u0440\u0435\u0444\u0438\u043a\u0441 - \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440 \u0434\u043b\u044f \u0441\u0441\u044b\u043b\u043a\u0438 \u0442\u0435\u043f\u0435\u0440\u044c \u043d\u0435 \u043d\u0443\u0436\u0435\u043d, \u0442\u0430\u043a \u043a\u0430\u043a \u043e\u043d\u0430 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f *\/\r\n \/* .heic-converter-download-area { ... } *\/ \/* \u0423\u0431\u0440\u0430\u043b\u0438 \u0441\u0442\u0438\u043b\u0438 \u0434\u043b\u044f \u043a\u043e\u043d\u0442\u0435\u0439\u043d\u0435\u0440\u0430 *\/\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<div class=\"heic-converter-wrapper\">\r\n\r\n \r\n \r\n <div class=\"heic-upload-area\" id=\"heicUploadArea\">\r\n \r\n <input type=\"file\" id=\"heicFileInput\" accept=\".heic, .heif, image\/heic, image\/heif\" \/>\r\n \r\n <label for=\"heicFileInput\" class=\"heic-upload-button\" role=\"button\" tabindex=\"0\">\r\n HEIC-Bild hochladen\r\n <\/label>\r\n \r\n <div class=\"heic-upload-hint\">\r\n <span class=\"main-hint\">oder legen Sie eine Datei hier ab<\/span>\r\n <span class=\"sub-hint\">(Konvertiert HEIC\/HEIF-Dateien standardm\u00e4\u00dfig in PNG)<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n \r\n <div class=\"heic-converter-settings\">\r\n \r\n <span class=\"heic-settings-toggle\" id=\"toggleSettingsBtn\" role=\"button\" tabindex=\"0\">\r\n Erweiterte Einstellungen \u25bc\r\n <\/span>\r\n \r\n <div class=\"heic-settings-content\" id=\"settingsContent\">\r\n \r\n <div class=\"setting-group\">\r\n <h4>Ausgabeformat und -qualit\u00e4t<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Format:<\/label>\r\n <select id=\"outputFormat\">\r\n <option value=\"image\/png\" selected>PNG<\/option>\r\n <option value=\"image\/jpeg\">JPEG<\/option>\r\n <option value=\"image\/webp\">WebP<\/option>\r\n <\/select>\r\n <div class=\"quality-setting hidden\" id=\"qualityControl\">\r\n <label for=\"outputQuality\" class=\"inline-label\">Qualit\u00e4t:<\/label>\r\n <input type=\"range\" id=\"outputQuality\" min=\"0.1\" max=\"1.0\" step=\"0.05\" value=\"0.9\">\r\n <span id=\"qualityValue\">0.90<\/span>\r\n <\/div>\r\n <small>Hinweis: PNG ist verlustfrei, der Qualit\u00e4tsregler wirkt sich nur auf JPEG\/WebP aus.<\/small>\r\n \r\n <div style=\"margin-top: 10px;\">\r\n <input type=\"checkbox\" id=\"stripExif\" checked>\r\n <label for=\"stripExif\" class=\"inline-label\" style=\"font-weight: normal;\">EXIF\/Metadaten entfernen<\/label>\r\n <\/div>\r\n <small>Entfernt Standort, Kamerainformationen usw. aus der Ausgabedatei (sofern in HEIC vorhanden).<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Gr\u00f6\u00dfe \u00e4ndern<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Breite:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"Original\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">H\u00f6he:<\/label>\r\n <input type=\"number\" id=\"outputHeight\" placeholder=\"Original\" 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 \r\n <small>Hinweis: Wenn keine Gr\u00f6\u00dfe angegeben ist, werden die urspr\u00fcnglichen HEIC-Abmessungen verwendet.<\/small>\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\" disabled> \r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Hintergrundfarbe hinzuf\u00fcgen:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n \r\n <small>(N\u00fctzlich vor allem bei der Ausgabe im JPEG-Format)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Verwandeln<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"90\u00b0 im Uhrzeigersinn drehen\">90\u00b0 im Uhrzeigersinn drehen<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Horizontal spiegeln\">Horizontal spiegeln<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Vertikal spiegeln\">Vertikal spiegeln<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Transformationen zur\u00fccksetzen\">Transformationen zur\u00fccksetzen<\/button>\r\n <\/div>\r\n <small>(Die Drehung kann sich auf die Abmessungen auswirken, wenn das Seitenverh\u00e4ltnis nicht beibehalten wird.)<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n\r\n \r\n \r\n <div class=\"heic-converter-status-area\" id=\"statusArea\" style=\"display: none;\">\r\n \r\n <div class=\"heic-converter-status\" id=\"converterStatus\"><\/div>\r\n \r\n \r\n <\/div>\r\n\r\n<\/div> \r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n\r\n \/\/ --- \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u043d\u0430\u043b\u0438\u0447\u0438\u044f \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 heic2any ---\r\n if (typeof heic2any === 'undefined') {\r\n console.error(\"HEIC conversion library (heic2any) not found. Please ensure it's included.\");\r\n const statusAreaCheck = document.getElementById('statusArea');\r\n const statusMessageCheck = document.getElementById('converterStatus');\r\n if(statusAreaCheck && statusMessageCheck) {\r\n statusMessageCheck.textContent = '\u274c Error: Conversion library missing. Cannot proceed.';\r\n statusMessageCheck.className = 'heic-converter-status error';\r\n statusAreaCheck.style.display = 'block';\r\n \/\/ \u041e\u0442\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0443\r\n const uploadAreaCheck = document.getElementById('heicUploadArea');\r\n const fileInputCheck = document.getElementById('heicFileInput');\r\n if (uploadAreaCheck) uploadAreaCheck.style.opacity = '0.5';\r\n if (fileInputCheck) fileInputCheck.disabled = true;\r\n }\r\n return; \/\/ \u041f\u0440\u0435\u043a\u0440\u0430\u0449\u0430\u0435\u043c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435 \u0441\u043a\u0440\u0438\u043f\u0442\u0430\r\n }\r\n\r\n\r\n \/\/ --- \u042d\u043b\u0435\u043c\u0435\u043d\u0442\u044b DOM ---\r\n const uploadArea = document.getElementById('heicUploadArea');\r\n const fileInput = document.getElementById('heicFileInput');\r\n const statusArea = document.getElementById('statusArea');\r\n const statusMessage = document.getElementById('converterStatus');\r\n \/\/ const downloadLinkContainer = document.getElementById('downloadLinkContainer'); \/\/ \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d\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 stripExifCheckbox = document.getElementById('stripExif');\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 \/\/ \u0423\u0434\u0430\u043b\u0438\u043b\u0438 downloadLinkContainer \u0438\u0437 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438\r\n const elements = { uploadArea, fileInput, statusArea, statusMessage, toggleSettingsBtn, settingsContent, outputFormatSelect, qualityControlDiv, outputQualitySlider, qualityValueSpan, stripExifCheckbox, outputWidthInput, outputHeightInput, maintainAspectRatioCheckbox, useBackgroundColorCheckbox, backgroundColorPicker, rotateBtn, flipHorizontalBtn, flipVerticalBtn, resetTransformBtn };\r\n let allElementsFound = true;\r\n for (const key in elements) {\r\n if (!elements[key]) {\r\n console.error(`Error: DOM element with ID or selector for \"${key}\" not found.`);\r\n allElementsFound = false;\r\n }\r\n }\r\n if (!allElementsFound) {\r\n showStatus(\"Error initializing the converter interface. Some elements are missing.\", 'error');\r\n return;\r\n }\r\n\r\n \/\/ --- \u0421\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 ---\r\n let currentRotation = 0;\r\n let isFlippedHorizontal = false;\r\n let isFlippedVertical = false;\r\n let originalImageDimensions = { width: 0, height: 0 };\r\n let currentFileBlob = null; \/\/ \u0414\u043b\u044f \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u044f \u0438\u0441\u0445\u043e\u0434\u043d\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430 Blob\r\n\r\n \/\/ --- \u0424\u0443\u043d\u043a\u0446\u0438\u0438 ---\r\n function resetInterface() {\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'heic-converter-status';\r\n \/\/ downloadLinkContainer.innerHTML = ''; \/\/ \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d\r\n statusArea.style.display = 'none';\r\n fileInput.value = '';\r\n uploadArea.classList.remove('upload-error');\r\n outputWidthInput.value = '';\r\n outputHeightInput.value = '';\r\n resetTransformations(); \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0438 \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 updateTransformButtonStates\r\n maintainAspectRatioCheckbox.checked = true;\r\n stripExifCheckbox.checked = true;\r\n useBackgroundColorCheckbox.checked = false;\r\n backgroundColorPicker.disabled = true;\r\n backgroundColorPicker.value = '#FFFFFF';\r\n updateQualityControlVisibility();\r\n currentFileBlob = null;\r\n \/\/ updateTransformButtonStates(); \/\/ \u0412\u044b\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0432\u043d\u0443\u0442\u0440\u0438 resetTransformations\r\n }\r\n\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 = 'heic-converter-status';\r\n uploadArea.classList.remove('upload-error');\r\n if (type === 'success') { statusMessage.classList.add('success'); }\r\n else if (type === 'error') { statusMessage.classList.add('error'); uploadArea.classList.add('upload-error'); }\r\n \/\/ \u0421\u0441\u044b\u043b\u043a\u0430 \u0431\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u0442\u0441\u044f, \u0442\u0430\u043a \u0447\u0442\u043e \u043e\u0447\u0438\u0449\u0430\u0442\u044c \u043d\u0435\u0447\u0435\u0433\u043e\r\n \/\/ if (type === 'error') { downloadLinkContainer.innerHTML = ''; }\r\n statusArea.style.display = 'block';\r\n }\r\n\r\n function toggleSettings() {\r\n const isCurrentlyVisible = settingsContent.classList.contains('is-visible');\r\n if (isCurrentlyVisible) {\r\n settingsContent.classList.remove('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25bc';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n settingsContent.setAttribute('aria-hidden', 'true');\r\n } else {\r\n settingsContent.classList.add('is-visible');\r\n toggleSettingsBtn.textContent = 'Advanced Settings \u25b2';\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'true');\r\n settingsContent.setAttribute('aria-hidden', 'false');\r\n }\r\n }\r\n \/\/ \u041f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u0442\/\u0441\u043a\u0440\u044b\u0432\u0430\u0435\u0442 \u0441\u043b\u0430\u0439\u0434\u0435\u0440 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430 \u0432 \u0437\u0430\u0432\u0438\u0441\u0438\u043c\u043e\u0441\u0442\u0438 \u043e\u0442 \u0432\u044b\u0431\u0440\u0430\u043d\u043d\u043e\u0433\u043e \u0444\u043e\u0440\u043c\u0430\u0442\u0430\r\n function updateQualityControlVisibility() {\r\n const selectedFormat = outputFormatSelect.value;\r\n if (selectedFormat === 'image\/jpeg' || selectedFormat === 'image\/webp') {\r\n qualityControlDiv.classList.remove('hidden');\r\n } else {\r\n qualityControlDiv.classList.add('hidden');\r\n }\r\n \/\/ \u0422\u0430\u043a\u0436\u0435 \u0432\u043a\u043b\u044e\u0447\u0430\u0435\u043c\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u043c \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u0444\u043e\u043d\u0430 \u0434\u043b\u044f JPEG\r\n if (selectedFormat === 'image\/jpeg') {\r\n useBackgroundColorCheckbox.disabled = false;\r\n } else {\r\n useBackgroundColorCheckbox.disabled = true;\r\n useBackgroundColorCheckbox.checked = false; \/\/ \u0421\u0431\u0440\u043e\u0441\u0438\u0442\u044c, \u0435\u0441\u043b\u0438 \u043d\u0435 JPEG\r\n toggleBackgroundColorPicker(); \/\/ \u041e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043f\u0438\u043a\u0435\u0440\u0430\r\n }\r\n }\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u0435\u043c\u043e\u0435 \u0437\u043d\u0430\u0447\u0435\u043d\u0438\u0435 \u043a\u0430\u0447\u0435\u0441\u0442\u0432\u0430\r\n function updateQualityValueDisplay() {\r\n qualityValueSpan.textContent = parseFloat(outputQualitySlider.value).toFixed(2);\r\n }\r\n\r\n \/\/ \u0412\u043a\u043b\u044e\u0447\u0430\u0435\u0442\/\u0432\u044b\u043a\u043b\u044e\u0447\u0430\u0435\u0442 \u0432\u044b\u0431\u043e\u0440 \u0446\u0432\u0435\u0442\u0430 \u0444\u043e\u043d\u0430\r\n function toggleBackgroundColorPicker() {\r\n backgroundColorPicker.disabled = !useBackgroundColorCheckbox.checked;\r\n }\r\n\r\n \/\/ \u0421\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u043a\u043d\u043e\u043f\u043a\u0438\r\n function resetTransformations() {\r\n const needsUpdate = currentRotation !== 0 || isFlippedHorizontal || isFlippedVertical;\r\n currentRotation = 0;\r\n isFlippedHorizontal = false;\r\n isFlippedVertical = false;\r\n updateTransformButtonStates(); \/\/ \u0412\u0441\u0435\u0433\u0434\u0430 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u043f\u0440\u0438 \u0441\u0431\u0440\u043e\u0441\u0435\r\n \/\/ \u0415\u0441\u043b\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f \u0431\u044b\u043b\u0430 \u0438 \u0444\u0430\u0439\u043b \u0435\u0441\u0442\u044c, \u043f\u0435\u0440\u0435\u0440\u0438\u0441\u043e\u0432\u044b\u0432\u0430\u0435\u043c\r\n if (needsUpdate && currentFileBlob) {\r\n handleFile(currentFileBlob);\r\n }\r\n }\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 (\u0432\u043a\u043b\u044e\u0447\u0435\u043d\u043e\/\u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u043e)\r\n function updateTransformButtonStates() {\r\n const hasFileAndReady = !!currentFileBlob && originalImageDimensions.width > 0; \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c, \u0435\u0441\u0442\u044c \u043b\u0438 \u0444\u0430\u0439\u043b \u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u043b\u0438 \u0440\u0430\u0437\u043c\u0435\u0440\u044b\r\n rotateBtn.disabled = !hasFileAndReady;\r\n flipHorizontalBtn.disabled = !hasFileAndReady;\r\n flipVerticalBtn.disabled = !hasFileAndReady;\r\n \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 \u0441\u0431\u0440\u043e\u0441\u0430 \u0430\u043a\u0442\u0438\u0432\u043d\u0430, \u0435\u0441\u043b\u0438 \u0435\u0441\u0442\u044c \u0444\u0430\u0439\u043b \u0418 \u043f\u0440\u0438\u043c\u0435\u043d\u0435\u043d\u0430 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044f\r\n resetTransformBtn.disabled = !hasFileAndReady || (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 async function handleFile(file) {\r\n \/\/ \u0421\u0431\u0440\u043e\u0441 \u0441\u0442\u0430\u0442\u0443\u0441\u0430 \u043f\u0440\u0438 \u043d\u043e\u0432\u043e\u0439 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0435 (\u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u043d\u043e\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430)\r\n statusMessage.textContent = '';\r\n statusMessage.className = 'heic-converter-status';\r\n \/\/ downloadLinkContainer.innerHTML = ''; \/\/ \u0411\u043e\u043b\u044c\u0448\u0435 \u043d\u0435 \u043d\u0443\u0436\u0435\u043d\r\n statusArea.style.display = 'none';\r\n uploadArea.classList.remove('upload-error');\r\n\r\n \/\/ \u0415\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u043e\u0432\u044b\u0439 \u0444\u0430\u0439\u043b, \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c blob \u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n if (!currentFileBlob || currentFileBlob !== file) {\r\n currentFileBlob = file;\r\n \/\/ \u0421\u0431\u0440\u043e\u0441 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435 \u041d\u041e\u0412\u041e\u0413\u041e \u0444\u0430\u0439\u043b\u0430\r\n currentRotation = 0;\r\n isFlippedHorizontal = false;\r\n isFlippedVertical = false;\r\n originalImageDimensions = { width: 0, height: 0 }; \/\/ \u0421\u0431\u0440\u043e\u0441 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u043d\u043e\u0432\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\r\n updateTransformButtonStates(); \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 (\u0431\u0443\u0434\u0443\u0442 \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u044b, \u043f\u043e\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u044b \u043d\u0435 \u0437\u0430\u0433\u0440\u0443\u0437\u044f\u0442\u0441\u044f)\r\n }\r\n\r\n if (!file) {\r\n currentFileBlob = null;\r\n updateTransformButtonStates();\r\n return;\r\n }\r\n\r\n const fileName = file.name;\r\n const fileMimeType = file.type || '';\r\n const isHeic = \/\\.(heic|heif)$\/i.test(fileName) || fileMimeType === 'image\/heic' || fileMimeType === 'image\/heif';\r\n\r\n if (!isHeic) {\r\n showStatus(`Incorrect file format. Please upload a HEIC or HEIF file (received: ${fileName}, type: ${fileMimeType || 'unknown'}).`, 'error');\r\n currentFileBlob = null;\r\n updateTransformButtonStates();\r\n fileInput.value = '';\r\n return;\r\n }\r\n\r\n showStatus(`Processing \"${fileName}\"... Decoding HEIC file. This might take a moment...`, 'info');\r\n\r\n try {\r\n const conversionOptions = {\r\n blob: file,\r\n toType: \"image\/png\",\r\n };\r\n\r\n const convertedBlob = await heic2any(conversionOptions);\r\n const img = new Image();\r\n const objectURL = URL.createObjectURL(convertedBlob);\r\n\r\n img.onload = () => {\r\n URL.revokeObjectURL(objectURL);\r\n\r\n \/\/ \u0421\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043f\u0435\u0440\u0432\u0430\u044f \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432 \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u0444\u0430\u0439\u043b\u0430\r\n if (originalImageDimensions.width === 0) {\r\n originalImageDimensions.width = img.naturalWidth;\r\n originalImageDimensions.height = img.naturalHeight;\r\n }\r\n\r\n if (!originalImageDimensions.width || !originalImageDimensions.height) {\r\n showStatus(`Error reading dimensions from the decoded image \"${fileName}\".`, 'error');\r\n currentFileBlob = null;\r\n updateTransformButtonStates(); \/\/ \u0414\u0435\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\r\n return;\r\n }\r\n\r\n \/\/ \u0420\u0430\u0437\u043c\u0435\u0440\u044b \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u044b, \u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438\r\n updateTransformButtonStates();\r\n\r\n showStatus(`Processing \"${fileName}\"... Applying settings.`, 'info');\r\n\r\n const mimeType = outputFormatSelect.value;\r\n const quality = parseFloat(outputQualitySlider.value);\r\n const stripMetadata = stripExifCheckbox.checked;\r\n const maintainRatio = maintainAspectRatioCheckbox.checked;\r\n const useBG = useBackgroundColorCheckbox.checked && mimeType === 'image\/jpeg';\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 let targetWidth = originalImageDimensions.width;\r\n let targetHeight = originalImageDimensions.height;\r\n\r\n \/\/ \u041f\u0435\u0440\u0435\u0441\u0447\u0435\u0442 \u0440\u0430\u0437\u043c\u0435\u0440\u043e\u0432\r\n if (desiredWidth > 0 || desiredHeight > 0) {\r\n if (maintainRatio) {\r\n const originalRatio = originalImageDimensions.width \/ originalImageDimensions.height;\r\n if (!isFinite(originalRatio) || originalRatio <= 0) {\r\n showStatus(`Invalid original image dimensions for ratio calculation.`, 'error');\r\n return; \/\/ \u041d\u0435 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c blob, \u0447\u0442\u043e\u0431\u044b \u043c\u043e\u0436\u043d\u043e \u0431\u044b\u043b\u043e \u0438\u0441\u043f\u0440\u0430\u0432\u0438\u0442\u044c\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 \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u0440\u0430\u0437\u043c\u0435\u0440\u0430 Canvas\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(`Error: Output dimensions (${canvas.width}x${canvas.height}) are too large. Please reduce the size.`, 'error');\r\n return;\r\n }\r\n\r\n const ctx = canvas.getContext('2d');\r\n if (!ctx) {\r\n showStatus(`Error: Could not get canvas context.`, 'error');\r\n return;\r\n }\r\n\r\n try {\r\n ctx.save();\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 const centerX = canvas.width \/ 2;\r\n const centerY = canvas.height \/ 2;\r\n ctx.translate(centerX, centerY);\r\n if (currentRotation !== 0) {\r\n ctx.rotate(currentRotation * Math.PI \/ 180);\r\n }\r\n ctx.scale(isFlippedHorizontal ? -1 : 1, isFlippedVertical ? -1 : 1);\r\n const drawX = -targetWidth \/ 2;\r\n const drawY = -targetHeight \/ 2;\r\n ctx.drawImage(img, drawX, drawY, targetWidth, targetHeight);\r\n ctx.restore();\r\n\r\n showStatus(`Processing \"${fileName}\"... Encoding final image.`, 'info');\r\n\r\n let dataUrl;\r\n if (mimeType === 'image\/jpeg' || mimeType === 'image\/webp') {\r\n dataUrl = canvas.toDataURL(mimeType, quality);\r\n } else {\r\n dataUrl = canvas.toDataURL(mimeType);\r\n }\r\n\r\n if (!dataUrl || dataUrl === 'data:,') {\r\n throw new Error(\"Canvas encoding failed. Result is empty.\");\r\n }\r\n\r\n \/\/ \u0421\u043e\u0437\u0434\u0430\u0435\u043c \u0441\u0441\u044b\u043b\u043a\u0443 \u0434\u043b\u044f \u0441\u043a\u0430\u0447\u0438\u0432\u0430\u043d\u0438\u044f\r\n const link = document.createElement('a');\r\n link.href = dataUrl;\r\n\r\n \/\/ \u0424\u043e\u0440\u043c\u0438\u0440\u0443\u0435\u043c \u0438\u043c\u044f \u0444\u0430\u0439\u043b\u0430\r\n const originalName = fileName.replace(\/\\.(heic|heif)$\/i, '');\r\n let extension = mimeType.split('\/')[1];\r\n if (extension === 'jpeg') extension = 'jpg';\r\n link.download = `${originalName}_converted.${extension}`;\r\n\r\n \/\/ --- \u0418\u041d\u0418\u0426\u0418\u0418\u0420\u0423\u0415\u041c \u0421\u041a\u0410\u0427\u0418\u0412\u0410\u041d\u0418\u0415 ---\r\n link.click();\r\n \/\/ \u0421\u0441\u044b\u043b\u043a\u0443 \u043d\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0435\u043c \u0432 DOM, \u043e\u043d\u0430 \u043d\u0443\u0436\u043d\u0430 \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f .click()\r\n\r\n \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u0442\u0430\u0442\u0443\u0441\r\n if (stripMetadata) {\r\n showStatus(`Success! Download started for \"${link.download}\". EXIF data removed.`, 'success');\r\n } else {\r\n showStatus(`Success! Download started for \"${link.download}\". NOTE: EXIF data might be lost.`, 'success');\r\n }\r\n\r\n } catch (encodeError) {\r\n console.error(\"Canvas drawing\/encoding error:\", encodeError);\r\n showStatus(`Error during final image processing: ${encodeError.message}`, 'error');\r\n }\r\n\r\n }; \/\/ \u041a\u043e\u043d\u0435\u0446 img.onload\r\n\r\n img.onerror = (err) => {\r\n URL.revokeObjectURL(objectURL);\r\n console.error(\"Image loading error after HEIC conversion:\", err);\r\n showStatus(`Error loading the decoded image into memory. The file might be corrupted or incompatible.`, 'error');\r\n currentFileBlob = null;\r\n updateTransformButtonStates(); \/\/ \u0414\u0435\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\r\n };\r\n\r\n img.src = objectURL;\r\n\r\n } catch (error) {\r\n console.error(\"HEIC Conversion Error:\", error);\r\n let errorMessage = `Failed to convert HEIC file \"${fileName}\".`;\r\n if (error && error.message) { errorMessage += ` Details: ${error.message}`; }\r\n else if (error && error.code) { errorMessage += ` Code: ${error.code}`; }\r\n showStatus(errorMessage, 'error');\r\n currentFileBlob = null;\r\n updateTransformButtonStates(); \/\/ \u0414\u0435\u0430\u043a\u0442\u0438\u0432\u0438\u0440\u0443\u0435\u043c \u043a\u043d\u043e\u043f\u043a\u0438\r\n fileInput.value = '';\r\n }\r\n } \/\/ \u041a\u043e\u043d\u0435\u0446 handleFile\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 settingsContent.setAttribute('aria-hidden', 'true');\r\n toggleSettingsBtn.setAttribute('aria-expanded', 'false');\r\n toggleSettingsBtn.setAttribute('aria-controls', 'settingsContent');\r\n toggleSettingsBtn.addEventListener('click', toggleSettings);\r\n toggleSettingsBtn.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleSettings(); } });\r\n\r\n outputFormatSelect.addEventListener('change', () => {\r\n updateQualityControlVisibility();\r\n if (currentFileBlob) { handleFile(currentFileBlob); }\r\n });\r\n outputQualitySlider.addEventListener('input', updateQualityValueDisplay);\r\n outputQualitySlider.addEventListener('change', () => {\r\n if (currentFileBlob) { handleFile(currentFileBlob); }\r\n });\r\n outputWidthInput.addEventListener('change', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputWidthInput.value) outputHeightInput.value = '';\r\n if (currentFileBlob) handleFile(currentFileBlob);\r\n });\r\n outputHeightInput.addEventListener('change', () => {\r\n if (maintainAspectRatioCheckbox.checked && outputHeightInput.value) outputWidthInput.value = '';\r\n if (currentFileBlob) handleFile(currentFileBlob);\r\n });\r\n maintainAspectRatioCheckbox.addEventListener('change', () => {\r\n if (currentFileBlob) handleFile(currentFileBlob);\r\n });\r\n useBackgroundColorCheckbox.addEventListener('change', () => {\r\n toggleBackgroundColorPicker();\r\n if (currentFileBlob) handleFile(currentFileBlob);\r\n });\r\n backgroundColorPicker.addEventListener('change', () => {\r\n if (useBackgroundColorCheckbox.checked && currentFileBlob) {\r\n handleFile(currentFileBlob);\r\n }\r\n });\r\n maintainAspectRatioCheckbox.nextElementSibling.addEventListener('click', () => maintainAspectRatioCheckbox.click());\r\n useBackgroundColorCheckbox.nextElementSibling.addEventListener('click', () => useBackgroundColorCheckbox.click());\r\n stripExifCheckbox.nextElementSibling.addEventListener('click', () => stripExifCheckbox.click());\r\n stripExifCheckbox.addEventListener('change', () => {\r\n if (currentFileBlob) handleFile(currentFileBlob);\r\n });\r\n\r\n \/\/ --- \u0422\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 ---\r\n function applyTransformation(transformFunc) {\r\n if (!currentFileBlob || originalImageDimensions.width === 0) return; \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0433\u043e\u0442\u043e\u0432\u043d\u043e\u0441\u0442\u044c\r\n transformFunc();\r\n updateTransformButtonStates(); \/\/ \u041e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u043c \u0441\u043e\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043a\u043d\u043e\u043f\u043e\u043a (\u043e\u0441\u043e\u0431\u0435\u043d\u043d\u043e Reset)\r\n handleFile(currentFileBlob); \/\/ \u041f\u0435\u0440\u0435\u0437\u0430\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0443\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 \/\/ \u041a\u043d\u043e\u043f\u043a\u0430 Reset \u0442\u0435\u043f\u0435\u0440\u044c \u0432\u044b\u0437\u044b\u0432\u0430\u0435\u0442 resetTransformations, \u043a\u043e\u0442\u043e\u0440\u0430\u044f \u0441\u0430\u043c\u0430 \u043e\u0431\u043d\u043e\u0432\u0438\u0442 \u043a\u043d\u043e\u043f\u043a\u0438 \u0438 \u0432\u044b\u0437\u043e\u0432\u0435\u0442 handleFile \u0435\u0441\u043b\u0438 \u043d\u0443\u0436\u043d\u043e\r\n resetTransformBtn.addEventListener('click', resetTransformations);\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 && event.target.files.length > 0) {\r\n \/\/ \u041d\u0415 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c, \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043c\u043e\u0436\u0435\u0442 \u0445\u043e\u0442\u0435\u0442\u044c \u043f\u0440\u0438\u043c\u0435\u043d\u0438\u0442\u044c \u0438\u0445 \u043a \u043d\u043e\u0432\u043e\u043c\u0443 \u0444\u0430\u0439\u043b\u0443\r\n \/\/ resetTransformations(); \/\/ \u0423\u0431\u0440\u0430\u043b\u0438 \u0441\u0431\u0440\u043e\u0441 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043f\u0440\u0438 \u0432\u044b\u0431\u043e\u0440\u0435\r\n handleFile(event.target.files[0]);\r\n } else {\r\n resetInterface(); \/\/ \u041f\u043e\u043b\u043d\u044b\u0439 \u0441\u0431\u0440\u043e\u0441, \u0435\u0441\u043b\u0438 \u0444\u0430\u0439\u043b \u043e\u0442\u043c\u0435\u043d\u0435\u043d\r\n }\r\n });\r\n\r\n \/\/ --- Drag and Drop ---\r\n uploadArea.addEventListener('dragover', (event) => {\r\n event.preventDefault();\r\n uploadArea.classList.add('drag-over');\r\n });\r\n uploadArea.addEventListener('dragleave', (event) => {\r\n uploadArea.classList.remove('drag-over');\r\n });\r\n uploadArea.addEventListener('drop', (event) => {\r\n event.preventDefault();\r\n uploadArea.classList.remove('drag-over');\r\n if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {\r\n const droppedFile = event.dataTransfer.files[0];\r\n const fileNameDrop = droppedFile.name;\r\n const fileMimeTypeDrop = droppedFile.type || '';\r\n const isHeicDrop = \/\\.(heic|heif)$\/i.test(fileNameDrop) || fileMimeTypeDrop === 'image\/heic' || fileMimeTypeDrop === 'image\/heif';\r\n\r\n if (isHeicDrop) {\r\n fileInput.files = event.dataTransfer.files;\r\n \/\/ \u041d\u0415 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0435\u043c \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0437\u0434\u0435\u0441\u044c\r\n \/\/ resetTransformations(); \/\/ \u0423\u0431\u0440\u0430\u043b\u0438 \u0441\u0431\u0440\u043e\u0441 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0439 \u043f\u0440\u0438 \u0434\u0440\u043e\u043f\u0435\r\n handleFile(droppedFile);\r\n } else {\r\n showStatus(`Incorrect file format dropped. Please drop a HEIC or HEIF file (received: ${fileNameDrop}, type: ${fileMimeTypeDrop || 'unknown'}).`, 'error');\r\n fileInput.value = '';\r\n currentFileBlob = null;\r\n updateTransformButtonStates();\r\n }\r\n } else {\r\n resetInterface();\r\n }\r\n });\r\n\r\n \/\/ --- \u041f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u0430\u044f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u0430 ---\r\n updateQualityControlVisibility();\r\n toggleBackgroundColorPicker();\r\n updateTransformButtonStates(); \/\/ \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u043a\u043d\u043e\u043f\u043a\u0438 \u0442\u0440\u0430\u043d\u0441\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u0432\u044b\u043a\u043b\u044e\u0447\u0435\u043d\u044b\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-575d0c1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"575d0c1\" 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-f3365e0\" data-id=\"f3365e0\" 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-c4ab0e7 elementor-widget elementor-widget-text-editor\" data-id=\"c4ab0e7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Andere Formate: <a href=\"https:\/\/pngate.com\/de\/avif-to-png\/\">Avif zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/webp-zu-png\/\">Webp zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/gif-to-png\/\">Gif zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/jpeg-to-png\/\">JPEG zu PNG<\/a>, <a href=\"https:\/\/pngate.com\/de\/svg-to-png\/\">SVG zu PNG<\/a><\/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-78fa69d elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"78fa69d\" 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-83e295d\" data-id=\"83e295d\" 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-7befef0 elementor-widget elementor-widget-text-editor\" data-id=\"7befef0\" 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-3e8b238 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=\"3e8b238\" 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-53d46b4 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"53d46b4\" 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-5df0925\" data-id=\"5df0925\" 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-e819237\" data-id=\"e819237\" 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-2d2fa93 elementor-widget elementor-widget-text-editor\" data-id=\"2d2fa93\" 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 HEIC oder HEIF schnell und ohne Qualit\u00e4tsverlust in PNG konvertieren? Unser kostenloser Online-Konverter wandelt iPhone- und Smartphone-Bilder sofort und sicher in hochwertige PNG-Dateien um.<\/p><h2>Was sind HEIC- und HEIF-Dateien?<\/h2><p>HEIF (High Efficiency Image Format) ist ein modernes Bildcontainerformat, das Fotos effizienter speichert als JPG. HEIC ist das am h\u00e4ufigsten verwendete HEIF-basierte Format auf Apple-Ger\u00e4ten.<\/p><p>Obwohl HEIC\/HEIF-Dateien hervorragend zum Platzsparen geeignet sind, werden sie von vielen Apps, Websites und Editoren immer noch nicht unterst\u00fctzt. Deshalb ist oft eine Konvertierung in das allgemein akzeptierte PNG-Format erforderlich.<\/p><h2>Warum HEIC\/HEIF in PNG konvertieren?<\/h2><p>Es gibt mehrere Gr\u00fcnde, Ihre HEIC- oder HEIF-Dateien in PNG zu konvertieren:<\/p><ul><li><strong>Bessere Kompatibilit\u00e4t:<\/strong> PNG funktioniert \u00fcberall \u2013 von Browsern \u00fcber Bildbearbeitungsprogramme bis hin zu Websites.<\/li><li><strong>Kein Qualit\u00e4tsverlust:<\/strong> PNG ist ein verlustfreies Format, bei dem die Bilddetails erhalten bleiben.<\/li><li><strong>Einfaches Teilen:<\/strong> PNG-Dateien k\u00f6nnen problemlos hochgeladen, bearbeitet und gedruckt werden.<\/li><li><strong>Funktioniert in jeder Software:<\/strong> PNG wird vollst\u00e4ndig von Photoshop, Canva, Figma und mehr unterst\u00fctzt.<\/li><\/ul><h2>So konvertieren Sie HEIC oder HEIF online in PNG<\/h2><p>Die Verwendung unseres HEIC\/HEIF-zu-PNG-Konverters ist schnell, sicher und einfach:<\/p><ol><li><strong>Laden Sie Ihre HEIC- oder HEIF-Datei hoch<\/strong> \u2013 Ziehen Sie per Drag & Drop oder durchsuchen Sie Ihr Ger\u00e4t.<\/li><li><strong>Die Konvertierung beginnt sofort<\/strong> \u2013 Sie m\u00fcssen keine Tasten dr\u00fccken.<\/li><li><strong>Laden Sie Ihre PNG-Datei herunter<\/strong> \u2013 Erhalten Sie Ihr neues hochwertiges Bild in Sekunden.<\/li><\/ol><p>Alles l\u00e4uft in Ihrem Browser \u2013 keine Installation, keine Registrierung und keine Datei verl\u00e4sst Ihr Ger\u00e4t.<\/p><h2>Vorteile der Verwendung unseres Online-HEIC\/HEIF-Konverters<\/h2><ul><li><strong>Kostenlos und unbegrenzt<\/strong> \u2013 Keine Geb\u00fchren, keine Nutzungsbeschr\u00e4nkungen.<\/li><li><strong>Schnell und nahtlos<\/strong> \u2013 Konvertiert in Sekunden, kein Warten.<\/li><li><strong>Sicher<\/strong> \u2013 Dateien werden lokal verarbeitet und nie auf einen Server hochgeladen.<\/li><li><strong>Erh\u00e4lt die Bildqualit\u00e4t<\/strong> \u2013 Die PNG-Ausgabe ist scharf und pixelgenau.<\/li><li><strong>Ger\u00e4te\u00fcbergreifend<\/strong> \u2013 Funktioniert unter Windows, Mac, Android, iOS und Linux.<\/li><\/ul><h2>HEIC\/HEIF vs. PNG: Formatvergleich<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Besonderheit<\/th><th>HEIC \/ HEIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Kompression<\/td><td>Hohe Effizienz (kleine Gr\u00f6\u00dfe)<\/td><td>Verlustfrei (gr\u00f6\u00dfere Gr\u00f6\u00dfe)<\/td><\/tr><tr><td>Transparenz<\/td><td>Nicht vollst\u00e4ndig unterst\u00fctzt<\/td><td>Vollst\u00e4ndig unterst\u00fctzt<\/td><\/tr><tr><td>Kompatibilit\u00e4t<\/td><td>Eingeschr\u00e4nkt (auf Apple fokussiert)<\/td><td>Universal<\/td><\/tr><tr><td>Bearbeitungsunterst\u00fctzung<\/td><td>Beschr\u00e4nkt<\/td><td>Volle Unterst\u00fctzung<\/td><\/tr><tr><td>Anwendungsfall<\/td><td>iPhone\/iOS-Fotospeicher<\/td><td>Gestalten, Teilen, Bearbeiten<\/td><\/tr><\/tbody><\/table><h2>H\u00e4ufig gestellte Fragen<\/h2><h5>Kann ich HEIF-Dateien von jedem Ger\u00e4t aus konvertieren?<\/h5><p>Ja. Egal, ob von einem iPhone, iPad oder Android-Ger\u00e4t \u2013 Sie k\u00f6nnen HEIC- oder HEIF-Dateien direkt in Ihrem Browser hochladen und konvertieren.<\/p><h5>Behalten PNG Qualit\u00e4t und Aufl\u00f6sung bei?<\/h5><p>Absolut. Die Konvertierung ist verlustfrei \u2013 Sie erhalten ein sauberes, hochaufl\u00f6sendes PNG ohne Komprimierungsartefakte.<\/p><h5>Muss ich Software installieren oder mich registrieren?<\/h5><p>Nein. Die Konvertierung von HEIC\/HEIF in PNG erfolgt vollst\u00e4ndig online. Sie ist kostenlos, sofort verf\u00fcgbar und erfordert keine Einrichtung.<\/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-33f395e\" data-id=\"33f395e\" 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>HEIC to PNG Converter Convert HEIC to PNG for Free Online. Just upload your HEIC\/HEIF images below and get high-quality PNG files in seconds. HEIC to<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":4932,"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-4922","page","type-page","status-publish","has-post-thumbnail","hentry"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4922","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=4922"}],"version-history":[{"count":20,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4922\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/pages\/4922\/revisions\/4971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media\/4932"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/de\/wp-json\/wp\/v2\/media?parent=4922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}