Convertisseur HEIC en PNG<\/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 T\u00e9l\u00e9charger l'image HEIC\r\n <\/label>\r\n \r\n <div class=\"heic-upload-hint\">\r\n <span class=\"main-hint\">ou d\u00e9posez un fichier ici<\/span>\r\n <span class=\"sub-hint\">(Convertit les fichiers HEIC\/HEIF en PNG par d\u00e9faut)<\/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 Param\u00e8tres avanc\u00e9s \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>Format et qualit\u00e9 de sortie<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Format:<\/label>\r\n <select id=\"outputFormat\">\r\n <option value=\"image\/png\" selected>PNG<\/option>\r\n <option value=\"image\/jpeg\">JPEG<\/option>\r\n <option value=\"image\/webp\">WebP<\/option>\r\n <\/select>\r\n <div class=\"quality-setting hidden\" id=\"qualityControl\">\r\n <label for=\"outputQuality\" class=\"inline-label\">Qualit\u00e9:<\/label>\r\n <input type=\"range\" id=\"outputQuality\" min=\"0.1\" max=\"1.0\" step=\"0.05\" value=\"0.9\">\r\n <span id=\"qualityValue\">0.90<\/span>\r\n <\/div>\r\n <small>Remarque\u00a0: le format PNG est sans perte, le curseur de qualit\u00e9 affecte uniquement JPEG\/WebP.<\/small>\r\n \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;\">Supprimer les EXIF\/m\u00e9tadonn\u00e9es<\/label>\r\n <\/div>\r\n <small>Supprime l'emplacement, les informations sur la cam\u00e9ra, etc. du fichier de sortie (s'il est pr\u00e9sent dans HEIC).<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Redimensionner<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Largeur:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"original\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Hauteur:<\/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\">Maintenir le rapport hauteur\/largeur<\/label>\r\n <\/div>\r\n \r\n <small>Remarque\u00a0: si aucune taille n\u2019est sp\u00e9cifi\u00e9e, les dimensions HEIC d\u2019origine seront utilis\u00e9es.<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Arri\u00e8re-plan<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\" disabled> \r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">Ajouter une couleur d'arri\u00e8re-plan\u00a0:<\/label>\r\n <input type=\"color\" id=\"backgroundColor\" value=\"#FFFFFF\" style=\"vertical-align: middle; margin-left: 5px;\" disabled>\r\n <\/div>\r\n \r\n <small>(Utile principalement lors de la sortie au format JPEG)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformer<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Rotation de 90\u00b0 dans le sens des aiguilles d'une montre\">Rotation de 90\u00b0 dans le sens des aiguilles d'une montre<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Retourner horizontalement\">Retourner horizontalement<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Retourner verticalement\">Retourner verticalement<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"R\u00e9initialiser les transformations\">R\u00e9initialiser les transformations<\/button>\r\n <\/div>\r\n <small>(La rotation peut affecter les dimensions si le rapport hauteur\/largeur n'est pas maintenu)<\/small>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n \r\n\r\n\r\n \r\n \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>Autres formats : <a href=\"https:\/\/pngate.com\/fr\/avif-to-png\/\">Avif vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/webp-vers-png\/\">Webp vers PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/gif-to-png\/\">Gif en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/jpeg-to-png\/\">JPEG en PNG<\/a>, <a href=\"https:\/\/pngate.com\/fr\/svg-to-png\/\">SVG en PNG<\/a><\/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>Vous avez trouv\u00e9 cela utile\u00a0? Partagez-le\u00a0!<\/h5>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-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\tT\u00e9l\u00e9gramme\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_facebook\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on facebook\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-facebook\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tFacebook\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_twitter\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on twitter\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-twitter\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tGazouillement\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-grid-item\">\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tclass=\"elementor-share-btn elementor-share-btn_reddit\"\n\t\t\t\t\t\t\trole=\"button\"\n\t\t\t\t\t\t\ttabindex=\"0\"\n\t\t\t\t\t\t\taria-label=\"Share on reddit\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__icon\">\n\t\t\t\t\t\t\t\t<i class=\"fab fa-reddit\" aria-hidden=\"true\"><\/i>\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<div class=\"elementor-share-btn__text\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-share-btn__title\">\n\t\t\t\t\t\t\t\t\t\tReddit\t\t\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-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>Besoin de convertir des fichiers HEIC ou HEIF en PNG rapidement et sans perte de qualit\u00e9\u00a0? Notre convertisseur en ligne gratuit transforme instantan\u00e9ment et en toute s\u00e9curit\u00e9 les images de votre iPhone et de vos smartphones modernes en fichiers PNG de haute qualit\u00e9.<\/p><h2>Que sont les fichiers HEIC et HEIF\u00a0?<\/h2><p>HEIF (High Efficiency Image Format) est un format d'image moderne qui stocke les photos plus efficacement que le format JPG. HEIC est le format bas\u00e9 sur HEIF le plus courant utilis\u00e9 sur les appareils Apple.<\/p><p>Bien que les fichiers HEIC\/HEIF soient tr\u00e8s pratiques pour gagner de la place, de nombreuses applications, sites web et \u00e9diteurs ne les prennent pas encore en charge. C'est pourquoi la conversion au format PNG, un format universellement accept\u00e9, est souvent n\u00e9cessaire.<\/p><h2>Pourquoi convertir HEIC\/HEIF en PNG\u00a0?<\/h2><p>Il existe plusieurs raisons de convertir vos fichiers HEIC ou HEIF en PNG\u00a0:<\/p><ul><li><strong>Meilleure compatibilit\u00e9 :<\/strong> Le format PNG fonctionne partout : des navigateurs aux \u00e9diteurs de photos et aux sites Web.<\/li><li><strong>Aucune perte de qualit\u00e9 :<\/strong> PNG est un format sans perte qui conserve les d\u00e9tails de l'image intacts.<\/li><li><strong>Partage facile :<\/strong> Les fichiers PNG peuvent \u00eatre t\u00e9l\u00e9charg\u00e9s, modifi\u00e9s et imprim\u00e9s sans probl\u00e8me.<\/li><li><strong>Fonctionne avec tous les logiciels :<\/strong> PNG est enti\u00e8rement pris en charge par Photoshop, Canva, Figma et bien d'autres.<\/li><\/ul><h2>Comment convertir un fichier HEIC ou HEIF en PNG en ligne<\/h2><p>L'utilisation de notre convertisseur HEIC\/HEIF en PNG est rapide, s\u00e9curis\u00e9e et simple\u00a0:<\/p><ol><li><strong>T\u00e9l\u00e9chargez votre fichier HEIC ou HEIF<\/strong> \u2013 Faites glisser et d\u00e9posez, ou naviguez depuis votre appareil.<\/li><li><strong>La conversion commence instantan\u00e9ment<\/strong> \u2013 Pas besoin d\u2019appuyer sur aucun bouton.<\/li><li><strong>T\u00e9l\u00e9chargez votre PNG<\/strong> \u2013 Obtenez votre nouvelle image de haute qualit\u00e9 en quelques secondes.<\/li><\/ol><p>Tout fonctionne dans votre navigateur : aucune installation, aucune inscription et aucun fichier ne quitte votre appareil.<\/p><h2>Avantages de l'utilisation de notre convertisseur HEIC\/HEIF en ligne<\/h2><ul><li><strong>Gratuit et illimit\u00e9<\/strong> \u2013 Pas de frais, pas de limite d\u2019utilisation.<\/li><li><strong>Rapide et transparent<\/strong> \u2013 Conversion en quelques secondes, sans attente.<\/li><li><strong>S\u00e9curis\u00e9<\/strong> \u2013 Les fichiers sont trait\u00e9s localement et ne sont jamais t\u00e9l\u00e9charg\u00e9s sur un serveur.<\/li><li><strong>Pr\u00e9serve la qualit\u00e9 de l'image<\/strong> \u2013 La sortie PNG est nette et parfaite au pixel pr\u00e8s.<\/li><li><strong>Multi-appareils<\/strong> \u2013 Fonctionne sur Windows, Mac, Android, iOS et Linux.<\/li><\/ul><h2>HEIC\/HEIF vs PNG\u00a0: comparaison des formats<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Fonctionnalit\u00e9<\/th><th>HEIC \/ HEIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Compression<\/td><td>Haute efficacit\u00e9 (petite taille)<\/td><td>Sans perte (taille plus grande)<\/td><\/tr><tr><td>Transparence<\/td><td>Pas enti\u00e8rement pris en charge<\/td><td>Enti\u00e8rement pris en charge<\/td><\/tr><tr><td>Compatibilit\u00e9<\/td><td>Limit\u00e9 (ax\u00e9 sur Apple)<\/td><td>Universel<\/td><\/tr><tr><td>Support d'\u00e9dition<\/td><td>Limit\u00e9<\/td><td>Support complet<\/td><\/tr><tr><td>Cas d'utilisation<\/td><td>Stockage de photos iPhone\/iOS<\/td><td>Conception, partage, \u00e9dition<\/td><\/tr><\/tbody><\/table><h2>Questions fr\u00e9quemment pos\u00e9es<\/h2><h5>Puis-je convertir des fichiers HEIF \u00e0 partir de n'importe quel appareil ?<\/h5><p>Oui. Que ce soit depuis un iPhone, un iPad ou un appareil Android, vous pouvez t\u00e9l\u00e9charger et convertir des fichiers HEIC ou HEIF directement dans votre navigateur.<\/p><h5>Le PNG pr\u00e9servera-t-il la qualit\u00e9 et la r\u00e9solution\u00a0?<\/h5><p>Absolument. La conversion est sans perte\u00a0: vous obtenez un PNG propre, haute r\u00e9solution et sans artefacts de compression.<\/p><h5>Dois-je installer un logiciel ou m'inscrire ?<\/h5><p>Non. La conversion HEIC\/HEIF en PNG s'effectue enti\u00e8rement en ligne. C'est gratuit, instantan\u00e9 et aucune configuration n'est requise.<\/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>Convertisseur HEIC en PNG\u00a0: convertissez gratuitement vos fichiers HEIC en PNG en ligne. T\u00e9l\u00e9chargez simplement vos images HEIC\/HEIF ci-dessous et obtenez des fichiers PNG de haute qualit\u00e9 en quelques secondes.<span class=\"excerpt-hellip\"> [\u2026]<\/span><\/p>","protected":false},"author":1,"featured_media":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\/fr\/wp-json\/wp\/v2\/pages\/4922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/comments?post=4922"}],"version-history":[{"count":20,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4922\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/pages\/4922\/revisions\/4971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media\/4932"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/fr\/wp-json\/wp\/v2\/media?parent=4922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}