Discussion :

[dré kam]

Bonjour,

Je suis en train de faire un éditeur d'image en ligne. Les images sont traitées côté serveur, mais l'interface est en JavaScript. Alors quand l'utilisateur clique sur un effet, j'envoie un requête HTTP vers le serveur (en AJAX), qui modifie l'image.

Mon problème est que le traitement de l'image prend un peu de temps (selon la taille). Alors est-ce qu'il y a un moyen de faire communiquer le PHP et le javascript, pour que l'image soit actualisée sur la page dés qu'elle est prète?

Merci d'avance pour vos réponses.

[Bovino]

A moins de disposer d'un serveur permettant le push, non, ce n'est pas possible.

[p3ga5e]

Pour les images le plus simple est d’utiliser l’évènement onload de l’objet HTMLImageElement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var img = new Image();
img.onload = function ()
{	// L'image est prete
	document.getElementById('image').appendChild(this);
}
img.src = "/ProcessImage.php";

J’utilise ceci avec des traitements pouvant dépasser les 20 minutes, l’evenemt onload c’est toujours déclencher

Si tu persiste à vouloir utiliser l’objet XMLHttpRequest, sache qu’il est possible de requêter, de manière asynchrone, un fichier binaire sous la forme d’un ArrayBuffer, grâce au nouvelle specifs de XMLHttpRequest Level 2

Si de manière plus général tu cherche une techno permettant au serveur de notifier les clients, je te conseil les Server-Sent Events, c’est très simple à mettre en place et ça utilise comme protocole un simple HTTP GET

[dré kam]

Si tu persiste à vouloir utiliser l’objet XMLHttpRequest, sache qu’il est possible de requêter, de manière asynchrone, un fichier binaire sous la forme d’un ArrayBuffer, grâce au nouvelle specifs de XMLHttpRequest Level 2

Si de manière plus général tu cherche une techno permettant au serveur de notifier les clients, je te conseil les Server-Sent Events, c’est très simple à mettre en place et ça utilise comme protocole un simple HTTP GET

J'ai trouvé quelque chose d'un peu plus simple en JQuery!

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
$('img').attr('src', 'my-image-handler.php');

Dans ce cas, je dois juste appeler mon script PHP qui retournera une image, et je n'ai même plus besoin d'AJAX. J'espère que ça marchera

[headmax]

Je sais pas trop comment va réagir certain navigateur avec ce type de solution à la limite du XSS, si dans ta page PHP tu as le bon header, je pense que ça passera, de plus faudrait mettre en cache tes images pour lors d'un reload du il reste en cache.

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<?php
    // Test image.
    $fn = '/test/ton_image.png';
    // recupération des headers envoyé par le client.
        header('Content-Length: '.filesize($fn));
        header('Content-Type: image/png');
        file_get_contents($fn);
    }
?>