8795 sujets

Développement web côté serveur, CMS

[Résolu] Capture d'écran de plusieurs DIV ?

Bonjour à tous,

Encore une fois, je me retrouve à réfléchir à des trucs de malade !
Fallait pas inventer la nuit !

En gros, aujourd'hui je "fabrique" une image à partir de plusieurs div. J'obtiens mon image finale.

<html>
<head>
<STYLE type="text/css"> 
body
{
background-color:black;
}

#1
{
position:absolute;
top:50px;
left:50px;
z-index:2;
}

#2
{
position:absolute;
top:50px;
left:50px;
z-index:1;
}

#3
{
position:absolute;
top:19px;
left:50px;
z-index:2;
}

#4
{
position:absolute;
top:50px;
left:50px;
z-index:3;
}

</style>
</head>
<body>
<div id=1><img src='tete.gif'></div>
<div id=2><img src='yeux.gif'></div>
<div id=3><img src='cheveux.gif'></div>
<div id=4><img src='barbe.gif'></div>
</body>
</html>




Mais qu'en faire?
J'aimerais bien entendu la sauvegarder, par exemple Smiley smile
Est-ce qu'un imagecopy de la bibliothèque GD de php fonctionnerait?

Sinon... avez-vous une idée... une solution via du jscript ou autre?

D'avance merci pour toutes vos réponses...
Et désolé de vous poser des trucs capilotractés Smiley cligne
Modifié par psykoko (20 Sep 2006 - 22:49)
Bonjour psykoko Smiley smile

A la question "qu'en faire ?" J'aurais tendance à répondre : ben ! l'afficher sur le Web Smiley lol Smiley lol

Plus sérieusement, pourquoi vouloir sauvegarder l'image ? Je suppose que tu as les morceaux sur ton ordinateur. J'irais même jusqu'à croire que l'image était entière à la base et que tu l'as découpé pour tes besoins d'affichage sur le Web...

Smiley eek heuuuuuuuuuu ! là, je ne comprend pas du tout l'intérêt de la manoeuvre...
Lol...
ok...
en fait je veux que chaqu'un puisse créer une image à son gout, ensuite l'enregistrer et pouvoir s'en reservir !
#1 {...}
#2 {...}

Il me semble que les identifiants ne peuvent pas commencer par un chiffre. C'est en tout cas au moins le cas des classes. Hum... Smiley confus
Bon, afin de clarifier mon projet :
voici la page en question :
La page en question

J'aimerais créer à partir de ça une autre image !
Peut être avec la fonction imagecopymerge de la librairie GD de php??
Salut. J'ai au une demi solution ; garder la génération de l'image tel quel pour l'affichage, et générer l'image entière coté serveur en php, mais comment, je ne sais te répondre. Hésite pas à donner des retours, ça m'a l'air plutot fun ton truc.

A+
en fait la solution la plus simple, serait d'enregistrer la dernière mise en forme dans une base, et la ressortir à chaque fois...
mais cela ne le suffit pas...
J'ai besoin de pouvoir l'enregistrer, pour la réduire et faire coller ce personnage à un joueur, comme son avatar réduit...

Bref...
Est-ce que quelqu'un a déjà utilisé la fonction imagecopymerge dans ce cas là?
En même temps, imagecopymerge est du PHP, donc forcément coté serveur. Je comprends pas bien ta logique. Mon idée

1 -> Le visiteur trifouille jusqu'a créer son avatar
2 -> Il soumet le formulaire
3 -> Tu crée ton image, tu la réduit (ou plus logique et moins gourmand, tu as déja les miniatures sur serveur, et tu ne réalise que ton collage) et l'insére dans la DB
4 -> VICTOIRE!
Administrateur
Yop, le serveur doit être au courant des coordonnées des images rassemblées (et quelles images ont été sélectionnées pour commencer).
Ensuite recréer une image à partir des infos obtenues (et la sauvegarder pour des questions de performance).

Si ne pas recréer la même image avec 2 noms différents est important, il y a moyen d'inclure les infos de création dans le nom de l'image.
Exemple: image 10 pour le menton (A en hexadécimal) et 5 pour la tête, coordonnées 2,3 et 5,12 (16 positions possibles chaque fois) donnera avatar_A2355C.png par exemple.


Je déplace dans le Salon 'Langage Serveur' parce que la partie CSSn'est pas la plus importante et est déjà mmaitrisée semble-t-il.
Felipe a écrit :

Si ne pas recréer la même image avec 2 noms différents est important, il y a moyen d'inclure les infos de création dans le nom de l'image.

J'ajouterai à ça qu'en plus, tu peux avec la boucle en php qui va bien, générer toutes les combinaisons possibles de PNG à l'avance, et juste donner l'ID de l'image à chaque inscrit dans ta base. Ca t'évite ainsi de refaire tous les calculs sur le serveur.

Autre petite suggestion, si tu passe par un formulaire, n'hésite pas à regrouper les différentes parties du visage dans un sélect...
Merci de vos réponses à tous.

Concernant le fait de tout "pré-enregistrer" en base... pour le moment il n'y a pas beaucoup de partie... mais dans quelques jours, il y aura beaucoup plus d'accessoire, un corps, etc. Donc la solution ne me parait pas très intéressante.

Concernant les select, comme vous l'avez vu, c'est une page de test... (je sais même pas s'il y a une balise html Smiley smile lol)

Concernant le nom de l'image, aucun soucis, il est enregistré en base avec un nom généré dans une jointure.

Et ce que je veux faire, effectivement c'est créer une image .png ou .jpg, l'enregistré sur mon serveur et la réduire en mini_xxx.jpg par exemple.

Mais je ne maîtrise pas du tout la fonction imagecopymerge... et donc je ne sais pas comment me débrouiller pour fusionner toutes ces images...
Administrateur
Tu as regardé les exemples d'utilisateurs dans la doc de PHP imagecopymerge? Ca m'a l'air assez complet.
Si c'est pour le placement x,y d'une image dans l'image en construction, c'est pas bien complexe mais il n'y a pas 36 manières de faire (décaler de la moitié de (taille_grand - taille_petit) pour centrer par exemple, etc)
<?php
/*
make random image number check
20050524 by ascent WebAQ.com
*/

$rands = rand(1000,9999);

session_start();
$_SESSION['random_image_number_check'] = $rands;

$bg = './random_image_bg.jpg';
$numimgp = './random_image_number_%d.gif';

$numimg1 = sprintf($numimgp,substr($rands,0,1));
$numimg2 = sprintf($numimgp,substr($rands,1,1));
$numimg3 = sprintf($numimgp,substr($rands,2,1));
$numimg4 = sprintf($numimgp,substr($rands,3,1));
$ys1 = rand(-4,4);
$ys2 = rand(-4,4);
$ys3 = rand(-4,4);
$ys4 = rand(-4,4);

$bgImg = imageCreateFromJPEG($bg);
$nmImg1 = imageCreateFromGIF($numimg1);
$nmImg2 = imageCreateFromGIF($numimg2);
$nmImg3 = imageCreateFromGIF($numimg3);
$nmImg4 = imageCreateFromGIF($numimg4);
imageCopyMerge($bgImg, $nmImg1, 10, $ys1, 0, 0, 20, 30, 50);
imageCopyMerge($bgImg, $nmImg2, 30, $ys2, 0, 0, 20, 30, 50);
imageCopyMerge($bgImg, $nmImg3, 50, $ys3, 0, 0, 20, 30, 50);
imageCopyMerge($bgImg, $nmImg4, 70, $ys4, 0, 0, 20, 30, 50);
header("Content-type: image/jpg");
ImageJPEG($bgImg,"",100);
imagedestroy($bgImg);
imagedestroy($nmImg1);
imagedestroy($nmImg2);
imagedestroy($nmImg3);
imagedestroy($nmImg4);
?>


Ah effectivement, ça ça serait la bonne solutin !
Je vais tester ça ce soir et ça sera réglé !
Merci !
psykoko a écrit :
<?php
/*
make random image number check
20050524 by ascent WebAQ.com
*/

$rands = rand(1000,9999);

session_start();
$_SESSION['random_image_number_check'] = $rands;

$bg = './random_image_bg.jpg';
$numimgp = './random_image_number_%d.gif';

$numimg1 = sprintf($numimgp,substr($rands,0,1));
$numimg2 = sprintf($numimgp,substr($rands,1,1));
$numimg3 = sprintf($numimgp,substr($rands,2,1));
$numimg4 = sprintf($numimgp,substr($rands,3,1));
$ys1 = rand(-4,4);
$ys2 = rand(-4,4);
$ys3 = rand(-4,4);
$ys4 = rand(-4,4);

$bgImg = imageCreateFromJPEG($bg);
$nmImg1 = imageCreateFromGIF($numimg1);
$nmImg2 = imageCreateFromGIF($numimg2);
$nmImg3 = imageCreateFromGIF($numimg3);
$nmImg4 = imageCreateFromGIF($numimg4);
imageCopyMerge($bgImg, $nmImg1, 10, $ys1, 0, 0, 20, 30, 50);
imageCopyMerge($bgImg, $nmImg2, 30, $ys2, 0, 0, 20, 30, 50);
imageCopyMerge($bgImg, $nmImg3, 50, $ys3, 0, 0, 20, 30, 50);
imageCopyMerge($bgImg, $nmImg4, 70, $ys4, 0, 0, 20, 30, 50);
header("Content-type: image/jpg");
ImageJPEG($bgImg,"",100);
imagedestroy($bgImg);
imagedestroy($nmImg1);
imagedestroy($nmImg2);
imagedestroy($nmImg3);
imagedestroy($nmImg4);
?>


Ah effectivement, ça ça serait la bonne solutin !
Je vais tester ça ce soir et ça sera réglé !
Merci !
Sujet clos
Aller à