1149 lines
45 KiB
JavaScript
1149 lines
45 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
// Funzione per caricare il contenuto del popup
|
|
async function loadPopupContent(iddatadb) {
|
|
const popupContent = document.getElementById("popupContent");
|
|
if (!popupContent) {
|
|
console.error("Elemento popupContent non trovato");
|
|
return;
|
|
}
|
|
try {
|
|
console.log("Caricamento contenuto per iddatadb:", iddatadb);
|
|
const response = await fetch(
|
|
`photos_popup.php?iddatadb=${iddatadb}`,
|
|
);
|
|
if (!response.ok)
|
|
throw new Error("Errore nella risposta del server");
|
|
popupContent.innerHTML = await response.text();
|
|
attachPhotoEventListeners(iddatadb);
|
|
} catch (error) {
|
|
popupContent.innerHTML = `<p>Errore durante il caricamento: ${error.message}</p>`;
|
|
console.error("Errore in loadPopupContent:", error);
|
|
}
|
|
}
|
|
|
|
// Funzione per gestire la webcam
|
|
function setupWebcam(iddatadb) {
|
|
const openWebcamBtn = document.getElementById("openWebcamBtn");
|
|
const webcamArea = document.getElementById("webcamArea");
|
|
const webcamVideo = document.getElementById("webcamVideo");
|
|
const captureBtn = document.getElementById("captureBtn");
|
|
const closeWebcamBtn = document.getElementById("closeWebcamBtn");
|
|
const webcamSelect = document.getElementById("webcamSelect");
|
|
let stream = null;
|
|
|
|
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
|
console.warn("La webcam non è supportata dal browser.");
|
|
if (openWebcamBtn) openWebcamBtn.style.display = "none";
|
|
return;
|
|
}
|
|
|
|
if (
|
|
!openWebcamBtn ||
|
|
!webcamArea ||
|
|
!webcamVideo ||
|
|
!captureBtn ||
|
|
!closeWebcamBtn ||
|
|
!webcamSelect
|
|
) {
|
|
console.error("Elementi webcam mancanti", {
|
|
openWebcamBtn,
|
|
webcamArea,
|
|
webcamVideo,
|
|
captureBtn,
|
|
closeWebcamBtn,
|
|
webcamSelect,
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Funzione per avviare la webcam con un deviceId specifico
|
|
async function startWebcam(deviceId = null) {
|
|
try {
|
|
// Ferma il flusso video esistente, se presente
|
|
if (stream) {
|
|
stream.getTracks().forEach((track) => track.stop());
|
|
stream = null;
|
|
webcamVideo.srcObject = null;
|
|
}
|
|
|
|
// Configura i vincoli per getUserMedia
|
|
const constraints = {
|
|
video: deviceId ? { deviceId: { exact: deviceId } } : true,
|
|
};
|
|
|
|
// Avvia il flusso video
|
|
stream = await navigator.mediaDevices.getUserMedia(constraints);
|
|
webcamVideo.srcObject = stream;
|
|
webcamArea.style.display = "block";
|
|
openWebcamBtn.style.display = "none";
|
|
dropArea.style.display = "none";
|
|
} catch (error) {
|
|
console.error("Errore nell'accesso alla webcam:", error);
|
|
alert("Errore nell'accesso alla webcam: " + error.message);
|
|
webcamArea.style.display = "none";
|
|
openWebcamBtn.style.display = "block";
|
|
dropArea.style.display = "block";
|
|
}
|
|
}
|
|
|
|
// Funzione per popolare il dropdown delle webcam
|
|
async function populateWebcamSelect() {
|
|
try {
|
|
// Richiedi i permessi per accedere ai dispositivi
|
|
await navigator.mediaDevices.getUserMedia({ video: true });
|
|
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
const videoDevices = devices.filter(
|
|
(device) => device.kind === "videoinput",
|
|
);
|
|
|
|
// Svuota il dropdown
|
|
webcamSelect.innerHTML =
|
|
'<option value="">Select a webcam</option>';
|
|
|
|
// Popola il dropdown con le webcam disponibili
|
|
videoDevices.forEach((device) => {
|
|
const option = document.createElement("option");
|
|
option.value = device.deviceId;
|
|
option.text =
|
|
device.label || `Webcam ${webcamSelect.options.length}`;
|
|
webcamSelect.appendChild(option);
|
|
});
|
|
|
|
// Mostra il dropdown solo se ci sono più webcam
|
|
webcamSelect.style.display =
|
|
videoDevices.length > 1 ? "block" : "none";
|
|
|
|
// Avvia la webcam predefinita se ce n'è almeno una
|
|
if (videoDevices.length > 0) {
|
|
await startWebcam(videoDevices[0].deviceId);
|
|
} else {
|
|
alert("Nessuna webcam rilevata.");
|
|
webcamArea.style.display = "none";
|
|
openWebcamBtn.style.display = "block";
|
|
dropArea.style.display = "block";
|
|
}
|
|
} catch (error) {
|
|
console.error("Errore nel recupero dei dispositivi:", error);
|
|
alert("Errore nel recupero dei dispositivi: " + error.message);
|
|
webcamSelect.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Apri la webcam e popola il dropdown
|
|
openWebcamBtn.addEventListener("click", async () => {
|
|
await populateWebcamSelect();
|
|
});
|
|
|
|
// Gestisci il cambio della webcam selezionata
|
|
webcamSelect.addEventListener("change", async (e) => {
|
|
const deviceId = e.target.value;
|
|
if (deviceId) {
|
|
await startWebcam(deviceId);
|
|
}
|
|
});
|
|
|
|
// Chiudi la webcam
|
|
closeWebcamBtn.addEventListener("click", () => {
|
|
if (stream) {
|
|
stream.getTracks().forEach((track) => track.stop());
|
|
stream = null;
|
|
webcamVideo.srcObject = null;
|
|
}
|
|
webcamArea.style.display = "none";
|
|
openWebcamBtn.style.display = "block";
|
|
dropArea.style.display = "block";
|
|
});
|
|
|
|
// Cattura la foto
|
|
captureBtn.addEventListener("click", () => {
|
|
const canvas = document.createElement("canvas");
|
|
canvas.width = webcamVideo.videoWidth;
|
|
canvas.height = webcamVideo.videoHeight;
|
|
canvas
|
|
.getContext("2d")
|
|
.drawImage(webcamVideo, 0, 0, canvas.width, canvas.height);
|
|
|
|
canvas.toBlob(async (blob) => {
|
|
const file = new File(
|
|
[blob],
|
|
`webcam_photo_${Date.now()}.jpg`,
|
|
{ type: "image/jpeg" },
|
|
);
|
|
const loader = document.getElementById("loader");
|
|
if (loader) {
|
|
console.log("Mostro loader per upload webcam");
|
|
loader.style.display = "flex";
|
|
}
|
|
await handleFiles([file], iddatadb);
|
|
if (stream) {
|
|
stream.getTracks().forEach((track) => track.stop());
|
|
stream = null;
|
|
webcamVideo.srcObject = null;
|
|
}
|
|
webcamArea.style.display = "none";
|
|
openWebcamBtn.style.display = "block";
|
|
dropArea.style.display = "block";
|
|
}, "image/jpeg");
|
|
});
|
|
}
|
|
|
|
// Funzione per gestire il caricamento dei file
|
|
async function handleFiles(files, iddatadb) {
|
|
const loader = document.getElementById("loader");
|
|
if (!loader) {
|
|
console.error("Elemento loader non trovato");
|
|
return;
|
|
}
|
|
|
|
if (!files || files.length === 0) {
|
|
console.warn("Nessun file da caricare");
|
|
return;
|
|
}
|
|
|
|
for (const file of files) {
|
|
if (!file.type.startsWith("image/")) {
|
|
alert("Per favore, carica solo immagini!");
|
|
continue;
|
|
}
|
|
|
|
console.log("Inizio upload del file:", file.name);
|
|
loader.style.display = "flex";
|
|
|
|
const formData = new FormData();
|
|
formData.append("photo", file);
|
|
formData.append("iddatadb", iddatadb);
|
|
try {
|
|
const response = await fetch("upload_photo.php", {
|
|
method: "POST",
|
|
body: formData,
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
console.log(
|
|
"Upload completato con successo, ricarico popup",
|
|
);
|
|
loadPopupContent(iddatadb);
|
|
} else {
|
|
alert("Errore durante il caricamento: " + result.message);
|
|
}
|
|
} catch (error) {
|
|
alert("Errore durante il caricamento: " + error.message);
|
|
} finally {
|
|
console.log("Nascondo loader dopo upload");
|
|
loader.style.display = "none";
|
|
}
|
|
}
|
|
}
|
|
|
|
// Funzione per attaccare gli event listener al contenuto del popup
|
|
function attachPhotoEventListeners(iddatadb) {
|
|
const dropArea = document.getElementById("dropArea");
|
|
const photoInput = document.getElementById("photoInput");
|
|
const photosModal = document.getElementById("photosModal");
|
|
|
|
if (!dropArea || !photoInput || !photosModal) {
|
|
console.error("Elementi mancanti:", {
|
|
dropArea,
|
|
photoInput,
|
|
photosModal,
|
|
});
|
|
return;
|
|
}
|
|
|
|
console.log("Event listener associati per iddatadb:", iddatadb);
|
|
|
|
// Gestione drag-and-drop
|
|
const preventDefaults = (e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
|
dropArea.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
["dragenter", "dragover"].forEach((eventName) => {
|
|
dropArea.addEventListener(
|
|
eventName,
|
|
() => dropArea.classList.add("highlight"),
|
|
false,
|
|
);
|
|
});
|
|
|
|
["dragleave", "drop"].forEach((eventName) => {
|
|
dropArea.addEventListener(
|
|
eventName,
|
|
() => dropArea.classList.remove("highlight"),
|
|
false,
|
|
);
|
|
});
|
|
|
|
dropArea.addEventListener(
|
|
"drop",
|
|
(e) => {
|
|
console.log("Evento drop attivato");
|
|
const files = e.dataTransfer.files;
|
|
if (files.length > 0) {
|
|
handleFiles(files, iddatadb);
|
|
}
|
|
},
|
|
false,
|
|
);
|
|
|
|
dropArea.addEventListener(
|
|
"click",
|
|
() => {
|
|
console.log("Click su dropArea, apro input file");
|
|
photoInput.click();
|
|
},
|
|
false,
|
|
);
|
|
|
|
photoInput.addEventListener(
|
|
"change",
|
|
(e) => {
|
|
console.log("Evento change su photoInput");
|
|
const files = e.target.files;
|
|
if (files.length > 0) {
|
|
handleFiles(files, iddatadb);
|
|
}
|
|
// Resetta l'input per consentire il caricamento dello stesso file
|
|
e.target.value = "";
|
|
},
|
|
false,
|
|
);
|
|
|
|
// Gestione rimozione foto
|
|
document.querySelectorAll(".delete-photo-btn").forEach((button) => {
|
|
button.addEventListener("click", async function () {
|
|
const photoId = this.getAttribute("data-photo-id");
|
|
if (confirm("Sei sicuro di voler eliminare questa foto?")) {
|
|
try {
|
|
const response = await fetch("delete_photo.php", {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type":
|
|
"application/x-www-form-urlencoded",
|
|
},
|
|
body: `photo_id=${photoId}`,
|
|
});
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
console.log(
|
|
"Foto eliminata con successo, ricarico popup",
|
|
);
|
|
loadPopupContent(iddatadb);
|
|
} else {
|
|
alert(
|
|
"Errore durante l'eliminazione: " +
|
|
result.message,
|
|
);
|
|
}
|
|
} catch (error) {
|
|
alert(
|
|
"Errore durante l'eliminazione: " + error.message,
|
|
);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
|
|
// Gestione ingrandimento immagini
|
|
document.querySelectorAll(".thumbnail").forEach((img) => {
|
|
img.addEventListener("click", function () {
|
|
console.log("Click su thumbnail, apro modale immagine");
|
|
const enlargedImage = document.getElementById("enlargedImage");
|
|
enlargedImage.src = this.src;
|
|
document.getElementById("imageModal").style.display = "block";
|
|
});
|
|
});
|
|
|
|
// Gestione chiusura modale immagine
|
|
const imageCloseBtn = document.querySelector(".image-modal-close");
|
|
if (imageCloseBtn) {
|
|
imageCloseBtn.addEventListener("click", () => {
|
|
console.log("Chiusura modale immagine");
|
|
document.getElementById("imageModal").style.display = "none";
|
|
});
|
|
}
|
|
document
|
|
.getElementById("imageModal")
|
|
.addEventListener("click", function (event) {
|
|
if (event.target === this) {
|
|
console.log(
|
|
"Chiusura modale immagine cliccando sullo sfondo",
|
|
);
|
|
this.style.display = "none";
|
|
}
|
|
});
|
|
|
|
// Inizializza la gestione della webcam
|
|
setupWebcam(iddatadb);
|
|
|
|
// Gestione bottone Crea Collage
|
|
const createCollageBtn = document.getElementById("createCollageBtn");
|
|
if (createCollageBtn) {
|
|
createCollageBtn.addEventListener("click", () => {
|
|
console.log("Apertura modale collage");
|
|
document.getElementById("collageModal").style.display = "block";
|
|
initCollageCanvas();
|
|
});
|
|
}
|
|
|
|
// Chiusura modale collage
|
|
const closeCollageBtn = document.querySelector(".close-collage");
|
|
if (closeCollageBtn) {
|
|
closeCollageBtn.addEventListener("click", () => {
|
|
console.log("Chiusura modale collage");
|
|
document.getElementById("collageModal").style.display = "none";
|
|
if (isCropping) {
|
|
console.log(
|
|
"Chiusura modale durante ritaglio, esco dalla modalità ritaglio",
|
|
);
|
|
exitCropMode();
|
|
}
|
|
if (isRemovingBackground) {
|
|
console.log(
|
|
"Chiusura modale durante rimozione sfondo, esco dalla modalità",
|
|
);
|
|
exitBackgroundRemovalMode();
|
|
}
|
|
});
|
|
}
|
|
|
|
// Inizializza canvas con Fabric.js
|
|
let canvas;
|
|
let cropRect = null;
|
|
let isCropping = false;
|
|
let croppedImage = null; // Memorizza l'immagine da ritagliare
|
|
let isApplyingCrop = false; // Flag per prevenire duplicazioni
|
|
let isRemovingBackground = false; // Flag per modalità rimozione sfondo
|
|
let backgroundRemovalImage = null; // Immagine in modalità rimozione sfondo
|
|
let history = []; // Pila per salvare gli stati del canvas
|
|
const maxHistory = 20; // Limite massimo di stati nella pila
|
|
|
|
function initCollageCanvas() {
|
|
if (typeof fabric === "undefined") {
|
|
console.error("Fabric.js non è caricato!");
|
|
alert(
|
|
"Errore: Fabric.js non è disponibile. Controlla la connessione al CDN.",
|
|
);
|
|
return;
|
|
}
|
|
canvas = new fabric.Canvas("collageCanvas", {
|
|
backgroundColor: "#fff",
|
|
selection: true,
|
|
});
|
|
// Imposta stile globale per i controlli
|
|
fabric.Object.prototype.set({
|
|
cornerColor: "black",
|
|
cornerStrokeColor: "black",
|
|
cornerSize: 12,
|
|
borderColor: "black",
|
|
transparentCorners: false,
|
|
});
|
|
// Abilita ridimensionamento e trascinamento
|
|
canvas.on("object:modified", () => {
|
|
console.log("Oggetto modificato nel canvas");
|
|
saveCanvasState();
|
|
canvas.renderAll();
|
|
});
|
|
// Gestisci selezione per abilitare/disabilitare pulsanti
|
|
canvas.on("selection:created", () => {
|
|
console.log("Evento selection:created triggerato");
|
|
updateButtons();
|
|
});
|
|
canvas.on("selection:updated", () => {
|
|
console.log("Evento selection:updated triggerato");
|
|
updateButtons();
|
|
});
|
|
canvas.on("selection:cleared", () => {
|
|
console.log("Evento selection:cleared triggerato");
|
|
if (!isCropping && !isRemovingBackground) {
|
|
updateButtons();
|
|
} else if (isCropping && cropRect) {
|
|
console.log(
|
|
"Ignoro selection:cleared perché in modalità ritaglio",
|
|
);
|
|
canvas.setActiveObject(cropRect); // Ripristina selezione del rettangolo
|
|
canvas.renderAll();
|
|
} else if (isRemovingBackground) {
|
|
console.log(
|
|
"Ignoro selection:cleared perché in modalità rimozione sfondo",
|
|
);
|
|
canvas.setActiveObject(backgroundRemovalImage); // Ripristina selezione dell'immagine
|
|
canvas.renderAll();
|
|
}
|
|
});
|
|
// Gestisci click sul canvas per la rimozione dello sfondo
|
|
canvas.on("mouse:down", (event) => {
|
|
if (isRemovingBackground && backgroundRemovalImage) {
|
|
console.log(
|
|
"Click sul canvas in modalità rimozione sfondo",
|
|
);
|
|
handleBackgroundColorSelection(event);
|
|
}
|
|
});
|
|
// Salva lo stato iniziale del canvas
|
|
saveCanvasState();
|
|
// Forza un aggiornamento iniziale dei pulsanti
|
|
updateButtons();
|
|
}
|
|
|
|
// Salva lo stato del canvas nella pila
|
|
function saveCanvasState() {
|
|
if (isCropping || isRemovingBackground) {
|
|
console.log(
|
|
"Non salvo lo stato perché in modalità ritaglio o rimozione sfondo",
|
|
);
|
|
return;
|
|
}
|
|
console.log("Salvataggio stato del canvas");
|
|
const state = JSON.stringify(
|
|
canvas.toJSON([
|
|
"cornerColor",
|
|
"cornerStrokeColor",
|
|
"cornerSize",
|
|
"borderColor",
|
|
"transparentCorners",
|
|
]),
|
|
);
|
|
history.push(state);
|
|
if (history.length > maxHistory) {
|
|
history.shift(); // Rimuovi lo stato più vecchio se superato il limite
|
|
}
|
|
console.log("Stato salvato, lunghezza pila:", history.length);
|
|
updateButtons();
|
|
}
|
|
|
|
// Ripristina l'ultimo stato del canvas
|
|
function undo() {
|
|
if (history.length <= 1) {
|
|
console.log("Nessuno stato da annullare");
|
|
return;
|
|
}
|
|
console.log("Annullamento ultima azione");
|
|
history.pop(); // Rimuovi lo stato corrente
|
|
const previousState = history[history.length - 1];
|
|
if (previousState) {
|
|
canvas.clear();
|
|
canvas.loadFromJSON(previousState, () => {
|
|
canvas.renderAll();
|
|
console.log("Stato ripristinato");
|
|
updateButtons();
|
|
});
|
|
} else {
|
|
console.warn("Nessuno stato precedente disponibile");
|
|
canvas.clear();
|
|
canvas.setBackgroundColor("#fff");
|
|
canvas.renderAll();
|
|
updateButtons();
|
|
}
|
|
}
|
|
|
|
// Aggiorna stato dei pulsanti
|
|
function updateButtons() {
|
|
const cropBtn = document.getElementById("cropImageBtn");
|
|
const applyCropBtn = document.getElementById("applyCropBtn");
|
|
const cancelCropBtn = document.getElementById("cancelCropBtn");
|
|
const removeBackgroundBtn = document.getElementById(
|
|
"removeBackgroundBtn",
|
|
);
|
|
const removeImageBtn = document.getElementById("removeImageBtn");
|
|
const undoBtn = document.getElementById("undoBtn");
|
|
const instruction = document.getElementById(
|
|
"backgroundRemovalInstruction",
|
|
);
|
|
const activeObject = canvas.getActiveObject();
|
|
console.log(
|
|
"updateButtons: activeObject =",
|
|
activeObject ? activeObject.type : null,
|
|
"isCropping =",
|
|
isCropping,
|
|
"isRemovingBackground =",
|
|
isRemovingBackground,
|
|
"history.length =",
|
|
history.length,
|
|
);
|
|
if (isCropping && cropRect) {
|
|
console.log(
|
|
"Modo ritaglio attivo, applyCropBtn e cancelCropBtn abilitati",
|
|
);
|
|
cropBtn.disabled = true;
|
|
applyCropBtn.disabled = false;
|
|
cancelCropBtn.disabled = false;
|
|
removeBackgroundBtn.disabled = true;
|
|
removeImageBtn.disabled = true;
|
|
undoBtn.disabled = true;
|
|
instruction.style.display = "none";
|
|
} else if (isRemovingBackground && backgroundRemovalImage) {
|
|
console.log(
|
|
"Modo rimozione sfondo attivo, removeBackgroundBtn disabilitato",
|
|
);
|
|
cropBtn.disabled = true;
|
|
applyCropBtn.disabled = true;
|
|
cancelCropBtn.disabled = true;
|
|
removeBackgroundBtn.disabled = true;
|
|
removeImageBtn.disabled = true;
|
|
undoBtn.disabled = true;
|
|
instruction.style.display = "block";
|
|
} else if (
|
|
activeObject &&
|
|
activeObject.type === "image" &&
|
|
!isCropping &&
|
|
!isRemovingBackground
|
|
) {
|
|
console.log(
|
|
"Abilitazione cropImageBtn, removeBackgroundBtn e removeImageBtn",
|
|
);
|
|
cropBtn.disabled = false;
|
|
applyCropBtn.disabled = true;
|
|
cancelCropBtn.disabled = true;
|
|
removeBackgroundBtn.disabled = false;
|
|
removeImageBtn.disabled = false;
|
|
undoBtn.disabled = history.length <= 1;
|
|
instruction.style.display = "none";
|
|
} else {
|
|
console.log("Disabilitazione tutti i pulsanti");
|
|
cropBtn.disabled = true;
|
|
applyCropBtn.disabled = true;
|
|
cancelCropBtn.disabled = true;
|
|
removeBackgroundBtn.disabled = true;
|
|
removeImageBtn.disabled = true;
|
|
undoBtn.disabled = history.length <= 1;
|
|
instruction.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Entra in modalità ritaglio
|
|
function enterCropMode() {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (!activeObject || activeObject.type !== "image") {
|
|
console.warn("Nessuna immagine selezionata per il ritaglio");
|
|
alert("Seleziona un'immagine prima di attivare il ritaglio!");
|
|
return;
|
|
}
|
|
console.log(
|
|
"Entrata in modalità ritaglio per immagine:",
|
|
activeObject,
|
|
);
|
|
isCropping = true;
|
|
croppedImage = activeObject; // Memorizza l'immagine da ritagliare
|
|
canvas.discardActiveObject(); // Deseleziona l'immagine
|
|
// Crea un rettangolo di ritaglio
|
|
cropRect = new fabric.Rect({
|
|
left: activeObject.left,
|
|
top: activeObject.top,
|
|
width: activeObject.width * activeObject.scaleX * 0.5,
|
|
height: activeObject.height * activeObject.scaleY * 0.5,
|
|
fill: "rgba(0, 0, 0, 0.3)",
|
|
stroke: "red",
|
|
strokeWidth: 2,
|
|
hasBorders: true,
|
|
hasControls: true,
|
|
lockRotation: true,
|
|
selectable: true,
|
|
cornerColor: "black",
|
|
cornerStrokeColor: "black",
|
|
cornerSize: 12,
|
|
borderColor: "black",
|
|
transparentCorners: false,
|
|
});
|
|
canvas.add(cropRect);
|
|
canvas.setActiveObject(cropRect);
|
|
canvas.renderAll();
|
|
updateButtons();
|
|
console.log("Rettangolo di ritaglio creato e applicato");
|
|
}
|
|
|
|
// Esci dalla modalità ritaglio
|
|
function exitCropMode() {
|
|
if (cropRect) {
|
|
console.log("Rimozione rettangolo di ritaglio");
|
|
canvas.remove(cropRect);
|
|
cropRect = null;
|
|
}
|
|
isCropping = false;
|
|
croppedImage = null;
|
|
isApplyingCrop = false;
|
|
canvas.discardActiveObject();
|
|
canvas.renderAll();
|
|
updateButtons();
|
|
console.log("Uscita dalla modalità ritaglio");
|
|
}
|
|
|
|
// Applica il ritaglio
|
|
function applyCrop() {
|
|
if (isApplyingCrop) {
|
|
console.log("applyCrop già in esecuzione, ignoro chiamata");
|
|
return;
|
|
}
|
|
console.log("applyCrop chiamato, stato:", {
|
|
isCropping,
|
|
cropRect: !!cropRect,
|
|
croppedImage: !!croppedImage,
|
|
});
|
|
if (!isCropping || !cropRect || !croppedImage) {
|
|
console.warn("Condizioni per il ritaglio non soddisfatte", {
|
|
isCropping,
|
|
cropRect: !!cropRect,
|
|
croppedImage: !!croppedImage,
|
|
});
|
|
alert(
|
|
"Nessun rettangolo di ritaglio attivo o immagine selezionata!",
|
|
);
|
|
exitCropMode();
|
|
return;
|
|
}
|
|
isApplyingCrop = true;
|
|
console.log("Applicazione ritaglio all'immagine:", croppedImage);
|
|
const img = croppedImage;
|
|
const cropX = (cropRect.left - img.left) / img.scaleX;
|
|
const cropY = (cropRect.top - img.top) / img.scaleY;
|
|
const cropWidth = (cropRect.width * cropRect.scaleX) / img.scaleX;
|
|
const cropHeight = (cropRect.height * cropRect.scaleY) / img.scaleY;
|
|
console.log("Parametri di ritaglio:", {
|
|
cropX,
|
|
cropY,
|
|
cropWidth,
|
|
cropHeight,
|
|
});
|
|
|
|
// Crea un'immagine ritagliata
|
|
fabric.Image.fromURL(
|
|
img.getSrc(),
|
|
(newImg) => {
|
|
newImg.set({
|
|
left: cropRect.left,
|
|
top: cropRect.top,
|
|
scaleX: img.scaleX,
|
|
scaleY: img.scaleY,
|
|
cropX: cropX,
|
|
cropY: cropY,
|
|
width: cropWidth,
|
|
height: cropHeight,
|
|
hasControls: true,
|
|
hasBorders: true,
|
|
cornerColor: "black",
|
|
cornerStrokeColor: "black",
|
|
cornerSize: 12,
|
|
borderColor: "black",
|
|
transparentCorners: false,
|
|
});
|
|
canvas.remove(img); // Rimuovi l'immagine originale
|
|
canvas.remove(cropRect); // Rimuovi il rettangolo di ritaglio
|
|
canvas.add(newImg); // Aggiungi l'immagine ritagliata
|
|
canvas.setActiveObject(newImg);
|
|
exitCropMode();
|
|
saveCanvasState(); // Salva lo stato dopo il ritaglio
|
|
canvas.renderAll();
|
|
console.log("Ritaglio applicato con successo");
|
|
},
|
|
{ crossOrigin: "anonymous" },
|
|
);
|
|
}
|
|
|
|
// Entra in modalità rimozione sfondo
|
|
function enterBackgroundRemovalMode() {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (!activeObject || activeObject.type !== "image") {
|
|
console.warn(
|
|
"Nessuna immagine selezionata per la rimozione dello sfondo",
|
|
);
|
|
alert(
|
|
"Seleziona un'immagine prima di attivare la rimozione dello sfondo!",
|
|
);
|
|
return;
|
|
}
|
|
console.log(
|
|
"Entrata in modalità rimozione sfondo per immagine:",
|
|
activeObject,
|
|
);
|
|
isRemovingBackground = true;
|
|
backgroundRemovalImage = activeObject;
|
|
updateButtons();
|
|
console.log(
|
|
"Modalità rimozione sfondo attivata, clicca sull'immagine per selezionare il colore",
|
|
);
|
|
}
|
|
|
|
// Esci dalla modalità rimozione sfondo
|
|
function exitBackgroundRemovalMode() {
|
|
isRemovingBackground = false;
|
|
backgroundRemovalImage = null;
|
|
canvas.discardActiveObject();
|
|
canvas.renderAll();
|
|
updateButtons();
|
|
console.log("Uscita dalla modalità rimozione sfondo");
|
|
}
|
|
|
|
// Gestisci la selezione del colore dello sfondo
|
|
function handleBackgroundColorSelection(event) {
|
|
if (!isRemovingBackground || !backgroundRemovalImage) {
|
|
console.warn(
|
|
"Condizioni per la rimozione dello sfondo non soddisfatte",
|
|
);
|
|
return;
|
|
}
|
|
const pointer = canvas.getPointer(event.e);
|
|
const img = backgroundRemovalImage;
|
|
|
|
// Crea una canvas temporanea per ottenere i dati dei pixel
|
|
const tempCanvas = document.createElement("canvas");
|
|
tempCanvas.width = img.width;
|
|
tempCanvas.height = img.height;
|
|
const ctx = tempCanvas.getContext("2d");
|
|
ctx.drawImage(img.getElement(), 0, 0, img.width, img.height);
|
|
|
|
// Calcola la posizione relativa del click rispetto all'immagine
|
|
const imgLeft = img.left;
|
|
const imgTop = img.top;
|
|
const scaleX = img.scaleX;
|
|
const scaleY = img.scaleY;
|
|
const x = (pointer.x - imgLeft) / scaleX;
|
|
const y = (pointer.y - imgTop) / scaleY;
|
|
|
|
// Ottieni il colore del pixel cliccato
|
|
const pixelData = ctx.getImageData(x, y, 1, 1).data;
|
|
const targetColor = {
|
|
r: pixelData[0],
|
|
g: pixelData[1],
|
|
b: pixelData[2],
|
|
};
|
|
console.log("Colore dello sfondo selezionato:", targetColor);
|
|
|
|
// Rimuovi il colore dello sfondo
|
|
removeBackground(img, targetColor);
|
|
}
|
|
|
|
// Rimuovi il colore dello sfondo
|
|
function removeBackground(img, targetColor) {
|
|
console.log("Inizio rimozione sfondo con colore:", targetColor);
|
|
const tempCanvas = document.createElement("canvas");
|
|
tempCanvas.width = img.width;
|
|
tempCanvas.height = img.height;
|
|
const ctx = tempCanvas.getContext("2d");
|
|
ctx.drawImage(img.getElement(), 0, 0, img.width, img.height);
|
|
|
|
const imageData = ctx.getImageData(
|
|
0,
|
|
0,
|
|
tempCanvas.width,
|
|
tempCanvas.height,
|
|
);
|
|
const data = imageData.data;
|
|
const tolerance = 50; // Tolleranza per colori simili
|
|
|
|
// Scansiona i pixel e rendi trasparenti quelli che corrispondono al colore target
|
|
for (let i = 0; i < data.length; i += 4) {
|
|
const r = data[i];
|
|
const g = data[i + 1];
|
|
const b = data[i + 2];
|
|
// Verifica se il colore è simile al targetColor
|
|
if (
|
|
Math.abs(r - targetColor.r) <= tolerance &&
|
|
Math.abs(g - targetColor.g) <= tolerance &&
|
|
Math.abs(b - targetColor.b) <= tolerance
|
|
) {
|
|
data[i + 3] = 0; // Imposta l'alpha a 0 (trasparente)
|
|
}
|
|
}
|
|
|
|
ctx.putImageData(imageData, 0, 0);
|
|
const newImageUrl = tempCanvas.toDataURL("image/png");
|
|
|
|
// Crea una nuova immagine con lo sfondo rimosso
|
|
fabric.Image.fromURL(
|
|
newImageUrl,
|
|
(newImg) => {
|
|
newImg.set({
|
|
left: img.left,
|
|
top: img.top,
|
|
scaleX: img.scaleX,
|
|
scaleY: img.scaleY,
|
|
hasControls: true,
|
|
hasBorders: true,
|
|
cornerColor: "black",
|
|
cornerStrokeColor: "black",
|
|
cornerSize: 12,
|
|
borderColor: "black",
|
|
transparentCorners: false,
|
|
});
|
|
canvas.remove(img); // Rimuovi l'immagine originale
|
|
canvas.add(newImg); // Aggiungi l'immagine con sfondo rimosso
|
|
canvas.setActiveObject(newImg);
|
|
exitBackgroundRemovalMode();
|
|
saveCanvasState(); // Salva lo stato dopo la rimozione dello sfondo
|
|
canvas.renderAll();
|
|
console.log("Sfondo rimosso con successo");
|
|
},
|
|
{ crossOrigin: "anonymous" },
|
|
);
|
|
}
|
|
|
|
// Rimuovi l'immagine selezionata
|
|
function removeImage() {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (!activeObject || activeObject.type !== "image") {
|
|
console.warn("Nessuna immagine selezionata per la rimozione");
|
|
alert("Seleziona un'immagine da rimuovere!");
|
|
return;
|
|
}
|
|
console.log("Rimozione immagine selezionata:", activeObject);
|
|
canvas.remove(activeObject);
|
|
canvas.discardActiveObject();
|
|
saveCanvasState(); // Salva lo stato dopo la rimozione
|
|
canvas.renderAll();
|
|
console.log("Immagine rimossa con successo");
|
|
}
|
|
|
|
// Aggiungi foto selezionate al canvas
|
|
const addToCanvasBtn = document.getElementById("addToCanvasBtn");
|
|
if (addToCanvasBtn) {
|
|
addToCanvasBtn.addEventListener("click", () => {
|
|
const checkboxes = document.querySelectorAll(
|
|
".photo-checkbox:checked",
|
|
);
|
|
if (checkboxes.length === 0) {
|
|
alert("Seleziona almeno una foto!");
|
|
return;
|
|
}
|
|
checkboxes.forEach((cb) => {
|
|
const imgPath = cb.getAttribute("data-path");
|
|
fabric.Image.fromURL(
|
|
imgPath,
|
|
(img) => {
|
|
img.set({
|
|
left: Math.random() * 600, // Posizione random iniziale
|
|
top: Math.random() * 400,
|
|
scaleX: 0.5, // Scala iniziale
|
|
scaleY: 0.5,
|
|
hasControls: true, // Abilita resize/rotate
|
|
hasBorders: true,
|
|
cornerColor: "black",
|
|
cornerStrokeColor: "black",
|
|
cornerSize: 12,
|
|
borderColor: "black",
|
|
transparentCorners: false,
|
|
});
|
|
canvas.add(img);
|
|
canvas.renderAll();
|
|
console.log(
|
|
"Immagine aggiunta al canvas:",
|
|
imgPath,
|
|
);
|
|
},
|
|
{ crossOrigin: "anonymous" },
|
|
);
|
|
});
|
|
// Deseleziona checkbox dopo aggiunta
|
|
checkboxes.forEach((cb) => (cb.checked = false));
|
|
saveCanvasState(); // Salva lo stato dopo l'aggiunta
|
|
});
|
|
}
|
|
|
|
// Salva collage
|
|
const saveCollageBtn = document.getElementById("saveCollageBtn");
|
|
if (saveCollageBtn) {
|
|
saveCollageBtn.addEventListener("click", async () => {
|
|
if (canvas.getObjects().length === 0) {
|
|
alert("Il canvas è vuoto! Aggiungi almeno una foto.");
|
|
return;
|
|
}
|
|
const dataURL = canvas.toDataURL({
|
|
format: "jpeg",
|
|
quality: 0.8,
|
|
});
|
|
const blob = await (await fetch(dataURL)).blob();
|
|
const file = new File([blob], `collage_${Date.now()}.jpg`, {
|
|
type: "image/jpeg",
|
|
});
|
|
|
|
// Upload come nuova foto
|
|
await handleFiles([file], iddatadb);
|
|
// Chiudi modale e ricarica popup
|
|
document.getElementById("collageModal").style.display = "none";
|
|
loadPopupContent(iddatadb);
|
|
console.log("Collage salvato e modale chiuso");
|
|
});
|
|
}
|
|
|
|
// Pulisci canvas
|
|
const clearCanvasBtn = document.getElementById("clearCanvasBtn");
|
|
if (clearCanvasBtn) {
|
|
clearCanvasBtn.addEventListener("click", () => {
|
|
canvas.clear();
|
|
canvas.setBackgroundColor("#fff");
|
|
history = []; // Resetta la pila di stati
|
|
saveCanvasState(); // Salva lo stato vuoto
|
|
canvas.renderAll();
|
|
console.log("Canvas pulito");
|
|
});
|
|
}
|
|
|
|
// Gestione livelli delle immagini
|
|
const bringToFrontBtn = document.getElementById("bringToFrontBtn");
|
|
if (bringToFrontBtn) {
|
|
bringToFrontBtn.addEventListener("click", () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.bringToFront(activeObject);
|
|
canvas.renderAll();
|
|
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
|
console.log("Oggetto portato in primo piano");
|
|
} else {
|
|
alert("Seleziona un'immagine sul canvas!");
|
|
}
|
|
});
|
|
}
|
|
|
|
const sendToBackBtn = document.getElementById("sendToBackBtn");
|
|
if (sendToBackBtn) {
|
|
sendToBackBtn.addEventListener("click", () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.sendToBack(activeObject);
|
|
canvas.renderAll();
|
|
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
|
console.log("Oggetto mandato in fondo");
|
|
} else {
|
|
alert("Seleziona un'immagine sul canvas!");
|
|
}
|
|
});
|
|
}
|
|
|
|
const bringForwardBtn = document.getElementById("bringForwardBtn");
|
|
if (bringForwardBtn) {
|
|
bringForwardBtn.addEventListener("click", () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.bringForward(activeObject);
|
|
canvas.renderAll();
|
|
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
|
console.log("Oggetto spostato avanti di un livello");
|
|
} else {
|
|
alert("Seleziona un'immagine sul canvas!");
|
|
}
|
|
});
|
|
}
|
|
|
|
const sendBackwardBtn = document.getElementById("sendBackwardBtn");
|
|
if (sendBackwardBtn) {
|
|
sendBackwardBtn.addEventListener("click", () => {
|
|
const activeObject = canvas.getActiveObject();
|
|
if (activeObject) {
|
|
canvas.sendBackwards(activeObject);
|
|
canvas.renderAll();
|
|
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
|
console.log("Oggetto spostato indietro di un livello");
|
|
} else {
|
|
alert("Seleziona un'immagine sul canvas!");
|
|
}
|
|
});
|
|
}
|
|
|
|
// Gestione ritaglio immagini
|
|
const cropImageBtn = document.getElementById("cropImageBtn");
|
|
if (cropImageBtn) {
|
|
cropImageBtn.addEventListener("click", () => {
|
|
console.log("Pulsante Ritaglia cliccato");
|
|
enterCropMode();
|
|
});
|
|
}
|
|
|
|
const applyCropBtn = document.getElementById("applyCropBtn");
|
|
if (applyCropBtn) {
|
|
applyCropBtn.addEventListener("click", () => {
|
|
console.log("Pulsante Applica Ritaglio cliccato");
|
|
applyCrop();
|
|
});
|
|
}
|
|
|
|
const cancelCropBtn = document.getElementById("cancelCropBtn");
|
|
if (cancelCropBtn) {
|
|
cancelCropBtn.addEventListener("click", () => {
|
|
console.log("Pulsante Annulla Ritaglio cliccato");
|
|
exitCropMode();
|
|
});
|
|
}
|
|
|
|
// Gestione rimozione sfondo
|
|
const removeBackgroundBtn = document.getElementById(
|
|
"removeBackgroundBtn",
|
|
);
|
|
if (removeBackgroundBtn) {
|
|
removeBackgroundBtn.addEventListener("click", () => {
|
|
console.log("Pulsante Rimuovi Sfondo cliccato");
|
|
enterBackgroundRemovalMode();
|
|
});
|
|
}
|
|
|
|
// Gestione rimozione immagine
|
|
const removeImageBtn = document.getElementById("removeImageBtn");
|
|
if (removeImageBtn) {
|
|
removeImageBtn.addEventListener("click", () => {
|
|
console.log("Pulsante Rimuovi Immagine cliccato");
|
|
removeImage();
|
|
});
|
|
}
|
|
|
|
// Gestione undo
|
|
const undoBtn = document.getElementById("undoBtn");
|
|
if (undoBtn) {
|
|
undoBtn.addEventListener("click", () => {
|
|
console.log("Pulsante Annulla cliccato");
|
|
undo();
|
|
});
|
|
}
|
|
|
|
// Assicurati che il loader sia nascosto all'apertura del popup
|
|
const loader = document.getElementById("loader");
|
|
if (loader) {
|
|
console.log("Nascondo loader all'apertura del popup");
|
|
loader.style.display = "none";
|
|
}
|
|
}
|
|
|
|
// Gestione del pulsante Photos
|
|
const photosButtons = document.querySelectorAll(".photos-btn");
|
|
const photosModal = document.getElementById("photosModal");
|
|
const closeBtn = document.querySelector(".close-btn");
|
|
|
|
if (photosButtons.length && photosModal && closeBtn) {
|
|
photosButtons.forEach((button) => {
|
|
button.addEventListener("click", function () {
|
|
console.log(
|
|
"Pulsante Photos cliccato per iddatadb:",
|
|
this.getAttribute("data-iddatadb"),
|
|
);
|
|
const iddatadb = this.getAttribute("data-iddatadb");
|
|
loadPopupContent(iddatadb);
|
|
photosModal.style.display = "block";
|
|
document.querySelector(".overlay").style.display = "none";
|
|
});
|
|
});
|
|
|
|
closeBtn.addEventListener("click", function () {
|
|
console.log("Chiusura modale photos");
|
|
photosModal.style.display = "none";
|
|
document.querySelector(".overlay").style.display = "none";
|
|
document.body.style.pointerEvents = "auto";
|
|
});
|
|
|
|
window.addEventListener("click", function (event) {
|
|
if (event.target === photosModal) {
|
|
console.log("Chiusura modale photos cliccando sullo sfondo");
|
|
photosModal.style.display = "none";
|
|
document.querySelector(".overlay").style.display = "none";
|
|
document.body.style.pointerEvents = "auto";
|
|
}
|
|
});
|
|
} else {
|
|
console.error("Elementi mancanti:", {
|
|
photosButtons,
|
|
photosModal,
|
|
closeBtn,
|
|
});
|
|
}
|
|
});
|