Zoom immagine usando JavaScript?

Question

Qualcuno ha ottenuto un buon codice per ingrandire un'immagine usando JavaScript?

So che potevo semplicemente ridimensionarlo, ecc., ma ero pigro e cercavo qualcosa di intelligente per zoomare su livelli diversi, spostarsi quando si ingrandiva ecc.

Answer 1

Dipende molto dalla qualità che stai cercando. Se hai bisogno di un'immagine di qualità dei noleggi con livelli di zoom dettagliati e una corretta interpolazione, dovrai scrivere un servizio di backend per servire porzioni ingrandite delle tue immagini. Se non ti interessa la qualità o la velocità, puoi scaricare l'intera immagine e adattarla per visualizzarla all'interno di un div assolutamente posizionato, sfalsare per l'area che desideri visualizzare e dimensionare come determinato dal tuo livello di zoom.

Direi che probabilmente stai cercando la prima opzione. Esistono già alcuni strumenti per questo , ho persoanlly non ho usato nessuno degli strumenti ; Sono sicuro che altri pubblicheranno link ad altri che puoi provare; Ho scritto il mio servizio e il mio cliente. Non posso entrare nei dettagli esatti come proprietario, ma posso darti una panoramica di ciò che faccio.

Ho un gestore generico asp.net che accetta una stringa di query che indica quale immagine (da un id) e le coordinate per ingrandire e la dimensione dell'immagine di destinazione. Ho il servizio di caricare l'immagine e ritagliarla e ridimensionarla (è più complicato di quello in quanto ho molte ottimizzazioni e preparsing quando il file viene caricato originariamente, come più sezioni trasversali del file per una pubblicazione più veloce durante lo zoom, ma quello che sto descrivendo ecco le basi).

Quel servizio restituisce semplicemente il tipo image / jpeg e invia l'immagine.

Sul lato client ho scritto un controllo riquadro di selezione che consente all'utente di selezionare un'area sull'immagine che desidera ingrandire. selezionano l'area e fanno clic sullo zoom. Questo quindi calcola gli offset nell'immagine delle coordinate selezionate in base alla dimensione dell'immagine originale e alla dimensione dell'immagine visualizzabile. Mando questi hords al gestore precedentemente citato. Carico l'URL con la stringa di query dello srvice in un oggetto Image e gestisco onload. Se tutto è andato bene, lo scambio con l'immagine visualizzata e aggiorno tutte le variabili del mio lato client per determinare dove sull'immagine sono ingrandito e quindi può essere ingrandito di nuovo o ingrandito o spostato ulteriormente da lì.

Ora capisco il tuo requisito pigro, ma devo dire che scrivere questo è in realtà abbastanza facile da fare per far partire le basi. la parte più difficile che troverai è fare una casella di selezione. Ma anche quello può essere semplice come tracciare due clic. In alto a sinistra dello zoom selezionare il marchio e in basso a destra. O non avere affatto una casella di selezione e avere uno zoom avanti e indietro solo a intervalli prestabiliti. Nei miei progetti ho richiesto una casella di zoom in quanto è una soluzione di analisi delle immagini abbastanza complessa.

Spero che questo sia utile e ti porti a qualcosa di utile.

Answer 2

Controlla questo:

• jQZoom
• Zoomimage - plugin jQuery
• jQuery ImgZoom
• FancyBox

Answer 3

Quanto sono grandi le immagini? Se sono immagini enormi, le fai come lo stile di una mappa di Google usando questo http: // www.casa.ucl.ac.uk/software/googlemapimagecutter.asp