solocla/theloftstore
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/userarea/class/curl_auth_debug.log
View File

@ -31,6 +31,6 @@ Content-Length: 51
< strict-transport-security: max-age=2592000
< x-powered-by: ASP.NET
< x-content-type-options: nosniff
< date: Mon, 08 Sep 2025 08:12:42 GMT
< date: Mon, 08 Sep 2025 09:32:07 GMT
<
* Connection #0 to host 93.43.5.102 left intact

6
public/userarea/class/curl_request_debug.log
View File

@ -15,11 +15,11 @@
* [HTTP/2] [1] [:scheme: https]
* [HTTP/2] [1] [:authority: 93.43.5.102]
* [HTTP/2] [1] [:path: /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues]
* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMyNjM2MiwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.nc12p_9WtfSGJF4kxgnsEHzjRSeDn1rY90GuG2B7CAQ]
* [HTTP/2] [1] [authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMzMTEyNywiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.VTbzkXb5JZigjM4RShouS0Q9YPF8t3EsmJ92yeLcGs0]
* [HTTP/2] [1] [accept: application/json]
> GET /limsapi/api/odata/CustomField(1083)?$expand=CustomFieldsValues HTTP/2
Host: 93.43.5.102
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMyNjM2MiwiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.nc12p_9WtfSGJF4kxgnsEHzjRSeDn1rY90GuG2B7CAQ
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJodHRwOi8vc2NoZW1hcy54bWxzb2FwLm9yZy93cy8yMDA1LzA1L2lkZW50aXR5L2NsYWltcy9uYW1laWRlbnRpZmllciI6IjQ5MiIsIlhhZlNlY3VyaXR5QXV0aFBhc3NlZCI6IlhhZlNlY3VyaXR5QXV0aFBhc3NlZCIsImh0dHA6Ly9zY2hlbWFzLnhtbHNvYXAub3JnL3dzLzIwMDUvMDUvaWRlbnRpdHkvY2xhaW1zL25hbWUiOiJXZWJBcGlVc2VyIiwiWGFmU2VjdXJpdHkiOiJYYWZTZWN1cml0eSIsIlhhZkxvZ29uUGFyYW1zIjoicTFZS0xVNHQ4a3ZNVFZXeVVncFBUWElzeUFRSktPa29CU1FXRjVmbkY2VUF4Y3RUa3hJTE1rdUI0Z2FHU3JVQSIsImV4cCI6MTc1NzMzMTEyNywiaXNzIjoiTXkiLCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjQyMDAifQ.VTbzkXb5JZigjM4RShouS0Q9YPF8t3EsmJ92yeLcGs0
Accept: application/json
< HTTP/2 200
@ -30,6 +30,6 @@ Accept: application/json
< odata-version: 4.0
< x-powered-by: ASP.NET
< x-content-type-options: nosniff
< date: Mon, 08 Sep 2025 08:12:45 GMT
< date: Mon, 08 Sep 2025 09:32:11 GMT
<
* Connection #0 to host 93.43.5.102 left intact

289
public/userarea/import_debug.log
View File

File diff suppressed because one or more lines are too long

367
public/userarea/photos.js
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) {

77
public/userarea/photos_popup.php
View File

@ -173,7 +173,7 @@ $result->saveToFile($qrCodeFile);
<img id="enlargedImage" class="image-modal-content" src="" alt="Immagine ingrandita">
</div>
<!-- Nuovo modale per collage -->
<!-- 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;">&times;</span>
@ -196,15 +196,20 @@ $result->saveToFile($qrCodeFile);
<canvas id="collageCanvas" width="800" height="600" style="border: 1px solid #ccc; margin-top: 20px;"></canvas>
<!-- Bottoni azioni -->
<div style="margin-top: 20px;">
<button id="saveCollageBtn">Salva Collage</button>
<button id="clearCanvasBtn">Pulisci Canvas</button>
<button id="bringToFrontBtn" title="Porta in primo piano">In Alto</button>
<button id="sendToBackBtn" title="Manda in fondo">In Fondo</button>
<button id="bringForwardBtn" title="Sposta avanti di un livello">Avanti</button>
<button id="sendBackwardBtn" title="Sposta indietro di un livello">Indietro</button>
<button id="cropImageBtn" title="Ritaglia immagine selezionata" disabled>Ritaglia</button>
<button id="applyCropBtn" title="Applica ritaglio" disabled>Applica Ritaglio</button>
<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>
<button id="sendBackwardBtn" title="Sposta indietro di un livello"><i class="fas fa-arrow-circle-down"></i></button>
<button id="cropImageBtn" title="Ritaglia immagine selezionata" disabled><i class="fas fa-crop"></i></button>
<button id="applyCropBtn" title="Applica ritaglio" disabled><i class="fas fa-crop"></i> Applica</button>
<button id="cancelCropBtn" title="Annulla ritaglio" disabled><i class="fas fa-crop"></i> Annulla</button>
<button id="removeBackgroundBtn" title="Rimuovi sfondo immagine selezionata" disabled><i class="fas fa-eraser"></i> Rimuovi Sfondo</button>
<button id="removeImageBtn" title="Rimuovi immagine selezionata" disabled><i class="fas fa-trash-alt"></i> Rimuovi</button>
<button id="undoBtn" title="Annulla ultima azione" disabled><i class="fas fa-undo"></i></button>
<p id="backgroundRemovalInstruction" style="display: none; color: #007bff;">Clicca sull'immagine per selezionare il colore dello sfondo da rimuovere</p>
</div>
</div>
</div>
@ -287,4 +292,56 @@ $result->saveToFile($qrCodeFile);
font-size: 16px;
color: white;
}
/* Stile per i pulsanti del modale collage */
#collageModal button {
padding: 8px 12px;
margin: 5px;
border: none;
cursor: pointer;
border-radius: 4px;
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
}
#saveCollageBtn {
background: #28a745;
color: white;
}
#clearCanvasBtn {
background: #dc3545;
color: white;
}
#bringToFrontBtn,
#sendToBackBtn,
#bringForwardBtn,
#sendBackwardBtn {
background: #007bff;
color: white;
padding: 8px;
/* Pulsanti solo icona più piccoli */
}
#cropImageBtn,
#applyCropBtn,
#cancelCropBtn,
#removeBackgroundBtn,
#removeImageBtn,
#undoBtn {
background: #ffc107;
color: white;
}
#collageModal button:disabled {
background: #ccc;
cursor: not-allowed;
}
#collageModal button i {
font-size: 16px;
}
</style>