Zoom d'image à l'aide de javascript?

Quelqu'un at-il un bon code pour agrandir une image en utilisant javascript?

Je sais que je pourrais simplement le redimensionner, etc. mais était paresseux et je cherchais quelque chose de intelligent pour zoomer à différents niveaux, bouge quand zoom, etc.

Cela dépend vraiment de la qualité que vous recherchez. Si vous avez besoin d'une image HQIAL de recrutement avec des niveaux de zoom détaillés et une interpolation appropriée, vous devrez écrire un service de backend pour diffuser des parties agrandies de vos images. Si vous ne vous souciez pas de la qualité ou de la vitesse, vous pouvez télécharger l'image entière et l'ajuster pour afficher à l'intérieur d'un div absolument positionné, décalé pour la zone que vous souhaitez visualiser et mesurer selon votre niveau de zoom.

Je dirais que vous êtes probablement après la première option. Certains outils ont déjà été faits pour cela , j'ai toujours utilisé aucun des outils; Je suis sûr que vous publierez des liens vers d'autres personnes que vous pouvez essayer; J'ai écrit mon propre service et client. Je ne peux pas entrer dans les détails exacts comme propriétaires, 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 d'image cible. J'ai le service de charger l'image et la recadrer et le redimensionner (c'est plus compliqué que cela, car j'ai beaucoup d'optimisations et de préparation lorsque le fichier est importé à l'origine, comme plusieurs sections transversales du fichier pour une utilisation plus rapide lors du zoom, mais ce que je décris Voici les bases).

Ce service renvoie simplement l'image / jpeg de type et envoie l'image.

Sur le côté client, j'ai écrit un contrôle de la case à cocher qui permet à l'utilisateur de marquer une zone sur l'image sur laquelle il souhaite zoomer. Ils marquent la zone et cliquez sur zoom. Ceci calcule ensuite les décalages dans l'image des coordonnées sélectionnées en fonction de la taille d'image originale et de la taille d'image visible. J'envoie ces coordonnées au gestionnaire mentionné précédemment. Je charge l'URL avec la chaîne de requête du srvice dans un objet Image et je m'occupe de la surcharge. Si tout s'est bien passé, je l'échangé à l'image affichée et met à jour toutes mes variables côté client pour déterminer où sur l'image je suis agrandie, puis peut être agrandi ou zoomé ou panoramique plus loin.

Maintenant, je comprends votre exigence paresseuse, mais je dois dire que l'écriture est en fait assez facile à faire pour que les bases soient en cours. La partie la plus difficile que vous trouverez est de faire une boîte de sélection. Mais alors 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 pas avoir une boîte de sélection et avoir un zoom avant et arrière uniquement à des intervalles prédéterminés. Dans mes projets, j'ai besoin d'une boîte de zoom car c'est une solution d'analyse d'image assez complexe.

J'espère que cela est au moins utile et vous amène à quelque chose d'utile.

Vérifie ça:

  • JQZoom
  • Zoomimage – jQuery plugin
  • JQuery ImgZoom
  • Boite fantaisie

Quelles sont les images? S'ils sont d'énormes images, vous les faites comme google map style en utilisant ce http://www.casa.ucl.ac.uk/software/googlemapimagecutter.asp