74 lines
2.4 KiB
HTML
74 lines
2.4 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>Generate OG Image</title>
|
||
|
|
<style>
|
||
|
|
#canvas-container {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
canvas {
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
#preview {
|
||
|
|
margin-top: 20px;
|
||
|
|
}
|
||
|
|
#preview img {
|
||
|
|
max-width: 600px;
|
||
|
|
border: 1px solid #ccc;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Générer l'image Open Graph</h1>
|
||
|
|
<p>Cette page génère une image 1200x630px avec le logo Index pour les partages sociaux.</p>
|
||
|
|
<button onclick="generateImage()">Générer l'image</button>
|
||
|
|
<div id="canvas-container">
|
||
|
|
<canvas id="canvas" width="1200" height="630"></canvas>
|
||
|
|
</div>
|
||
|
|
<div id="preview"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
function generateImage() {
|
||
|
|
const canvas = document.getElementById('canvas');
|
||
|
|
const ctx = canvas.getContext('2d');
|
||
|
|
|
||
|
|
// Fond blanc
|
||
|
|
ctx.fillStyle = '#ffffff';
|
||
|
|
ctx.fillRect(0, 0, 1200, 630);
|
||
|
|
|
||
|
|
// Charger et dessiner le logo SVG
|
||
|
|
const img = new Image();
|
||
|
|
img.onload = function() {
|
||
|
|
// Centrer le logo
|
||
|
|
const logoWidth = 400;
|
||
|
|
const logoHeight = (this.height / this.width) * logoWidth;
|
||
|
|
const x = (1200 - logoWidth) / 2;
|
||
|
|
const y = (630 - logoHeight) / 2 - 50;
|
||
|
|
|
||
|
|
ctx.drawImage(img, x, y, logoWidth, logoHeight);
|
||
|
|
|
||
|
|
// Ajouter le texte en dessous
|
||
|
|
ctx.fillStyle = '#000000';
|
||
|
|
ctx.font = '24px sans-serif';
|
||
|
|
ctx.textAlign = 'center';
|
||
|
|
ctx.fillText('Boutique de Index, ONG d\'investigation indépendante', 600, 500);
|
||
|
|
|
||
|
|
// Convertir en PNG et afficher
|
||
|
|
canvas.toBlob(function(blob) {
|
||
|
|
const url = URL.createObjectURL(blob);
|
||
|
|
const preview = document.getElementById('preview');
|
||
|
|
preview.innerHTML = `
|
||
|
|
<h2>Aperçu</h2>
|
||
|
|
<img src="${url}" alt="OG Image Preview">
|
||
|
|
<p><a href="${url}" download="og-logo.png">Télécharger og-logo.png</a></p>
|
||
|
|
<p>Placez ce fichier dans <code>/assets/og-logo.png</code></p>
|
||
|
|
`;
|
||
|
|
});
|
||
|
|
};
|
||
|
|
img.src = 'assets/index-logo.svg';
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|