Diaporama d'images en ligne avec PHP, GD, XML et Javascript

Question

J'ai écrit du code pour suivre automatiquement de nombreux objets à travers une séquence d'images de plus de 1000 images. Les limites et les centres d'objets sont générés en XML par mon algorithme. Je fais un site Web pour montrer mes résultats et je voudrais avoir un diaporama navigable avec les fonctions normales de lecture, de pause, d'avance, de rembobinage. J'ai actuellement une configuration de file d'attente de cadre circulaire php-javascript. Cela fonctionne en ayant 10 images contiennent des images 1-10, puis lorsque l'utilisateur veut voir les images 2, changer la vue et charger l'image 11 dans l'image 1 et ainsi de suite. Ce style de file d'attente circulaire fonctionne bien pour le défilement normal, mais je voudrais changer l'image toutes les 100 ms et cela ralentit. Y a-t-il une meilleure façon de faire cela de ce côté?

Ma principale source de ralentissement est que mes images sont tracées dynamiquement dans GD à partir d'un fichier xml contenant un grand nombre de points de données. J'utilise file_get_contents et les fonctions simplesXMLELement pour obtenir les données dans des tableaux, puis les tracer sur une image en utilisant imagepolygon. Existe-t-il une meilleure façon de le faire? Chaque image est d'environ 1400 par 900 et contient entre 30 et 500 objets selon la distance dans laquelle elle se trouve. J'ai essayé de stocker des images physiquement tracées, mais puisque les utilisateurs doivent être capables d'isoler les objets 1-10 ou 3,7,8-11 cela n'est pas possible en raison du nombre de permutations.

Answer 1

Je vais jeter quelques idées de type brainstorming:

1. Dessiner les contours des objets comme divs relativement positionnés avec la hauteur et la largeur ensemble. De cette façon, vous n'avez pas besoin de générer des images pour chaque combinaison possible. Le suivi d'objet peut être activé pour tout objet donné à la volée sur la page. L'inconvénient est que les clients plus lents pourraient rendre 500 div lentement.

2. Une autre façon de réduire le besoin de rendre à la volée: affichez (une fois) toutes les trames de suivi pour chaque objet en tant que polygone sur un arrière-plan transparent (PNG ou GIF). Lorsque le cadre est affiché, superposez tous les cadres de suivi d'objets appropriés sur le calque d'arrière-plan. Aucun problème de rendu, juste un délai de chargement pendant que le client charge 500 images. Au lieu d'analyser le fichier XML à chaque fois, créez un tableau PHP avec tous les points de données dans un fichier d'inclusion. Obtenez un processeur plus rapide et beaucoup de RAM pour votre serveur.

Comme je l'ai dit - des idées aléatoires. Peut-être qu'ils vous font penser, peut-être qu'ils étaient juste amusants pour moi de réfléchir. Bonne chance.