2008-10-11 14 views
2

Quelqu'un at-il obtenu un bon code pour zoomer sur une image en utilisant javascript?Image Agrandir en utilisant javascript?

Je sais que je pouvais le redimensionner, etc, mais était paresseux et chercher quelque chose d'intelligent pour zoomer à différents niveaux, se déplacer en zoomant etc

Répondre

2

Cela dépend vraiment de ce que la qualité que vous recherchez. Si vous avez besoin d'une image de hiqualité avec des niveaux de zoom détaillés et une interpolation correcte, vous devrez écrire un service backend pour servir les parties zoomées de vos images. Si vous n'avez aucun souci de qualité ou de vitesse, vous pouvez télécharger l'intégralité de l'image et l'ajuster à l'intérieur d'un div positionné, décalé par rapport à la zone que vous souhaitez voir et dimensionné selon votre niveau de zoom.

Je dirais que vous êtes probablement après la première option. Il y a quelques outils déjà faits for this, j'ai toujours utilisé l'un des outils; Je suis sûr que d'autres publieront des liens vers d'autres que vous pouvez essayer; J'ai écrit mon propre service et client. Je ne peux pas entrer dans les détails exacts comme son propriétaire, mais je peux vous donner un aperçu de ce que je fais.

J'ai un gestionnaire générique asp.net qui prend une chaîne de requête indiquant quelle image (par un identifiant) et les coordonnées à zoomer et la taille de l'image cible. J'ai le service charger l'image et la recadrer et la redimensionner (c'est plus compliqué que cela car j'ai beaucoup d'optimisations et de préparation quand le fichier est téléchargé, comme plusieurs sections du fichier pour une diffusion plus rapide en zoom, mais ce que je décris voici les bases). Ce service renvoie simplement type image/jpeg et envoie l'image.

Du côté client, j'ai écrit un contrôle de zone de sélection qui permet à l'utilisateur de marquer une zone sur l'image sur laquelle il veut zoomer. ils marquent la zone et cliquent sur le zoom. Cela calcule ensuite les décalages dans l'image des coordonnées sélectionnées en fonction de la taille de l'image originale et de la taille de l'image visible. J'envoie ces coords au gestionnaire précédemment mentionné. Je charge l'URL avec la chaîne de requête du srvice dans un objet Image, et manipule onload. Si tout s'est bien passé, je l'échange avec l'image affichée et met à jour toutes mes variables côté client pour déterminer où sur l'image je suis zoomé et puis il peut être zoomé à nouveau ou zoomé ou plus loin à partir de là.

Maintenant, je comprends votre exigence paresseuse, mais je dois dire que l'écriture est en fait assez facile à faire pour obtenir les bases. la partie la plus difficile que vous trouverez est de faire une boîte de sélection. Mais même cela peut être aussi simple que le suivi de deux clics. En haut à gauche du zoom, sélectionnez la marque et en bas à droite. Ou ne pas avoir une boîte de sélection du tout et avoir un zoom avant et arrière seulement à des intervalles prédéterminés. Pour mes projets, j'ai eu besoin d'une zone de zoom car c'est une solution d'analyse d'image assez complexe. J'espère que cela sera utile et vous mènera à quelque chose d'utile.

+0

Merci Mattlant.C'est pour une démo d'essayer de persuader un client d'acheter un système d'où nous ne voulons pas passer beaucoup de temps dessus. J'ai déjà un service qui modifie le RVB et le contraste, donc peut-être ajouter le zoom comme vous le spécifiez – alexmac

Questions connexes