solocla/trf_certest
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added canvas functionality

Browse Source
This commit is contained in:
Claudio
2025-09-08 11:40:43 +02:00
parent a45ba1c8b3
commit c1a396f246
5 changed files with 694 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/userarea/photos.js
+334 -33
View File
@@ -402,6 +402,12 @@ document.addEventListener("DOMContentLoaded", function () {
);
exitCropMode();
}
if (isRemovingBackground) {
console.log(
"Chiusura modale durante rimozione sfondo, esco dalla modalità",
);
exitBackgroundRemovalMode();
}
});
}
@@ -411,6 +417,11 @@ document.addEventListener("DOMContentLoaded", function () {
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!");
@@ -434,46 +445,125 @@ document.addEventListener("DOMContentLoaded", function () {
// Abilita ridimensionamento e trascinamento
canvas.on("object:modified", () => {
console.log("Oggetto modificato nel canvas");
saveCanvasState();
canvas.renderAll();
});
// Gestisci selezione per abilitare/disabilitare pulsanti di ritaglio
// Gestisci selezione per abilitare/disabilitare pulsanti
canvas.on("selection:created", () => {
console.log("Evento selection:created triggerato");
updateCropButtons();
updateButtons();
});
canvas.on("selection:updated", () => {
console.log("Evento selection:updated triggerato");
updateCropButtons();
updateButtons();
});
canvas.on("selection:cleared", () => {
console.log("Evento selection:cleared triggerato");
if (!isCropping) {
updateCropButtons();
} else {
if (!isCropping && !isRemovingBackground) {
updateButtons();
} else if (isCropping && cropRect) {
console.log(
"Ignoro selection:cleared perché in modalità ritaglio",
);
if (cropRect) {
canvas.setActiveObject(cropRect); // Ripristina selezione del rettangolo
canvas.renderAll();
}
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
updateCropButtons();
updateButtons();
}
// Aggiorna stato dei pulsanti di ritaglio
function updateCropButtons() {
// 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(
"updateCropButtons: activeObject =",
"updateButtons: activeObject =",
activeObject ? activeObject.type : null,
"isCropping =",
isCropping,
"isRemovingBackground =",
isRemovingBackground,
"history.length =",
history.length,
);
if (isCropping && cropRect) {
console.log(
@@ -481,23 +571,47 @@ document.addEventListener("DOMContentLoaded", function () {
);
cropBtn.disabled = true;
applyCropBtn.disabled = false;
if (cancelCropBtn) cancelCropBtn.disabled = false;
} else if (
activeObject &&
activeObject.type === "image" &&
!isCropping
) {
console.log("Abilitazione cropImageBtn");
cropBtn.disabled = false;
applyCropBtn.disabled = true;
if (cancelCropBtn) cancelCropBtn.disabled = true;
} else {
cancelCropBtn.disabled = false;
removeBackgroundBtn.disabled = true;
removeImageBtn.disabled = true;
undoBtn.disabled = true;
instruction.style.display = "none";
} else if (isRemovingBackground && backgroundRemovalImage) {
console.log(
"Disabilitazione cropImageBtn, applyCropBtn e cancelCropBtn",
"Modo rimozione sfondo attivo, removeBackgroundBtn disabilitato",
);
cropBtn.disabled = true;
applyCropBtn.disabled = true;
if (cancelCropBtn) cancelCropBtn.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";
}
}
@@ -538,10 +652,7 @@ document.addEventListener("DOMContentLoaded", function () {
canvas.add(cropRect);
canvas.setActiveObject(cropRect);
canvas.renderAll();
document.getElementById("cropImageBtn").disabled = true;
document.getElementById("applyCropBtn").disabled = false;
const cancelCropBtn = document.getElementById("cancelCropBtn");
if (cancelCropBtn) cancelCropBtn.disabled = false;
updateButtons();
console.log("Rettangolo di ritaglio creato e applicato");
}
@@ -557,7 +668,7 @@ document.addEventListener("DOMContentLoaded", function () {
isApplyingCrop = false;
canvas.discardActiveObject();
canvas.renderAll();
updateCropButtons();
updateButtons();
console.log("Uscita dalla modalità ritaglio");
}
@@ -618,6 +729,7 @@ document.addEventListener("DOMContentLoaded", function () {
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");
},
@@ -625,6 +737,160 @@ document.addEventListener("DOMContentLoaded", function () {
);
}
// 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) {
@@ -666,6 +932,7 @@ document.addEventListener("DOMContentLoaded", function () {
});
// Deseleziona checkbox dopo aggiunta
checkboxes.forEach((cb) => (cb.checked = false));
saveCanvasState(); // Salva lo stato dopo l'aggiunta
});
}
@@ -701,6 +968,8 @@ document.addEventListener("DOMContentLoaded", function () {
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");
});
@@ -714,6 +983,7 @@ 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");
} else {
alert("Seleziona un'immagine sul canvas!");
@@ -728,6 +998,7 @@ 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");
} else {
alert("Seleziona un'immagine sul canvas!");
@@ -742,6 +1013,7 @@ 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");
} else {
alert("Seleziona un'immagine sul canvas!");
@@ -756,6 +1028,7 @@ 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");
} else {
alert("Seleziona un'immagine sul canvas!");
@@ -780,7 +1053,6 @@ document.addEventListener("DOMContentLoaded", function () {
});
}
// Gestione pulsante Annulla Ritaglio
const cancelCropBtn = document.getElementById("cancelCropBtn");
if (cancelCropBtn) {
cancelCropBtn.addEventListener("click", () => {
@@ -789,6 +1061,35 @@ document.addEventListener("DOMContentLoaded", function () {
});
}
// 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) {