[AJAX] Image binaire et AJAX

Version imprimable

Bonjour ,
Je stock en BDD des images ( je sais que c'est un peu stupide je sais ^^ )
donc j'arrive bien a l'afficher en faisant ceci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
//connexion à la base de données
			$connexion = mysql_connect("localhost", "root", "") or exit (mysql_error());
			$database = mysql_select_db("test")or exit (mysql_error());
			$idImg = "1";
			//la requète qui récupère l'image à partir de l'identifiant
				$apercu = mysql_query("SELECT extension, img FROM images WHERE id_img = ".$idImg) or exit (mysql_error());
 
			//si le résultat est différent de 1
				if(mysql_num_rows($apercu) != 1)
				echo 'L image n existe pas !';
			else 
			{
				$reponse = mysql_fetch_assoc($apercu);
 
				//on indique qu'on affiche une image
						header ("Content-type: ".$reponse['extension']);
						//on affiche l'image en elle même
						echo $reponse['img'];

parcontre je n'arrive pas a l'afficher quand j'utilise de l'AJAX j'aimerai l'affiché dans ma div de ma page principale
Je crois que je suis obliger d'utiliser une Iframe pour l'afficher mais j'aimerai eviter

Merci

26/08/2010, 17h00
thelvin

Fais de l'AJAX qui insère l'image à l'aide d'une URL vers cette image. L'URL en question menant vers le code que tu nous a montré plus haut.
26/08/2010, 18h01
llaffont

Ce que veut dire thelvin c'est qu'il est impossible de produire une image BLOB en AJAX.

Pour détailler : En PHP quand tu récupères ton image depuis ta BDD, l'image à une tête de chaine de caractère, qui ensuite traduit par le moteur PHP.

Si tu fais la même opération en AJAX ta chaine de caractère restera un chaine de caractère et posera certainement des problèmes en raison de caractère interdit...

En espérant t'avoir éclairé

++
26/08/2010, 23h11
misakilou

aucun moyen de récupérer l'image ?? dans ma page courante ? j'ai petit formulaire ou la personne peux uploader sa photo ( qui sera enregistrer dans la base ) et je souhaiterai l'afficher directement ( donc en Ajax )
27/08/2010, 08h00
Bovino

Ben, tu réponds toi-même à la question...

Citation:

Envoyé par misakilou

Je stock en BDD des images ( je sais que c'est un peu stupide je sais ^^ )

:mrgreen:

Pourquoi ne pas stocker l'image dans un répertoire et son path dans la BDD, ensuite, tu n'as qu'à récupérer le path et modifier l'attribut src de l'image.
27/08/2010, 08h01
llaffont

Il te suffit pour ça de créer un ou deux scripts
Qui dans un premier temps génèrera l'image dans un répertoire temporaire puis retournera une url et dans un second temps qui génèrera ton aspect ajax avec l'url préalablement généré.

Lorsque l'utilisateur se déco ou lorsque sa session expire tu supprimes son image.
27/08/2010, 10h25
misakilou

c'est une image de profil ( comme facebook ) je peux pas la supprimer a sa deconnexion je suis obliger de la stocker en base ( a la demande de mon responsable :( )
27/08/2010, 11h08
llaffont

Tu n'as pas bien lu ou compris ce que je t'ai indiqué.

Tu continues à stocker ton image en base. Seulement lorsque l'utilisateur s'authentifie tu génères l'image dans un répertoire temporaire afin d'obtenir un point source pour l'URL.

Il y-a 2-3 semaines une personnes avait le même problème que toi.

La solution qu'il à adopté fut celle-ci :

_ Générer l'image depuis la base à l'ouverture de session.
_ Obtenir une URL suite à cette génération enregistrer l'information en base avec un timestamp.
_Générer son aspect de profil avec l'image lier par URL.

Chaque fois que la personne revenait sur le site dans un laps de temps définie l'information de Timestamp contenue en base était mis à jour.
Ce qui fait que ton image n'est pas tout le temps détruite lors des déco ou fin de session.

Par contre toutes les images qui dépassaient le laps de temps définie étaient elles supprimés par un Script automatique.

Cette solution me semble le mieux adapté à ton cas. Mais il faut également penser à ce que peux faire l'utilisateur de son image comme la changer ou la supprimer ce qui fait que tes infos en bases doivent être détruite.
27/08/2010, 14h13
JulienC
Salut,

Pourquoi s'embêter à passer par un fichier image créé de façon temporaire ?

misakilou, tu as tout ce qu'il faut pour afficher l'image (à quelques détails près) :
Je vais appeler ton script php, que tu nous as donné dans ton premier message, "mon_script.php".

En javascript, tu n'as plus qu'à créer dynamiquement ta balise image, du style :
Code:

1 2 3 var img = document.createElement('img'); img.src = 'mon_script.php?idImg=1234'; mon_div_de_la_page_principale.appendChild(img);
Une balise <img /> peut très bien prendre comme source une page php (qui elle renvoie une image binaire).

Attention : les headers définis dans ta page principale ne me paraissent pas suffisant : il faut utiliser des mime-types (et là, je n'en vois pas...).
27/08/2010, 14h29
llaffont

:oops: en effet :whistle2::dehors:

merci sa a l'air de marcher , enfaite je travail en POST ( l'exemple que j'ai posté était juste pour faire quelques tests ) quand je met en dur l'idImg dans mon fichier PHP cela marche bien par contre si je passe la valeur de mon POST en javascript ben plus rien :(

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
	  	   	<script type='text/javascript'>
			function getXhr(){
                var xhr = null; 
 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                return xhr;
			}
			function go()
			{
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function()
				{
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200)
					{
 
						var j = document.getElementById('imageaa'); 
						var img = document.createElement('img');
						img.src = 'galerie.php';
						//img.scr = xhr.responseText;
						j.appendChild(img); //noeud enfant
 
 
					}
				}											
				xhr.open("POST","galerie.php",true);
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				//xhr.send(null);
				var idimg = '1'; //Id de mon image
				xhr.send("idImg="+idimg);
			}
		</script>

30/08/2010, 12h30
Bovino

Tu as bien modifié la récupération du paramètre ?

Code:

$_POST['idImg'];

oui oui j'arrive pas comprendre ou est le problème :s

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<?php
	//galerie.php
    //si nous avons une image
		if(!empty($_POST['idImg']))
		{
			//connexion à la base de données
			$connexion = mysql_connect("localhost", "root", "") or exit (mysql_error());
			$database = mysql_select_db("test")or exit (mysql_error());
			$idImg = $_POST['idImg'];
			//$idImg = 1 ;
			//la requète qui récupère l'image à partir de l'identifiant
				$apercu = mysql_query("SELECT extension, img FROM images WHERE id_img = ".$idImg) or exit (mysql_error());
 
			//si le résultat est différent de 1
				if(mysql_num_rows($apercu) != 1)
				echo 'L image n existe pas !';
			else 
			{
				//on stocke les données dans un tableau
						$reponse = mysql_fetch_assoc($apercu);
 
				//on indique qu'on affiche une image
						header ("Content-type: ".$reponse['extension']);
						//header('Content-Transfer-Encoding: binary');
						//on affiche l'image en elle même
						echo $reponse['img'];	
			}
		}
		else
       echo 'Vous n avez pas sélectionné d image !';
	?>

dans firebug je vois bien mon image au format binaire , mais elle veux pas s'afficher

30/08/2010, 15h00
Bovino
Mais non, ce n'est pas possible !!!
Tu ne peux pas récupérer avec AJAX de données binaires !
Il faut passer par le src de l'image, donc pas de post possible :
Code:

1 2 3 var img = document.createElement('img'); img.src = 'mon_script.php?idImg=1234'; mon_div_de_la_page_principale.appendChild(img);
30/08/2010, 19h15
misakilou

oui je viens de voir que c'etait pas trop possible en POST donc en GET sa passe bien
en tous cas merci a vous tous :) c'est super gentil !!

J'ai juste une dernière question je voudrai enfaite que lorsqu' il double clic sur la photo voulu ( dans le fenêtre parcourir ) cela upload et l'affiche directement j'arrive pas trouver comment faire cela :(

Merci

en fait je crois qu'il est possible d'afficher des images encodée en base64 en html ou en CSS. Les images encodées en base64 doivent passer au travers de l'ajax :mrgreen:

une recherche sur google me donne ça:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 <img src="data:image/gif;base64, R0lGODlhmwDFAPcAAAAAAAEBAQICAgMDAwQEBAUFBQYGBgcHBwgICAkJCQoKCgsLCwwMDA0N DQ4ODg8PDxAQEBERERISEhMTExQUFBUVFRYWFhcXFxgYGBkZGRoaGhsbGxwcHB0dHR4eHh8f HyAgICEhISIiIiMjIyQkJCUlJSYmJicnJygoKCkpKSoqKisrKywsLC0tLS4uLi8vLzAwMDEx MTIyMjMzMzQ0NDU1NTY2Njc3Nzg4ODk5OTo6Ojs7Ozw8PD09PT4+Pj8/P0BAQEFBQUJCQkND ... et ainsi de suite ... beaucoup de lignes avec des caractères ASCII incompréhensibles suivent encore ... gww18FBEikHcgNkMRW5lmkJI/teaa0wNiOhshFFuiRSVpL34nqQRphZmcV5miORZQwnRpndI nUmiiTStuaKbLl4Z45wuuADDDDfsgNKeMmy160w1hdaVSZfupyiXSgLoWpOQFjgpWUsKCGem CEXFlIRlBefllxqKKlyblb45olWqosgmi29iGiudM+6Knp5F6LhrDYYCccQRQuzQp1cBAQA7">
Cependant l'idée de faire un script qui produit du png par exemple au lieu de html est meilleure, en plus tu peux gérer un cache (à la main, la plaie) ou copier l'image temporairement sur ton système de fichier. Comme c'est une image, c'est apache qui controle le cache (du navigateur) et merveille ton php qui produit l'image il écrit l'image dans le répertoire temporaire puis il fait une redirection.

Ton client demande image.php une fois, il se prend un code 302 aller à /tmp/image_temporaire_avec_nom_aleatoire.png et là c'est le miracle puisque là ton navigateur va gérer le cache sur cette image. facile !!!

Bon si tu as un impératif fort de sécurité, vaux mieux sacrifier le cache.

13/10/2010, 08h15
Bovino

Passer par data: dans le src de l'image peut effectivement sembler "amusant", mais pour tout dire, j'en vois mal l'intérêt : d'une part, ce n'est pas totalement cross-browser et surtout, pourquoi passer par cette méthode plutôt que de créer directement une image temporaire sur le serveur...