aperçu en png et svg
This commit is contained in:
parent
15b7ecf4ae
commit
b5930083bb
63
apercu.php
63
apercu.php
@ -1,63 +0,0 @@
|
||||
<?php
|
||||
|
||||
// Paramètres de largeur, hauteur, lignes et colonnes
|
||||
$largeur = isset($_GET['largeur']) ? (int)$_GET['largeur'] : 200; // Valeur par défaut : 200
|
||||
$hauteur = isset($_GET['hauteur']) ? (int)$_GET['hauteur'] : 200; // Valeur par défaut : 200
|
||||
$lignes = isset($_GET['lignes']) ? (int)$_GET['lignes'] : 8; // Valeur par défaut : 4
|
||||
$colonnes = isset($_GET['colonnes']) ? (int)$_GET['colonnes'] : 8; // Valeur par défaut : 4
|
||||
$bordure = 6;
|
||||
|
||||
// Créer une image vide
|
||||
$image = imagecreate($largeur, $hauteur);
|
||||
|
||||
// Couleurs
|
||||
$blanc = imagecolorallocate($image, 255, 255, 255);
|
||||
$noir = imagecolorallocate($image, 0, 0, 0);
|
||||
|
||||
// Remplir l'image avec un fond blanc
|
||||
imagefill($image, 0, 0, $blanc);
|
||||
|
||||
// Calculer la taille et la position des cases
|
||||
$cote = (int)min(($largeur - 2 * $bordure) / $colonnes, ($hauteur - 2 * $bordure) / $lignes);
|
||||
$haut = (int)(($hauteur - $lignes * $cote - 2 * $bordure) / 2) + $bordure;
|
||||
$gauche = (int)(($largeur - $colonnes * $cote - 2 * $bordure) / 2) + $bordure;
|
||||
$bas = $haut + $lignes * $cote;
|
||||
$droite = $gauche + $colonnes * $cote;
|
||||
|
||||
// Dessiner les bordures extérieures (3 pixels d'épaisseur)
|
||||
imagesetthickness($image, $bordure);
|
||||
imagerectangle($image, $gauche, $haut, $droite, $bas, $noir);
|
||||
|
||||
// Dessiner les lignes et colonnes internes (1 pixel d'épaisseur)
|
||||
imagesetthickness($image, 2);
|
||||
for ($x = $gauche; $x <= $droite; $x += $cote) {
|
||||
imageline($image, $x, $haut, $x, $bas, $noir); // Lignes verticales
|
||||
}
|
||||
for ($y = $haut; $y <= $bas; $y += $cote) {
|
||||
imageline($image, $gauche, $y, $droite, $y, $noir); // Lignes horizontales
|
||||
}
|
||||
|
||||
// Noicir les cases
|
||||
if (isset($_GET["grille"])) {
|
||||
include_once "Grille.php";
|
||||
|
||||
$grille = new Grille($lignes, $colonnes);
|
||||
$id = htmlspecialchars($_GET["grille"]);
|
||||
$grille->load($id) || $grille->genere($id);
|
||||
|
||||
for ($y = 0; $y < $lignes; $y++) {
|
||||
for ($x = 0; $x < $colonnes; $x++) {
|
||||
if ($grille[$y][$x] == CASE_NOIRE) {
|
||||
imagefilledrectangle($image, $gauche + $x * $cote, $haut + $y * $cote, $gauche + ($x + 1) * $cote, $haut + ($y + 1) * $cote, $noir);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Envoyer l'image au navigateur
|
||||
header('Content-Type: image/png');
|
||||
imagepng($image);
|
||||
|
||||
// Libérer la mémoire
|
||||
imagedestroy($image);
|
||||
?>
|
||||
84
apercu.png.php
Normal file
84
apercu.png.php
Normal file
@ -0,0 +1,84 @@
|
||||
<?php
|
||||
|
||||
$largeur = isset($_GET['largeur']) ? (int)$_GET['largeur'] : 200;
|
||||
$hauteur = isset($_GET['hauteur']) ? (int)$_GET['hauteur'] : 200;
|
||||
$lignes = isset($_GET['lignes']) ? (int)$_GET['lignes'] : 8;
|
||||
$colonnes = isset($_GET['colonnes']) ? (int)$_GET['colonnes'] : 8;
|
||||
|
||||
$image = imagecreatetruecolor($largeur, $hauteur);
|
||||
imagesavealpha($image, true);
|
||||
$blanc = imagecolorallocate($image, 255, 255, 255);
|
||||
$noir = imagecolorallocate($image, 0, 0, 0);
|
||||
$transparent = imagecolorallocatealpha($image, 0, 0, 0, 127);
|
||||
|
||||
// Calculer la taille et la position des cases
|
||||
$min_dimension = min($largeur, $hauteur);
|
||||
if ($min_dimension <= 16) {
|
||||
$bordure_exterieure = 0;
|
||||
} else if ($min_dimension < 32) {
|
||||
$bordure_exterieure = 1;
|
||||
} else if ($min_dimension <= 96) {
|
||||
$bordure_exterieure = 2;
|
||||
} else if ($min_dimension <= 600) {
|
||||
$bordure_exterieure = 3;
|
||||
} else {
|
||||
$bordure_exterieure = 6;
|
||||
}
|
||||
$cote = (int)min(($largeur - 2 * $bordure_exterieure) / $colonnes, ($hauteur - 2 * $bordure_exterieure) / $lignes);
|
||||
if ($cote < 3) {
|
||||
$bordure_interieure = 0;
|
||||
} else if ($min_dimension < 600) {
|
||||
$bordure_interieure = 1;
|
||||
} else {
|
||||
$bordure_interieure = 2;
|
||||
}
|
||||
$haut = (int)(($hauteur - $lignes * $cote - 2 * $bordure_exterieure) / 2) + (int)$bordure_exterieure;
|
||||
$gauche = (int)(($largeur - $colonnes * $cote - 2 * $bordure_exterieure) / 2) + $bordure_exterieure;
|
||||
$bas = $haut + $lignes * $cote - $bordure_interieure;
|
||||
$droite = $gauche + $colonnes * $cote - $bordure_interieure;
|
||||
|
||||
// Remplir l'image avec un fond transparent
|
||||
imagefill($image, 0, 0, $transparent);
|
||||
|
||||
// Dessiner les bordures extérieures (3 pixels d'épaisseur)
|
||||
$marge1 = ceil($bordure_exterieure / 2);
|
||||
$marge2 = floor($bordure_exterieure / 2);
|
||||
imagesetthickness($image, $bordure_exterieure);
|
||||
imagerectangle($image, $gauche - $marge1, $haut - $marge1, $droite + $marge2 - 1, $bas + $marge2 - 1, $noir);
|
||||
imagefilledrectangle($image, $gauche, $haut, $droite - 1, $bas - 1, $blanc);
|
||||
|
||||
// Dessiner les lignes et colonnes internes (1 pixel d'épaisseur)
|
||||
if ($bordure_interieure >= 1) {
|
||||
imagesetthickness($image, $bordure_interieure);
|
||||
for ($x = $gauche + $cote - ceil($bordure_interieure / 2); $x < $droite; $x += $cote) {
|
||||
imageline($image, $x, $haut, $x, $bas, $noir); // Lignes verticales
|
||||
}
|
||||
for ($y = $haut + $cote - ceil($bordure_interieure / 2); $y < $bas; $y += $cote) {
|
||||
imageline($image, $gauche, $y, $droite, $y, $noir); // Lignes horizontales
|
||||
}
|
||||
}
|
||||
|
||||
// Noicir les cases
|
||||
if (isset($_GET["grille"])) {
|
||||
include_once "Grille.php";
|
||||
|
||||
$grille = new Grille($lignes, $colonnes);
|
||||
$id = htmlspecialchars($_GET["grille"]);
|
||||
$grille->load($id) || $grille->genere($id);
|
||||
|
||||
for ($y = 0; $y < $lignes; $y++) {
|
||||
for ($x = 0; $x < $colonnes; $x++) {
|
||||
if ($grille[$y][$x] == CASE_NOIRE) {
|
||||
imagefilledrectangle($image, $gauche + $x * $cote, $haut + $y * $cote, $gauche + ($x + 1) * $cote - 1, $haut + ($y + 1) * $cote - 1, $noir);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Envoyer l'image au navigateur
|
||||
header('Content-Type: image/png');
|
||||
imagepng($image);
|
||||
|
||||
// Libérer la mémoire
|
||||
imagedestroy($image);
|
||||
?>
|
||||
90
apercu.svg.php
Normal file
90
apercu.svg.php
Normal file
@ -0,0 +1,90 @@
|
||||
<?php
|
||||
|
||||
$lignes = isset($_GET['lignes']) ? (int)$_GET['lignes'] : 8;
|
||||
$colonnes = isset($_GET['colonnes']) ? (int)$_GET['colonnes'] : 8;
|
||||
|
||||
$bordure = 2;
|
||||
$marge = $bordure / 2;
|
||||
$cote = 20;
|
||||
|
||||
// Dimensions du SVG
|
||||
$width = $colonnes * $cote; // Largeur proportionnelle au nombre de colonnes
|
||||
$height = $lignes * $cote; // Hauteur proportionnelle au nombre de lignes
|
||||
$rectRadius = 7; // Rayon des coins arrondis du rectangle
|
||||
|
||||
// Création du document XML
|
||||
$doc = new DOMDocument('1.0', 'UTF-8');
|
||||
$doc->formatOutput = true;
|
||||
|
||||
// Élément SVG principal
|
||||
$svg = $doc->createElement('svg');
|
||||
$svg->setAttribute('xmlns', 'http://www.w3.org/2000/svg');
|
||||
$svg->setAttribute('viewBox', -$marge . " " . -$marge . " " . ($width + $bordure) . " " . ($height + $bordure));
|
||||
$svg->setAttribute('width', $width + $bordure);
|
||||
$svg->setAttribute('height', $height + $bordure);
|
||||
$doc->appendChild($svg);
|
||||
|
||||
// Rectangle arrondi
|
||||
$rect = $doc->createElement('rect');
|
||||
$rect->setAttribute('x', 0);
|
||||
$rect->setAttribute('y', 0);
|
||||
$rect->setAttribute('width', $width);
|
||||
$rect->setAttribute('height', $height);
|
||||
$rect->setAttribute('rx', $rectRadius);
|
||||
$rect->setAttribute('ry', $rectRadius);
|
||||
$rect->setAttribute('fill', 'white');
|
||||
$rect->setAttribute('stroke', 'black');
|
||||
$rect->setAttribute('stroke-width', $bordure);
|
||||
$svg->appendChild($rect);
|
||||
|
||||
// Lignes verticales
|
||||
for ($i = 1; $i < $colonnes; $i++) {
|
||||
$x = $i * $cote;
|
||||
$line = $doc->createElement('line');
|
||||
$line->setAttribute('x1', $x);
|
||||
$line->setAttribute('y1', $marge);
|
||||
$line->setAttribute('x2', $x);
|
||||
$line->setAttribute('y2', $height - $marge);
|
||||
$line->setAttribute('stroke', '#000');
|
||||
$line->setAttribute('stroke-width', 1);
|
||||
$svg->appendChild($line);
|
||||
}
|
||||
|
||||
// Lignes horizontales
|
||||
for ($i = 1; $i < $lignes; $i++) {
|
||||
$y = $i * $cote;
|
||||
$line = $doc->createElement('line');
|
||||
$line->setAttribute('x1', $marge);
|
||||
$line->setAttribute('y1', $y);
|
||||
$line->setAttribute('x2', $width - $marge);
|
||||
$line->setAttribute('y2', $y);
|
||||
$line->setAttribute('stroke', '#000');
|
||||
$line->setAttribute('stroke-width', 1);
|
||||
$svg->appendChild($line);
|
||||
}
|
||||
|
||||
// Noicir les cases
|
||||
if (isset($_GET["grille"])) {
|
||||
include_once "Grille.php";
|
||||
|
||||
$grille = new Grille($lignes, $colonnes);
|
||||
$id = htmlspecialchars($_GET["grille"]);
|
||||
$grille->load($id) || $grille->genere($id);
|
||||
|
||||
for ($y = 0; $y < $lignes; $y++) {
|
||||
for ($x = 0; $x < $colonnes; $x++) {
|
||||
if ($grille[$y][$x] == CASE_NOIRE) {
|
||||
$rect = $doc->createElement('rect');
|
||||
$rect->setAttribute('x', $x * $cote);
|
||||
$rect->setAttribute('y', $y * $cote);
|
||||
$rect->setAttribute('width', $cote);
|
||||
$rect->setAttribute('height', $cote);
|
||||
$rect->setAttribute('fill', 'black');
|
||||
$svg->appendChild($rect);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
header('Content-Type: image/svg+xml');
|
||||
echo $doc->saveXML();
|
||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -21,8 +21,8 @@
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#505050"
|
||||
inkscape:zoom="8.3124997"
|
||||
inkscape:cx="28.57143"
|
||||
inkscape:cy="30.977445"
|
||||
inkscape:cx="32"
|
||||
inkscape:cy="32"
|
||||
inkscape:window-width="1536"
|
||||
inkscape:window-height="793"
|
||||
inkscape:window-x="0"
|
||||
@ -32,19 +32,19 @@
|
||||
<path
|
||||
fill="#ffffff"
|
||||
stroke="#000000"
|
||||
stroke-width="2.03093"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
d="m 62.968825,7.9076 v 48.183453 a 6.8777723,6.877772 0 0 1 -6.876426,6.87777 H 7.9089443 a 6.8777723,6.877772 0 0 1 -6.87777,-6.876424 V 7.9076 A 6.8777723,6.877772 0 0 1 7.9075973,1.0311743 H 56.092399 A 6.8777723,6.877772 0 0 1 62.968825,7.9076 Z M 46.910816,17.089183 H 31.999999 v 14.910816 h 14.910817 z"
|
||||
d="m 63,8 v 48 a 7,7 0 0 1 -7,7 H 8 a 7,7 0 0 1 -7,-7 V 9 A 7,7 0 0 1 8,1 H 56 A 7,7 0 0 1 63,8 Z M 47,17 H 32 v 15 h 15 z"
|
||||
id="path1" />
|
||||
<path
|
||||
d="M 46.910816,17.089183 H 31.999999 v 14.910816 h 14.910817 z"
|
||||
d="M 47,17 H 32 v 15 h 15 z"
|
||||
id="path2"
|
||||
style="stroke-width:1.34646" />
|
||||
style="stroke-width:1" />
|
||||
<path
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="2.06235"
|
||||
stroke-width="2"
|
||||
stroke-miterlimit="10"
|
||||
d="M 46.910816,62.968823 V 31.999999 m 0,-14.910815 V 1.0311743 M 31.999999,62.968823 V 31.999999 m 0,-14.910815 V 1.0311743 m -16.058011,0 V 62.968823 M 46.910816,31.999999 h 16.058009 m -30.968826,0 H 1.0311743 M 62.968825,46.910815 H 1.0311743 M 62.968825,15.941991 H 1.0311743"
|
||||
d="M 47,63 V 32 m 0,-15 V 1 M 32,63 V 32 m 0,-15 V 1 m -16,0 V 63 M 47,32 h 16 m -31,0 H 1 M 63,47 H 1 M 63,16 H 1"
|
||||
id="path3" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.5 KiB |
@ -101,15 +101,15 @@ if ($grille_valide) {
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="shortcut icon" href="favicon.ico" />
|
||||
<link rel="icon" type="image/svg+xml" href="favicons/favicon.svg">
|
||||
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96" />
|
||||
<link rel="icon" type="image/svg+xml" href="apercu.svg.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>">
|
||||
<link rel="icon" type="image/png" sizes="96x96" href="apercu.png.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>&largeur=96&hauteur=96" />
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="favicons/apple-touch-icon.png" />
|
||||
<meta name="apple-mobile-web-app-title" content="🄼🄾🅃🅂 🄲🅁🄾🄸🅂🄴🅂" />
|
||||
<link rel="manifest" href="site.webmanifest" />
|
||||
<meta property="og:title" content="🄼🄾🅃🅂▣🄲🅁🄾🄸🅂🄴🅂"/>
|
||||
<meta property="og:type" content="game"/>
|
||||
<meta property="og:url" content="<?=$basedir?>"/>
|
||||
<meta property="og:image" content="<?=$basedir?>/apercu.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>&largeur=1200&hauteur=630"/>
|
||||
<meta property="og:image" content="<?=$basedir?>/apercu.png.php?grille=<?=$id?>&lignes=<?=$hauteur?>&colonnes=<?=$largeur?>&largeur=1200&hauteur=630"/>
|
||||
<meta property="og:image:width" content="1200"/>
|
||||
<meta property="og:image:height" content="630"/>
|
||||
<meta property="og:locale" content="fr_FR"/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user