Fabriquer une image en PHP à partir de html et css

Bonjour à tous
J'ai un programme PHP qui génère une page contenant uniquement une <figure> assez complexe avec le résultat suivant
HTML généré

<figure id="card">
	<figure id="logofig">
		<figcaption id="EV">Ensemble Vocal</figcaption>
		<img id="logo" src="/images/logo-or.png">
		<figcaption id="DP">de Paris</figcaption>
	</figure>
	<div id="date">2018</div>
	<img id="photo" src="/images/membres/jpmoularde.jpg" alt="jpmoularde" title="jpmoularde">
	<figcaption id="name">
		<span class="nobreak">Jean-Pierre</span> Moularde</figcaption>
	<figcaption id="text">ASSOCIATION LOI DE 1901 - PPP W75104511</figcaption>
</figure

et l'image de ce qui s'affiche:


Pour fabriquer cette image, j'ai fait une capture d'écran et un peu d'édition.

J'aimerais pouvoir fabriquer cette image en php.
Bien entendu, je peux tout reprogrammer pour fabriquer l'image, mais existe-t-il un moyen de faire en php une sorte de "capture d'écran" de ce qui va être généré, et en particulier qui prenne en compte le CSS relativement complexe

@font-face {font-family: 'Perpetua';
src: url('/fonts/Per_____.TTF') format('truetype');}
html, body {
	width:100%;
	height:100%;
	padding:0;
	font-size: 10px;
}
#card {
	position:relative;
	width:37.2rem;
	height:23.6rem;
	border:.1rem solid gray;
	border-radius:1.0rem;
	margin:2rem;
	background:white;
}
#card * {
	font-family: Perpetua;
	background:transparent;
}
#logofig {
	position:absolute;
	left:1.5rem;
	top:2.5rem;
}
#logo {width:22em;}
#EV, #DP {
	position:absolute;
	display:table;
	font-size:2.0rem;
	font-variant:small-caps;
	color:rgb(196, 170, 47);
}
#EV {top:-1.4rem;left:0;}
#DP {bottom:-.3rem;right:0;}
#date {
	position:absolute;
	top:2.0rem;
	left:50%;
	transform:translateX(-50%);
	font-size: 6.0rem;
}
#photo {
	position:absolute;
	top:.8rem;
	right:.6rem;
	width:12.0rem;
}
#name {
	position:absolute;
	bottom: 2.8rem;
	width:100%;
	text-align:center;
	font-size:3.2rem;
}
#text {
	position:absolute;
	bottom:0.6rem;
	width:100%;
	text-align:center;
	font-size:1.6rem;
}
@media screen and (max-width:600px) {
	body {background:black;}
	#card {
		margin:2em auto 0;
	}
}
@media screen and (max-width:370px) {
	html,body {font-size:2.25vw;}
}

Je doute que ce soit possible, mais je préfère demander aux experts avant de tout programmer à nouveau...
Merci de vos conseils
Modifié par PapyJP (03 Dec 2018 - 15:19)

Bonjour,

A priori possible avec ImageMagick pour PHP (qui convertit à peu près n'importe quoi en n'importe quoi d'autre au format d'une image). Mais tu risques de passer un peu de temps à comprendre comment marche ImageMagick !

Un bon exercice en tout cas !

EDIT : je viens de faire quelques tests vite fait. Ton css n'est pas facile. Je ne garantie pas un résultat nickel avec ce css tel qu'il est ! Il est probable qu'il faudra utiliser des outils complémentaires.

Amicalement,
Modifié par parsimonhi (03 Dec 2018 - 20:45)