| Server IP : 109.234.162.214 / Your IP : 216.73.216.222 Web Server : Apache System : Linux servd162214.srv.odns.fr 4.18.0-372.26.1.lve.1.el8.x86_64 #1 SMP Fri Sep 16 14:08:19 EDT 2022 x86_64 User : carpe ( 1178) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/carpe/www/board/ |
Upload File : |
<!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>