Bild vergrößern mit Javascript?

Question

Hat jemand zu einigen guten Code bekam in ein Bild um es zu vergrößern mit Hilfe von Javascript?

Ich weiß, ich konnte es einfach etc Größe ändern, wurde aber faul und suchte nach etwas Gescheites zu verschiedenen Ebenen zu vergrößern, um bewegen, wenn etc gezoomt

Answer 1

Das hängt davon ab, was Qualität, die Sie nach sind. Wenn Sie einen Mitarbeiter HIquality Bild mit detaillierten Zoomstufen und richtige Interpolation benötigen benötigen Sie einen Back-End-Dienst schreiben aufzutischen gezoomt Teile Ihrer Bilder. Wenn Sie keine Sorge für die Qualität oder Geschwindigkeit haben, können Sie das gesamte Bild herunterladen und passen es in einem div absolut positioniert, um anzuzeigen, Offset für den Bereich, den Sie anzeigen möchten, und so bemessen, indem Sie Ihre Zoomstufe bestimmt.

Ich würde sagen, Sie wahrscheinlich nach der ersten Option sind. Es gibt einige Tools bereits für diese , ich persoanlly Havnt eines der Werkzeuge verwendet ; Ich bin sicher, othes Links zu anderen Posten werden Sie versuchen können; Ich habe meine eigenen Service und Client geschrieben. Ich kann nicht die genauen Einzelheiten, wie seine proprietäre gehen, aber ich kann Ihnen einen Überblick darüber, was ich tue.

Ich habe ein asp.net generischen Handler, der eine Abfragezeichenfolge Bezeichnen, welches Bild (von einem id) und die Koordinaten vergrößern auf und die Zielbildgröße nimmt. Ich habe den Service Laden Sie das Bild und Ernte und Größe verändern (seine komplizierter als das, wie ich viele Optimierungen und preparsing haben, wenn die Datei ursprünglich hochgeladen, wie mehrere Querschnitte der Datei für eine schnellere dient, wenn das Zoomen, aber was ich beschreiben, hier sind die Grundlagen).

Dieser Dienst gibt einfach Typ image / jpeg und sendet das Bild.

Auf der Client-Seite Ich habe ein Marquee Feld-Steuerelement geschrieben, dass der Benutzer einen Bereich wollen sie auf das Bild, um Marquee kann in auf zoomen. sie Festzelt den Bereich und Zoom klicken. Dieser berechnet dann die Versätze in dem Bild der ausgewählten Koordinaten auf der Grundlage des Originalbildgröße und der sichtbaren Bildgröße. Ich schicke iese coords an den Handler zuvor mentioned.I mit Query-String des srvice in ein Bildobjekt der URL laden und verarbeiten onload. Wenn alles gut gegangen tauschen i dann, dass auf dem betrachteten Bild und aktualisiert alle meine Client-Seite Variablen zur Bestimmung, wo auf dem Bild, das ich gezoomt bin in und dann kann es wieder vergrößert werden oder gezoomt oder verrissen weiter von dort aus.

Jetzt verstehe ich Ihre faul Voraussetzung, aber ich muß sagen, dass dieses Schreiben eigentlich ganz einfach zu tun bekommen würden die Grundlagen. der schwierigste Teil einer Auswahlbox macht Sie finden. Aber dann sein, dass sogar so einfach, wie Tracking zwei Klick. Oben links von dem Zoom wählt marque und unten rechts. Oder auch nicht eine Auswahlbox auf alle mit und hat eine Ein- und Auszoomen nur in vorbestimmten Intervallen. Ich meine Projekte benötigt eine Zoom-Box als eine ziemlich komplexe Bildanalyse-Lösung.

Ich hoffe, dass dies zumindest hilfreich und führt zu etwas nützlich.

Answer 2

Überprüfen Sie dies:

• jQZoom
• Zoomimage - jQuery-Plugin
• jQuery ImgZoom
• FancyBox

Answer 3

Wie groß sind die Bilder? Wenn sie große Bilder, die Sie tun sie wie Google Map-Stil mit dieser http: // www.casa.ucl.ac.uk/software/googlemapimagecutter.asp