95 lines
3.5 KiB
JavaScript
95 lines
3.5 KiB
JavaScript
let imageEditor;
|
|
|
|
function enableEditor(imageUrl, filename) {
|
|
document.getElementById('image-editor-container').style.display = 'block';
|
|
document.getElementById('original-image').style.display = 'none'; // Oculta la imagen original
|
|
|
|
// Si ya existe un editor, lo eliminamos antes de crear otro
|
|
if (imageEditor) {
|
|
imageEditor.destroy();
|
|
}
|
|
|
|
imageEditor = new tui.ImageEditor(document.getElementById('tui-image-editor'), {
|
|
includeUI: {
|
|
loadImage: {
|
|
path: imageUrl,
|
|
name: filename
|
|
},
|
|
theme: {},
|
|
menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
|
|
initMenu: 'filter',
|
|
menuBarPosition: 'bottom',
|
|
uiSize: {
|
|
width: '1000px', // Ajusta el ancho si es necesario
|
|
height: '1200px' // Tamaño inicial (se usará como referencia)
|
|
}
|
|
},
|
|
cssMaxWidth: 1000,
|
|
cssMaxHeight: 1200,
|
|
usageStatistics: false
|
|
});
|
|
|
|
// Ajustar el tamaño del editor dinámicamente y cargar la imagen
|
|
setTimeout(() => {
|
|
const container = document.getElementById('tui-image-editor');
|
|
const toolboxHeight = 80; // Espacio reservado para la caja de herramientas
|
|
const imageRatio = imageEditor.getImageRatio() || 0.75;
|
|
const dynamicHeight = container.clientWidth * imageRatio + toolboxHeight;
|
|
imageEditor.ui.resizeEditor({ width: container.clientWidth, height: dynamicHeight });
|
|
imageEditor.loadImageFromURL(imageUrl, filename)
|
|
.then(() => {
|
|
console.log("Image loaded successfully");
|
|
imageEditor.ui.activeMenuEvent(); // Activa los menús una vez cargada la imagen
|
|
})
|
|
.catch(err => console.error("Failed to load image", err));
|
|
}, 500);
|
|
}
|
|
|
|
function saveEditedImage() {
|
|
const editedImageData = imageEditor.toDataURL("image/png");
|
|
|
|
fetch(window.FLASK_VARS.saveImageUrl, {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ image: editedImageData })
|
|
})
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error("Error al guardar la imagen");
|
|
}
|
|
return response.json(); // Convertir respuesta a JSON si el backend devuelve algo
|
|
})
|
|
.then(data => {
|
|
showToast("Imagen guardada!", "bg-success");
|
|
|
|
// 🔥 Ocultar el editor y el botón de guardar
|
|
document.getElementById("image-editor-container").style.display = "none";
|
|
|
|
let saveButton = document.querySelector("button[onclick^='saveEditedImage']");
|
|
if (saveButton) {
|
|
saveButton.style.display = "none";
|
|
}
|
|
|
|
// 🔥 Ocultar el botón de "Remove GPS Data" (porque ya no hay datos GPS en la imagen editada)
|
|
let gpsButton = document.getElementById("gps-button");
|
|
if (gpsButton) {
|
|
gpsButton.style.display = "none";
|
|
}
|
|
|
|
// 🔥 Volver a mostrar la imagen editada sin caché, con un pequeño delay para evitar caché del navegador
|
|
setTimeout(() => {
|
|
let img = document.getElementById('original-image');
|
|
if (img) {
|
|
img.style.display = "block";
|
|
img.src = img.src.split("?")[0] + "?t=" + new Date().getTime();
|
|
}
|
|
}, 1000); // Pequeño delay para asegurar que la imagen ya está guardada
|
|
})
|
|
.catch(err => {
|
|
console.error("Network error:", err);
|
|
showToast("Error al guardar la imagen", "bg-danger");
|
|
});
|
|
}
|
|
|
|
|