Convertidor de HEIC a 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 Subir imagen HEIC\r\n <\/label>\r\n \r\n <div class=\"heic-upload-hint\">\r\n <span class=\"main-hint\">o suelta un archivo aqu\u00ed<\/span>\r\n <span class=\"sub-hint\">(Convierte archivos HEIC\/HEIF a PNG de forma predeterminada)<\/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 Configuraci\u00f3n avanzada \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>Formato y calidad de salida<\/h4>\r\n <label for=\"outputFormat\" class=\"inline-label\">Formato:<\/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\">Calidad:<\/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>Nota: PNG no tiene p\u00e9rdida, el control deslizante de calidad afecta solo a 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;\">Eliminar EXIF\/metadatos<\/label>\r\n <\/div>\r\n <small>Elimina la ubicaci\u00f3n, la informaci\u00f3n de la c\u00e1mara, etc. del archivo de salida (si est\u00e1 presente en HEIC).<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Cambiar el tama\u00f1o<\/h4>\r\n <div>\r\n <label for=\"outputWidth\" class=\"inline-label\">Ancho:<\/label>\r\n <input type=\"number\" id=\"outputWidth\" placeholder=\"original\" min=\"1\">\r\n <label for=\"outputHeight\" class=\"inline-label\">Altura:<\/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\">Mantener la relaci\u00f3n de aspecto<\/label>\r\n <\/div>\r\n \r\n <small>Nota: Si no se especifica ning\u00fan tama\u00f1o, se utilizar\u00e1n las dimensiones HEIC originales.<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Fondo<\/h4>\r\n <div>\r\n <input type=\"checkbox\" id=\"useBackgroundColor\" disabled> \r\n <label for=\"useBackgroundColor\" class=\"bg-color-label\">A\u00f1adir color de fondo:<\/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>(\u00datil principalmente cuando se exporta en formato JPEG)<\/small>\r\n <\/div>\r\n \r\n <div class=\"setting-group\">\r\n <h4>Transformar<\/h4>\r\n <div class=\"transform-buttons\">\r\n <button type=\"button\" id=\"rotateBtn\" title=\"Girar 90\u00b0 en el sentido de las agujas del reloj\">Girar 90\u00b0 en sentido horario<\/button>\r\n <button type=\"button\" id=\"flipHorizontalBtn\" title=\"Voltear horizontalmente\">Voltear horizontalmente<\/button>\r\n <button type=\"button\" id=\"flipVerticalBtn\" title=\"Voltear verticalmente\">Voltear verticalmente<\/button>\r\n <button type=\"button\" id=\"resetTransformBtn\" title=\"Restablecer transformaciones\">Restablecer transformaciones<\/button>\r\n <\/div>\r\n <small>(La rotaci\u00f3n podr\u00eda afectar las dimensiones si no se mantiene la relaci\u00f3n de aspecto)<\/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>Otros formatos: <a href=\"https:\/\/pngate.com\/es\/avif-to-png\/\">Avif a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/webp-a-png\/\">Webp a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/gif-to-png\/\">GIF a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/jpeg-to-png\/\">JPEG a PNG<\/a>, <a href=\"https:\/\/pngate.com\/es\/svg-to-png\/\">SVG a 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>\u00bfTe result\u00f3 \u00fatil? \u00a1Comp\u00e1rtelo!<\/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\tTelegrama\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\tGorjeo\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>\u00bfNecesitas convertir HEIC o HEIF a PNG r\u00e1pidamente y sin perder calidad? Nuestro conversor online gratuito transforma im\u00e1genes de iPhone y smartphones modernos en archivos PNG de alta calidad, al instante y de forma segura.<\/p><h2>\u00bfQu\u00e9 son los archivos HEIC y HEIF?<\/h2><p>HEIF (Formato de Imagen de Alta Eficiencia) es un formato contenedor de im\u00e1genes moderno que almacena fotos con mayor eficiencia que JPG. HEIC es el formato basado en HEIF m\u00e1s com\u00fan en dispositivos Apple.<\/p><p>Aunque los archivos HEIC\/HEIF son excelentes para ahorrar espacio, muchas aplicaciones, sitios web y editores a\u00fan no los admiten. Por eso, a menudo es necesario convertirlos a PNG, un formato universalmente aceptado.<\/p><h2>\u00bfPor qu\u00e9 convertir HEIC\/HEIF a PNG?<\/h2><p>Hay varias razones para convertir sus archivos HEIC o HEIF a PNG:<\/p><ul><li><strong>Mejor compatibilidad:<\/strong> PNG funciona en todas partes: desde navegadores hasta editores de fotograf\u00edas y sitios web.<\/li><li><strong>Sin p\u00e9rdida de calidad:<\/strong> PNG es un formato sin p\u00e9rdida que mantiene intactos los detalles de la imagen.<\/li><li><strong>F\u00e1cil de compartir:<\/strong> Los archivos PNG se pueden cargar, editar e imprimir sin problemas.<\/li><li><strong>Funciona en todo el software:<\/strong> PNG es totalmente compatible con Photoshop, Canva, Figma y m\u00e1s.<\/li><\/ul><h2>C\u00f3mo convertir HEIC o HEIF a PNG en l\u00ednea<\/h2><p>Usar nuestro convertidor de HEIC\/HEIF a PNG es r\u00e1pido, seguro y sencillo:<\/p><ol><li><strong>Sube tu archivo HEIC o HEIF<\/strong> \u2013 Arrastre y suelte, o navegue desde su dispositivo.<\/li><li><strong>La conversi\u00f3n comienza instant\u00e1neamente<\/strong> \u2013 No es necesario presionar ning\u00fan bot\u00f3n.<\/li><li><strong>Descargue su PNG<\/strong> \u2013 Obtenga su nueva imagen de alta calidad en segundos.<\/li><\/ol><p>Todo se ejecuta en tu navegador: sin instalaci\u00f3n, sin registro y ning\u00fan archivo sale de tu dispositivo.<\/p><h2>Beneficios de usar nuestro convertidor HEIC\/HEIF en l\u00ednea<\/h2><ul><li><strong>Gratis e ilimitado<\/strong> \u2013 Sin tarifas, sin l\u00edmites de uso.<\/li><li><strong>R\u00e1pido y sin problemas<\/strong> \u2013 Convierte en segundos, sin esperas.<\/li><li><strong>Seguro<\/strong> \u2013 Los archivos se procesan localmente y nunca se cargan en un servidor.<\/li><li><strong>Conserva la calidad de la imagen<\/strong> \u2013 La salida PNG es n\u00edtida y con p\u00edxeles perfectos.<\/li><li><strong>Entre dispositivos<\/strong> \u2013 Funciona en Windows, Mac, Android, iOS y Linux.<\/li><\/ul><h2>HEIC\/HEIF vs PNG: Comparaci\u00f3n de formatos<\/h2><table border=\"1\" cellspacing=\"0\" cellpadding=\"8\"><thead><tr><th>Caracter\u00edstica<\/th><th>HEIC \/ HEIF<\/th><th>PNG<\/th><\/tr><\/thead><tbody><tr><td>Compresi\u00f3n<\/td><td>Alta eficiencia (tama\u00f1o peque\u00f1o)<\/td><td>Sin p\u00e9rdida (tama\u00f1o m\u00e1s grande)<\/td><\/tr><tr><td>Transparencia<\/td><td>No totalmente compatible<\/td><td>Totalmente compatible<\/td><\/tr><tr><td>Compatibilidad<\/td><td>Limitado (centrado en Apple)<\/td><td>Universal<\/td><\/tr><tr><td>Soporte de edici\u00f3n<\/td><td>Limitado<\/td><td>Soporte completo<\/td><\/tr><tr><td>Caso de uso<\/td><td>Almacenamiento de fotos en iPhone\/iOS<\/td><td>Dise\u00f1ar, compartir, editar<\/td><\/tr><\/tbody><\/table><h2>Preguntas frecuentes<\/h2><h5>\u00bfPuedo convertir archivos HEIF desde cualquier dispositivo?<\/h5><p>S\u00ed. Ya sea desde un iPhone, iPad o dispositivo Android, puedes cargar y convertir archivos HEIC o HEIF directamente en tu navegador.<\/p><h5>\u00bfEl formato PNG conservar\u00e1 la calidad y la resoluci\u00f3n?<\/h5><p>Por supuesto. La conversi\u00f3n es sin p\u00e9rdidas: obtienes un PNG limpio y de alta resoluci\u00f3n, sin artefactos de compresi\u00f3n.<\/p><h5>\u00bfNecesito instalar software o registrarme?<\/h5><p>No. La conversi\u00f3n de HEIC\/HEIF a PNG se realiza completamente en l\u00ednea. Es gratuita, instant\u00e1nea y no requiere configuraci\u00f3n.<\/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>Conversor de HEIC a PNG. Convierte HEIC a PNG gratis en l\u00ednea. Simplemente sube tus im\u00e1genes HEIC\/HEIF a continuaci\u00f3n y obt\u00e9n archivos PNG de alta calidad en segundos. Conversor de HEIC a PNG.<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\/es\/wp-json\/wp\/v2\/pages\/4922","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/comments?post=4922"}],"version-history":[{"count":20,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4922\/revisions"}],"predecessor-version":[{"id":4971,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/pages\/4922\/revisions\/4971"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media\/4932"}],"wp:attachment":[{"href":"https:\/\/pngate.com\/es\/wp-json\/wp\/v2\/media?parent=4922"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}