Файловый менеджер

Файловый менеджер - Редактировать - /home/carpe/public_html/board/board.php

Назад
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <title>Combiner couleur + image + template</title> <style> body { font-family: "Poppins", sans-serif; background: linear-gradient(135deg, #f0f4ff, #e8faff); display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: 100vh; padding: 40px 20px; text-align: center; } .card { background: white; padding: 25px 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); max-width: 500px; width: 100%; } label { font-weight: 600; display: block; margin-bottom: 8px; } select, input[type="color"] { padding: 8px; border-radius: 8px; border: 1px solid #ccc; font-size: 1em; outline: none; width: 80%; max-width: 250px; margin-bottom: 15px; } img { width: 300px; border-radius: 15px; margin: 10px 0; box-shadow: 0 3px 12px rgba(0,0,0,0.2); } button { margin: 10px; padding: 10px 25px; border: none; border-radius: 10px; background: linear-gradient(135deg, #007bff, #00c6ff); color: white; font-weight: bold; cursor: pointer; } button:hover { background: linear-gradient(135deg, #0056b3, #0095cc); transform: scale(1.03); transition: 0.3s; } #canvas { margin-top: 20px; border: 2px solid #ddd; border-radius: 12px; max-width: 100%; height: auto; display: none; box-shadow: 0 4px 15px rgba(0,0,0,0.15); } </style> </head> <body> <h2>Combiner couleur + image + template</h2> <div class="card"> <label>Choisis une couleur :</label> <input type="color" id="colorPicker" value="#00bfff"> <label>Choisis une image :</label> <select id="imageSelect"> <option value="board.png">nocap</option> <option value="board1.png">faker1</option> <option value="myb1.png">myv1</option> <option value="myb2.png">myb2</option> <option value="faker2.png">Faker2</option> <option value="faker3.png">Faker3</option> <option value="try.png">Try</option> <option value="spider.png">Spider</option> <option value="arcadia.png">Arcadia</option> <option value="flowers.png">Flowers</option> <option value="carpe.png">carpe</option> </select> <img id="displayedImage" src="board.png" alt="Image sélectionnée"> <div> <button id="combineBtn">✨ Combiner</button> <button id="downloadBtn" style="display:none;">⬇️ Télécharger</button> </div> <canvas id="canvas"></canvas> </div> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const colorPicker = document.getElementById('colorPicker'); const imageSelect = document.getElementById('imageSelect'); const combineBtn = document.getElementById('combineBtn'); const downloadBtn = document.getElementById('downloadBtn'); const displayedImage = document.getElementById('displayedImage'); // Template PNG (superposé par-dessus) const templateSrc = 'template.png'; // Met à jour l'image d'aperçu imageSelect.addEventListener('change', () => { displayedImage.src = imageSelect.value; }); combineBtn.addEventListener('click', () => { const img = new Image(); img.src = imageSelect.value; const template = new Image(); template.src = templateSrc; // Attendre que les deux images soient chargées img.onload = () => { template.onload = () => { canvas.width = img.width; canvas.height = img.height; // Fond couleur ctx.fillStyle = colorPicker.value; ctx.fillRect(0, 0, canvas.width, canvas.height); // ----- Image principale retournée verticalement ----- ctx.save(); // sauvegarde l'état ctx.translate(0, canvas.height); // déplace l'origine en bas ctx.scale(1, -1); // miroir vertical ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.restore(); // restauration pour template // Template PNG par-dessus ctx.drawImage(template, 0, 0, canvas.width, canvas.height); canvas.style.display = 'block'; downloadBtn.style.display = 'inline-block'; }; }; }); // Télécharger le résultat downloadBtn.addEventListener('click', () => { const link = document.createElement('a'); link.download = 'image_combinee.png'; link.href = canvas.toDataURL('image/png'); link.click(); }); </script> </body> </html>

| ver. 1.4 | Github | . | PHP 8.0.30 | Генерация страницы: 0 | proxy | phpinfo | Настройка