solocla/zibo-dashboard
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_popup.php
+67 -10
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>