added level to collahge
This commit is contained in:
parent
ce8c95921f
commit
1510ef03f1
File diff suppressed because one or more lines are too long
@ -7,7 +7,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
console.log("Caricamento contenuto per iddatadb:", iddatadb);
|
||||
const response = await fetch(
|
||||
`photos_popup.php?iddatadb=${iddatadb}`,
|
||||
);
|
||||
@ -56,22 +55,18 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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";
|
||||
@ -86,21 +81,17 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
@ -109,11 +100,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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 {
|
||||
@ -129,12 +118,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
}
|
||||
|
||||
// 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) {
|
||||
@ -142,7 +129,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
});
|
||||
|
||||
// Chiudi la webcam
|
||||
closeWebcamBtn.addEventListener("click", () => {
|
||||
if (stream) {
|
||||
stream.getTracks().forEach((track) => track.stop());
|
||||
@ -154,7 +140,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
dropArea.style.display = "block";
|
||||
});
|
||||
|
||||
// Cattura la foto
|
||||
captureBtn.addEventListener("click", () => {
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.width = webcamVideo.videoWidth;
|
||||
@ -171,7 +156,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
);
|
||||
const loader = document.getElementById("loader");
|
||||
if (loader) {
|
||||
console.log("Mostro loader per upload webcam");
|
||||
loader.style.display = "flex";
|
||||
}
|
||||
await handleFiles([file], iddatadb);
|
||||
@ -187,7 +171,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
}
|
||||
|
||||
// Funzione per gestire il caricamento dei file
|
||||
async function handleFiles(files, iddatadb) {
|
||||
const loader = document.getElementById("loader");
|
||||
if (!loader) {
|
||||
@ -206,7 +189,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
continue;
|
||||
}
|
||||
|
||||
console.log("Inizio upload del file:", file.name);
|
||||
loader.style.display = "flex";
|
||||
|
||||
const formData = new FormData();
|
||||
@ -219,9 +201,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
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);
|
||||
@ -229,13 +208,11 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
} 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");
|
||||
@ -250,9 +227,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
return;
|
||||
}
|
||||
|
||||
console.log("Event listener associati per iddatadb:", iddatadb);
|
||||
|
||||
// Gestione drag-and-drop
|
||||
const preventDefaults = (e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
@ -281,7 +255,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
dropArea.addEventListener(
|
||||
"drop",
|
||||
(e) => {
|
||||
console.log("Evento drop attivato");
|
||||
const files = e.dataTransfer.files;
|
||||
if (files.length > 0) {
|
||||
handleFiles(files, iddatadb);
|
||||
@ -293,7 +266,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
dropArea.addEventListener(
|
||||
"click",
|
||||
() => {
|
||||
console.log("Click su dropArea, apro input file");
|
||||
photoInput.click();
|
||||
},
|
||||
false,
|
||||
@ -302,18 +274,15 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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");
|
||||
@ -329,9 +298,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
console.log(
|
||||
"Foto eliminata con successo, ricarico popup",
|
||||
);
|
||||
loadPopupContent(iddatadb);
|
||||
} else {
|
||||
alert(
|
||||
@ -348,21 +314,17 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
});
|
||||
|
||||
// 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";
|
||||
});
|
||||
}
|
||||
@ -370,57 +332,42 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
.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
|
||||
let croppedImage = null;
|
||||
let isApplyingCrop = false;
|
||||
let isRemovingBackground = false;
|
||||
let backgroundRemovalImage = null;
|
||||
let history = [];
|
||||
const maxHistory = 20;
|
||||
|
||||
function initCollageCanvas() {
|
||||
if (typeof fabric === "undefined") {
|
||||
@ -434,7 +381,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
backgroundColor: "#fff",
|
||||
selection: true,
|
||||
});
|
||||
// Imposta stile globale per i controlli
|
||||
fabric.Object.prototype.set({
|
||||
cornerColor: "black",
|
||||
cornerStrokeColor: "black",
|
||||
@ -442,63 +388,103 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
borderColor: "black",
|
||||
transparentCorners: false,
|
||||
});
|
||||
// Abilita ridimensionamento e trascinamento
|
||||
canvas.on("object:modified", () => {
|
||||
console.log("Oggetto modificato nel canvas");
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
canvas.renderAll();
|
||||
});
|
||||
// Gestisci selezione per abilitare/disabilitare pulsanti
|
||||
canvas.on("object:added", () => {
|
||||
updateLayersPanel();
|
||||
});
|
||||
canvas.on("object:removed", () => {
|
||||
updateLayersPanel();
|
||||
});
|
||||
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.setActiveObject(cropRect);
|
||||
canvas.renderAll();
|
||||
} else if (isRemovingBackground) {
|
||||
console.log(
|
||||
"Ignoro selection:cleared perché in modalità rimozione sfondo",
|
||||
);
|
||||
canvas.setActiveObject(backgroundRemovalImage); // Ripristina selezione dell'immagine
|
||||
canvas.setActiveObject(backgroundRemovalImage);
|
||||
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
|
||||
updateLayersPanel();
|
||||
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",
|
||||
);
|
||||
function updateLayersPanel() {
|
||||
const layersList = document.getElementById("layersList");
|
||||
if (!layersList) {
|
||||
console.error("Elemento layersList non trovato");
|
||||
return;
|
||||
}
|
||||
layersList.innerHTML = "";
|
||||
|
||||
const images = canvas.getObjects("image");
|
||||
images.forEach((img, index) => {
|
||||
let thumbSrc;
|
||||
try {
|
||||
const thumbCanvas = document.createElement("canvas");
|
||||
thumbCanvas.width = 50;
|
||||
thumbCanvas.height = 50;
|
||||
const thumbFabric = new fabric.Canvas(thumbCanvas);
|
||||
|
||||
const clonedImg = fabric.util.object.clone(img);
|
||||
const scaleFactor = Math.min(
|
||||
50 / img.width,
|
||||
50 / img.height,
|
||||
);
|
||||
clonedImg.scaleX = scaleFactor;
|
||||
clonedImg.scaleY = scaleFactor;
|
||||
clonedImg.left = (50 - img.width * scaleFactor) / 2;
|
||||
clonedImg.top = (50 - img.height * scaleFactor) / 2;
|
||||
clonedImg.setCoords();
|
||||
thumbFabric.add(clonedImg);
|
||||
thumbFabric.renderAll();
|
||||
|
||||
thumbSrc = thumbCanvas.toDataURL("image/png");
|
||||
thumbFabric.dispose();
|
||||
} catch (error) {
|
||||
console.warn(
|
||||
"Errore nella generazione della thumbnail per immagine",
|
||||
index + 1,
|
||||
error,
|
||||
);
|
||||
thumbSrc = img.getSrc(); // Fallback all'URL originale
|
||||
}
|
||||
|
||||
const layerItem = document.createElement("li");
|
||||
const thumbImg = document.createElement("img");
|
||||
thumbImg.src = thumbSrc;
|
||||
thumbImg.title = `Layer ${index + 1}`;
|
||||
thumbImg.addEventListener("click", () => {
|
||||
canvas.setActiveObject(img);
|
||||
canvas.renderAll();
|
||||
});
|
||||
|
||||
layerItem.appendChild(thumbImg);
|
||||
layersList.appendChild(layerItem);
|
||||
});
|
||||
}
|
||||
|
||||
function saveCanvasState() {
|
||||
if (isCropping || isRemovingBackground) {
|
||||
return;
|
||||
}
|
||||
console.log("Salvataggio stato del canvas");
|
||||
const state = JSON.stringify(
|
||||
canvas.toJSON([
|
||||
"cornerColor",
|
||||
@ -510,26 +496,22 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
);
|
||||
history.push(state);
|
||||
if (history.length > maxHistory) {
|
||||
history.shift(); // Rimuovi lo stato più vecchio se superato il limite
|
||||
history.shift();
|
||||
}
|
||||
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
|
||||
history.pop();
|
||||
const previousState = history[history.length - 1];
|
||||
if (previousState) {
|
||||
canvas.clear();
|
||||
canvas.loadFromJSON(previousState, () => {
|
||||
canvas.renderAll();
|
||||
console.log("Stato ripristinato");
|
||||
updateLayersPanel();
|
||||
updateButtons();
|
||||
});
|
||||
} else {
|
||||
@ -537,11 +519,11 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
canvas.clear();
|
||||
canvas.setBackgroundColor("#fff");
|
||||
canvas.renderAll();
|
||||
updateLayersPanel();
|
||||
updateButtons();
|
||||
}
|
||||
}
|
||||
|
||||
// Aggiorna stato dei pulsanti
|
||||
function updateButtons() {
|
||||
const cropBtn = document.getElementById("cropImageBtn");
|
||||
const applyCropBtn = document.getElementById("applyCropBtn");
|
||||
@ -555,20 +537,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
"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;
|
||||
@ -577,9 +546,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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;
|
||||
@ -593,9 +559,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
!isCropping &&
|
||||
!isRemovingBackground
|
||||
) {
|
||||
console.log(
|
||||
"Abilitazione cropImageBtn, removeBackgroundBtn e removeImageBtn",
|
||||
);
|
||||
cropBtn.disabled = false;
|
||||
applyCropBtn.disabled = true;
|
||||
cancelCropBtn.disabled = true;
|
||||
@ -604,7 +567,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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;
|
||||
@ -615,7 +577,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
}
|
||||
}
|
||||
|
||||
// Entra in modalità ritaglio
|
||||
function enterCropMode() {
|
||||
const activeObject = canvas.getActiveObject();
|
||||
if (!activeObject || activeObject.type !== "image") {
|
||||
@ -623,14 +584,9 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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
|
||||
croppedImage = activeObject;
|
||||
canvas.discardActiveObject();
|
||||
cropRect = new fabric.Rect({
|
||||
left: activeObject.left,
|
||||
top: activeObject.top,
|
||||
@ -653,13 +609,10 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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;
|
||||
}
|
||||
@ -669,20 +622,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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,
|
||||
@ -696,20 +641,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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) => {
|
||||
@ -730,20 +667,19 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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.remove(img);
|
||||
canvas.remove(cropRect);
|
||||
canvas.add(newImg);
|
||||
canvas.setActiveObject(newImg);
|
||||
exitCropMode();
|
||||
saveCanvasState(); // Salva lo stato dopo il ritaglio
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
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") {
|
||||
@ -755,29 +691,19 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
);
|
||||
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(
|
||||
@ -788,14 +714,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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;
|
||||
@ -803,22 +727,17 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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;
|
||||
@ -832,27 +751,24 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
tempCanvas.height,
|
||||
);
|
||||
const data = imageData.data;
|
||||
const tolerance = 50; // Tolleranza per colori simili
|
||||
const tolerance = 50;
|
||||
|
||||
// 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)
|
||||
data[i + 3] = 0;
|
||||
}
|
||||
}
|
||||
|
||||
ctx.putImageData(imageData, 0, 0);
|
||||
const newImageUrl = tempCanvas.toDataURL("image/png");
|
||||
|
||||
// Crea una nuova immagine con lo sfondo rimosso
|
||||
fabric.Image.fromURL(
|
||||
newImageUrl,
|
||||
(newImg) => {
|
||||
@ -869,19 +785,18 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
borderColor: "black",
|
||||
transparentCorners: false,
|
||||
});
|
||||
canvas.remove(img); // Rimuovi l'immagine originale
|
||||
canvas.add(newImg); // Aggiungi l'immagine con sfondo rimosso
|
||||
canvas.remove(img);
|
||||
canvas.add(newImg);
|
||||
canvas.setActiveObject(newImg);
|
||||
exitBackgroundRemovalMode();
|
||||
saveCanvasState(); // Salva lo stato dopo la rimozione dello sfondo
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
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") {
|
||||
@ -889,15 +804,13 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
canvas.renderAll();
|
||||
console.log("Immagine rimossa con successo");
|
||||
}
|
||||
|
||||
// Aggiungi foto selezionate al canvas
|
||||
const addToCanvasBtn = document.getElementById("addToCanvasBtn");
|
||||
if (addToCanvasBtn) {
|
||||
addToCanvasBtn.addEventListener("click", () => {
|
||||
@ -914,11 +827,11 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
imgPath,
|
||||
(img) => {
|
||||
img.set({
|
||||
left: Math.random() * 600, // Posizione random iniziale
|
||||
left: Math.random() * 600,
|
||||
top: Math.random() * 400,
|
||||
scaleX: 0.5, // Scala iniziale
|
||||
scaleX: 0.5,
|
||||
scaleY: 0.5,
|
||||
hasControls: true, // Abilita resize/rotate
|
||||
hasControls: true,
|
||||
hasBorders: true,
|
||||
cornerColor: "black",
|
||||
cornerStrokeColor: "black",
|
||||
@ -928,25 +841,22 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
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
|
||||
saveCanvasState();
|
||||
});
|
||||
}
|
||||
|
||||
// Salva collage
|
||||
const saveCollageBtn = document.getElementById("saveCollageBtn");
|
||||
if (saveCollageBtn) {
|
||||
saveCollageBtn.addEventListener("click", async () => {
|
||||
if (canvas.getObjects().length === 0) {
|
||||
if (
|
||||
canvas.getObjects().length === 0 &&
|
||||
!canvas.backgroundImage
|
||||
) {
|
||||
alert("Il canvas è vuoto! Aggiungi almeno una foto.");
|
||||
return;
|
||||
}
|
||||
@ -959,29 +869,12 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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", () => {
|
||||
@ -989,8 +882,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (activeObject) {
|
||||
canvas.bringToFront(activeObject);
|
||||
canvas.renderAll();
|
||||
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
||||
console.log("Oggetto portato in primo piano");
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
@ -1004,8 +897,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (activeObject) {
|
||||
canvas.sendToBack(activeObject);
|
||||
canvas.renderAll();
|
||||
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
||||
console.log("Oggetto mandato in fondo");
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
@ -1019,8 +912,8 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (activeObject) {
|
||||
canvas.bringForward(activeObject);
|
||||
canvas.renderAll();
|
||||
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
||||
console.log("Oggetto spostato avanti di un livello");
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
} else {
|
||||
alert("Seleziona un'immagine sul canvas!");
|
||||
}
|
||||
@ -1034,19 +927,17 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
if (activeObject) {
|
||||
canvas.sendBackwards(activeObject);
|
||||
canvas.renderAll();
|
||||
saveCanvasState(); // Salva lo stato dopo il cambio di livello
|
||||
console.log("Oggetto spostato indietro di un livello");
|
||||
saveCanvasState();
|
||||
updateLayersPanel();
|
||||
} 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();
|
||||
});
|
||||
}
|
||||
@ -1054,7 +945,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
const applyCropBtn = document.getElementById("applyCropBtn");
|
||||
if (applyCropBtn) {
|
||||
applyCropBtn.addEventListener("click", () => {
|
||||
console.log("Pulsante Applica Ritaglio cliccato");
|
||||
applyCrop();
|
||||
});
|
||||
}
|
||||
@ -1062,49 +952,39 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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");
|
||||
@ -1112,10 +992,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
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";
|
||||
@ -1124,7 +1000,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
});
|
||||
|
||||
closeBtn.addEventListener("click", function () {
|
||||
console.log("Chiusura modale photos");
|
||||
photosModal.style.display = "none";
|
||||
document.querySelector(".overlay").style.display = "none";
|
||||
document.body.style.pointerEvents = "auto";
|
||||
@ -1132,7 +1007,6 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
|
||||
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";
|
||||
|
||||
@ -21,7 +21,6 @@ use Endroid\QrCode\Writer\PngWriter;
|
||||
try {
|
||||
$dotenv = Dotenv\Dotenv::createImmutable(__DIR__ . '/../../');
|
||||
$dotenv->load();
|
||||
error_log("File .env caricato correttamente da " . __DIR__ . '/../../.env');
|
||||
} catch (Exception $e) {
|
||||
error_log("Errore nel caricamento del file .env: " . $e->getMessage());
|
||||
echo json_encode(['error' => 'Errore nel caricamento del file di configurazione']);
|
||||
@ -176,7 +175,7 @@ $result->saveToFile($qrCodeFile);
|
||||
<!-- Modale per collage -->
|
||||
<div id="collageModal" class="modal" style="display: none; position: fixed; z-index: 1002; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.8);">
|
||||
<div class="modal-content" style="background: white; margin: 5% auto; padding: 20px; width: 80%; max-width: 1200px; position: relative;">
|
||||
<span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; cursor: pointer;">×</span>
|
||||
<span class="close-collage" style="position: absolute; top: 10px; right: 20px; font-size: 30px; font-weight: bold; color: #333; cursor: pointer; z-index: 1003; background: #fff; padding: 5px 10px; border-radius: 50%;">×</span>
|
||||
<h3>Crea Collage</h3>
|
||||
|
||||
<!-- Lista foto selezionabili -->
|
||||
@ -195,10 +194,15 @@ $result->saveToFile($qrCodeFile);
|
||||
<!-- Canvas per editing -->
|
||||
<canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
|
||||
|
||||
<!-- Pannello dei livelli -->
|
||||
<div id="layersPanel" style="width: 120px; max-height: 600px; overflow-y: auto; background: #f8f9fa; padding: 10px; position: absolute; right: 0; top: 60px;">
|
||||
<h4 style="margin: 0 0 10px 0; font-size: 16px;">Livelli</h4>
|
||||
<ul id="layersList" style="list-style: none; padding: 0;"></ul>
|
||||
</div>
|
||||
|
||||
<!-- Bottoni azioni -->
|
||||
<div style="margin-top: 20px; display: flex; flex-wrap: wrap; gap: 5px;">
|
||||
<button id="saveCollageBtn" title="Salva il collage"><i class="fas fa-save"></i></button>
|
||||
<!-- <button id="clearCanvasBtn" title="Pulisci il canvas"><i class="fas fa-trash"></i></button> -->
|
||||
<button id="bringToFrontBtn" title="Porta in primo piano"><i class="fas fa-arrow-up"></i></button>
|
||||
<button id="sendToBackBtn" title="Manda in fondo"><i class="fas fa-arrow-down"></i></button>
|
||||
<button id="bringForwardBtn" title="Sposta avanti di un livello"><i class="fas fa-arrow-circle-up"></i></button>
|
||||
@ -311,11 +315,6 @@ $result->saveToFile($qrCodeFile);
|
||||
color: white;
|
||||
}
|
||||
|
||||
#clearCanvasBtn {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
}
|
||||
|
||||
#bringToFrontBtn,
|
||||
#sendToBackBtn,
|
||||
#bringForwardBtn,
|
||||
@ -323,7 +322,6 @@ $result->saveToFile($qrCodeFile);
|
||||
background: #007bff;
|
||||
color: white;
|
||||
padding: 8px;
|
||||
/* Pulsanti solo icona più piccoli */
|
||||
}
|
||||
|
||||
#cropImageBtn,
|
||||
@ -344,4 +342,25 @@ $result->saveToFile($qrCodeFile);
|
||||
#collageModal button i {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
/* Stile per il pannello dei livelli */
|
||||
#layersPanel {
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
#layersPanel li {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
#layersPanel img {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 2px solid #ccc;
|
||||
cursor: pointer;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
#layersPanel img:hover {
|
||||
border-color: #007bff;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user