Bonjour à tous et toutes,
j'ai tenté d'adapter un code ou il s'agit d'afficher sur une image (canvas) un texte modifiable à volonté (taille, position, font...) pour présenter l'aspect d'une gravure sur pierre...
Malgré tous mes efforts et manipulations, le bouton "Sauvegarder" n'agit pas, il ne se passe rien et je ne peux pas enregistrer l'image du résultat...
Dans mes recherches, j'ai cru comprendre qu'il s'agissait d'entrer une url plutôt qu'une image de mon ordi ou, peut-être d'entrer une image base64... Bref, j'aimerais comprendre ou est la paille (ou la poutre) de ce code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Générateur de texte</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<style>
html, body {
width: 100%;
margin: 0 auto;
}
textarea, input, button, select {
border: 1px solid #FF4500;
}
.row {
width: 100%;
padding: 5px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.column {
padding: 0px 10px;
display: flex;
flex-direction: column;
justify-content: center;
}
.input-container {
padding: 8px;
}
.titre {
font-size: 20px;
}
#text {
width: 200px;
height: 100px;
}
#download-link {
display: none;
}
#save-button {
font-size: 18px;
cursor: pointer;
margin: 20px;
color: white;
background-color: brown;
}
#save-button:hover {
color: brown;
background-color: orange;
}
#canvas {
max-width: 100%;
height: auto;
}
column
@media(max-width: 400px)
{.column
{text-align: center;
width: 100%;
padding-bottom: 10px;
}}
</style>
<body>
<div class="row">
<div class="col">
<div class="form-group">
<label for="text">
<center>Texte à insérer</center>
</label>
<div>
<textarea class="form-control" row="5" style="height: 130px;" id="text">
Votre texte
ou chiffres
ICI</textarea>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="font-size">
<center>Taille du texte</center>
</label>
<div class="input-container">
<input class="form-control" type="number" id="font-size" placeholder="eg: 50" value="80">
</div>
</div>
<div class="form-group">
<label for="gap-size">
<center>Espace entre les lignes</center>
</label>
<div class="input-container">
<input class="form-control" type="number" id="gap-size" placeholder="eg: 0" value="0">
</div>
</div>
<div class="form-group">
<label for="buffer-size">
<center>Distance depuis le haut</center>
</label>
<div class="input-container">
<input class="form-control" type="number" id="buffer-size" placeholder="e.g.: 200" value="140"/>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label for="font-style">
<center>Style d'écriture</center>
</label>
<div class="input-container">
<select id="font-style" class="form-control">
<option value="Times New Roman">Times New Roman</option>
<option value="Times">Times</option>
<option value="Arial">Arial</option>
<option value="Helvetica">Helvetica</option>
<option value="Courier New">Courier New</option>
<option value="Courier">Courier</option>
<option value="Verdana">Verdana</option>
<option value="Georgia">Georgia</option>
<option value="Palatino">Palatino</option>
<option value="Garamond">Garamond</option>
<option value="Bookman">Bookman</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Trebuchet MS">Trebuchet MS</option>
<option value="Arial Black">Arial Black</option>
<option value="Impact">Impact</option>
</select>
</div>
</div>
<div class="form-group">
<div>
<label>
<center>Contour
<input class="checkbox" id="font-is-outline" type="checkbox"/></center>
</label>
</div>
</div>
<div class="form-group">
<div>
<label>
<center>Gras
<input class="checkbox" id="font-is-bold" type="checkbox"/></center>
</label>
</div>
</div>
</div>
<div class="col">
<div class="form-group mt-25">
<button id="save-button" class="btn btn-primary btn-lg"><center>Sauvegarder</center></button>
</div>
</div>
</div>
<div class="row">
<canvas id="canvas"></canvas>
</div>
<a id="download-link" download="plaque.png"></a>
</style>
<script>
const elmTextArea = document.getElementById("text");
const elmCanvas = document.getElementById("canvas");
const ctx = elmCanvas.getContext("2d");
const img = new Image();
function paint(){
elmCanvas.width = img.width;
elmCanvas.height = img.height;
ctx.drawImage(img, 0, 0);
const center = elmCanvas.width / 2;
const color = '#000000';
const fontSize = parseInt(document.getElementById("font-size").value);
const bufferSize = parseInt(document.getElementById("buffer-size").value);
const gapSize = parseInt(document.getElementById("gap-size").value);
const fontStyle = document.getElementById("font-style").value;
const fontIsOutline = document.getElementById("font-is-outline").checked;
const fontWeight = document.getElementById("font-is-bold").checked ? 'bold' : 'normal';
ctx.textAlign = "center";
ctx.font = `${fontWeight} ${fontSize}px ${fontStyle}`;
ctx.lineWidth = 1;
ctx.fillStyle = color;
ctx.strokeStyle = color;
elmTextArea.value.split('\n').forEach((line, i) => {
const yOffset = bufferSize + (i * (gapSize + fontSize));
if (fontIsOutline){
ctx.strokeText(line, center, yOffset);
} else {
ctx.fillText(line, center, yOffset);
}
});
}
img.onload = paint;
img.src = 'plaque.png';
document.addEventListener('input', e => {
if (e.target.matches('input,textarea')) {
e.stopPropagation();
paint();
}
});
document.addEventListener('change', e => {
if (e.target.matches('select,input[type=checkbox]')) {
e.stopPropagation();
paint();
}
});
document.getElementById('save-button').addEventListener('click', () => {
var dt = elmCanvas.toDataURL("image/png");
const elmDownload = document.getElementById("download-link");
elmDownload.href = dt;
elmDownload.click();
});
</script>
</html>
Et l'image de base :
Merci aux bonnes âmes qui voudront bien passer un peu de temps pour m'aider ou me renvoyer à mes cours...
Afficher la suite
