Image Zoom en utilisant javascript?

Question

Quelqu'un a-t-il un bon code pour zoomer sur une image à l'aide de javascript?

Je sais que je pouvais simplement le redimensionner, etc., mais j'étais paresseux et cherchais quelque chose d'intelligent pour zoomer à différents niveaux, vous déplacer lorsque zoomé, etc.

Answer 1

Cela dépend vraiment de la qualité que vous recherchez. Si vous avez besoin d’une image d’embauche avec des niveaux de zoom détaillés et une interpolation appropriée, vous devrez écrire un service d’arrière-plan pour diffuser des parties agrandies de vos images. Si vous n’êtes pas attentif à la qualité ni à la rapidité, vous pouvez télécharger l’ensemble de l’image et l’ajuster de manière à l’afficher à l’intérieur d’un div parfaitement positionné, décalé de la zone à afficher et redimensionné en fonction de votre niveau de zoom.

Je dirais que vous êtes probablement après la première option. Il existe déjà certains outils pour cela , je n'ai jamais utilisé aucun des outils ; Je suis sûr que d’autres publieront des liens vers d’autres que vous pourrez essayer; J'ai écrit mon propre service et client. Je ne peux pas entrer dans les détails exacts de sa propriété, 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 (identifiant), les coordonnées sur lesquelles effectuer un zoom et la taille de l'image cible. Je demande au service de charger l’image, de le rogner et de le redimensionner (ce qui est plus compliqué, car j’ai beaucoup d’optimisations et de préparations lors du téléchargement initial du fichier, telles que plusieurs sections transversales du fichier pour une diffusion plus rapide lors du zoom, mais ce que je décris voici les bases).

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

Du côté client, j'ai écrit un champ de sélection qui permet à l'utilisateur de sélectionner une zone de l'image sur laquelle il souhaite effectuer un zoom. ils marquent la zone et cliquez sur le zoom. Ceci calcule ensuite les décalages dans l'image des coordonnées sélectionnées en fonction de la taille de l'image d'origine et de la taille de l'image visible. J'envoie ces coords au gestionnaire mentionné précédemment.Je charge l'URL avec la chaîne de requête de srvice dans un objet Image et gère la charge. Si tout se passe bien, j'échange cela avec l'image visualisée et met à jour toutes les variables de mon côté client afin de déterminer où je fais un zoom avant, puis il est possible de zoomer à nouveau ou de faire un zoom arrière ou un panoramique plus loin.

Maintenant, je comprends votre besoin de paresseux, mais je dois dire qu’écrire ceci est en fait assez facile à faire pour obtenir les bases. la partie la plus difficile à trouver est de sélectionner une boîte. Mais même cela peut être aussi simple que de suivre deux clics. En haut à gauche du zoom, sélectionnez la marque et en bas à droite. Ou ne pas avoir de case de sélection et avoir un zoom avant et arrière uniquement à des intervalles prédéterminés. Dans mes projets, j’avais besoin d’une boîte de zoom car c’était une solution d’analyse d’images assez complexe.

J'espère que cela vous aidera au moins et vous mènera à quelque chose d'utile.

Answer 2

Cochez cette case:

• jQZoom
• Zoomimage - plug-in jQuery
• jQuery ImgZoom
• FancyBox

Answer 3

Quelle est la taille des images? Si ce sont des images énormes, faites-les comme Google Map style avec cette http: // www.casa.ucl.ac.uk/software/googlemapimagecutter.asp