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é
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
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)
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)