Crop and Resize con asp.net

di SimoneRodriguez il 12 settembre 2007

in Scripts

Ritaglia e ridimesiona

Continua la serie degli scripts della serie “me lo sono fatto per me, ma lo rendo disponibile che magari a qualcuno torna utile”: uno script in ASP.net che oltre a fare il classico ridimesionamento (resize) ritaglia (crop) l’immagine con una forma quadrata.

Sono immerso in un progetto (molto presto vi annuncierò i dettagli) che necessita di anteprime (thumbnails) quadrate di alcune foto. Fino ad ora me la sono sempre sbrigata tramite CSS+Resize(in ASP.net) ma ero curioso di vedere che risultati si potessero ottenere facendo tutto tramite ASP.net.

Cerca, studia, prova, ho realizzato uno script che, passandogli il percorso dell’immagine e larghezza del quadrato necessario, si occupa di ridimesionare e ritagliare l’immagine trasformandola in un quadrato.

Tanto per capirci, ho un’immagine così (la mia Locanda):
RECEPTIO

con questo script diventa così:

I parametri da passargli tramite querystring sono:

  1. img – ovvero il percorso dell’immagine.
  2. opx – ovvero la larghezza risultante dell’immagine

Esempio:

http://www.simonerodriguez.com/square.aspx?img=/images/RECEPTIO_2.jpg&opx=150

Non mi soffermo sui dettagli dello script poiché non è lo scopo di questo articolo, ma se vi state chiedendo perché genera solo “quadrati”, la risposta è che “a me serviva così”! …magari più in là lo renderò anche “rettangolare”.

English version
I developed a script in ASP.net to resize and crop an image in a square shape.
You have only to pass those two parameters through querystring:

  1. img – The image path
  2. opx – The quare width result

Example:

http://www.simonerodriguez.com/square.aspx?img=/images/RECEPTIO_2.jpg&opx=150

http://www.simonerodriguez.com/wp-content/plugins/downloads-manager/img/icons/download.png Download: Crop and Resize (813B)
Data: 12/09/2007
Click: 2227
Descrizione:

Nessun articolo correlato.

{ 41 commenti… leggili aggiungine uno }

1 mago28 13 settembre 2007 alle 08:57

Non potevi unire le forze con Wodka che sta facendo una cosa simile? Magari tiravate fuori uno spettacolo di applicativo : - )
Comunque vada evviva l’open source e la condivisione delle conoscenze eh eh eh
GRANDE

Rispondi

2 SimoneRodriguez 13 settembre 2007 alle 10:46

Non avevo letto il suo post, ma in ogni caso wodka è 100 passi avanti a me su gli spippolamenti del resize e crop, insomma non ha certo bisogno di me!
Questo è solo un script che copre un singola necessità, invece wodka, da quello che ho letto, sta preparando qualcosa di veramente “fico”… anzi non vedo l’ora che si decide a concluderlo : - o

Rispondi

3 CinOp! 17 ottobre 2007 alle 15:12

Non ho ben capito, serve a fare il resize & crop di un file che si trova su un altro server o funziona solo con le img che hai sul tuo sito? o entrambi? è possibile evitare il crop e fargli fare solo il resize?

Rispondi

4 SimoneRodriguez 17 ottobre 2007 alle 15:16

Serve a fare contemporaneamente il crop e resize di immagini, è indifferente che siano sul tuo server o meno.
Per fare solo il resize puoi utilizzare quello che c’è per il dblog (resize.aspx)

Rispondi

5 Alberto 30 novembre 2007 alle 20:32

Grande ed utilissimo. Lo userò nel mio sito!
Grazie anche per averlo condiviso.

Rispondi

6 Alberto 5 dicembre 2007 alle 12:29

Personalmente alla riga 18 ho aggiunto queste tre righe di codice:

if Not System.Io.File.Exists(strFilename) then
strFilename = Server.MapPath(“/images/image-not-available.gif”)
end if

In questo modo se non trova l’immagine non restituisce l’errore ed utilizza una immagine creata ad hoc (grigia con una scritta ND) che rappresenta l’immagine non disponibile.

Rispondi

7 SimoneRodriguez 5 dicembre 2007 alle 12:33

Guarda, ci avevo pensato, ma mi avrebbe costretto a fornire anche un immagine insieme al file. Ho dato per scontato che allo script vengano passate solo immagini esistenti… lo sò, è relativo.
Non modifico lo script ma il tuo commento resta utilite a chi vuole gestire l’eccezione del “file not found”.
Grazie! ; - )

Rispondi

8 Guido 15 luglio 2008 alle 18:02

Ciao,
solo adesso vedo il tuo codice, complimenti è davvero potentissimo!!!
L’unica cosa è che mi crea un bordino grigio chiaro attorno all’immagine, anche se è impostato il border a 0.
E’ possibile eliminare questo bordino?
Grazie mille, e ancora complimenti : - D

Rispondi

9 Matteo 1 dicembre 2008 alle 18:28

Ciao
come faccio a salvare il file sul disco?
Grazie infinite
Matteo

Rispondi

10 SimoneRodriguez 1 dicembre 2008 alle 18:30

C’è un link “Potete scaricare lo script da quì” 8 - )

Rispondi

11 Matteo 1 dicembre 2008 alle 18:41

Ti ringrazio ma ho scaricato lo script che funziona benissimo ma invece di visualizzare l’immagine ho bisogno di salvarla su disco.

b.Save(Response.OutputStream, ImageFormat.Jpeg)

grazie
Matteo

Rispondi

12 Omar 4 dicembre 2008 alle 14:39

Ho installato questo script sul mio sito, mi aveva reso felice… poi ho dovuto rimuoverlo poichè i risultati su firefox e chrome sono pessimi… peccato! non hai aggiornamenti? : - )

Rispondi

13 Simone Rodriguez 4 dicembre 2008 alle 15:09

Questo è uno script lato server che non è influenzato da alcun browser.
Prova tu stesso questa pagina con diversi broeser, vedrai che funziona bene con tutti i browser!

Il tuo problema è da cercarsi altrove…

Rispondi

14 Omar 4 dicembre 2008 alle 22:32

In effetti hai ragione, ho fatto la mia figura da cioccolataio… : - D
probabilmente è il metodo usato per integrare lo script in una pagina asp esistente che non va…

Rispondi

15 idelb 23 dicembre 2008 alle 19:23

Ciao,
è possibile fare in modo che lo script blocchi il file sorgente? Mi spiego meglio, sto utilizando questo script “molto utile” per creare delle immagini thumb, il problema è che se cerco di cancellare l’immagine sorgente (sia da script che da ftp) non me lo fa fare finche lo script è in azzione.

Grazie
Bledar

Rispondi

16 idelb 23 dicembre 2008 alle 19:24

Ciao,
è possibile fare in modo che lo script non blocchi il file sorgente? Mi spiego meglio, sto utilizando questo script “molto utile” per creare delle immagini thumb, il problema è che se cerco di cancellare l’immagine sorgente (sia da script che da ftp) non me lo fa fare finche lo script è in azzione.

Grazie
Bledar

Rispondi

17 Nathanael Jones 3 febbraio 2009 alle 16:01

Ho sviluppato una soluzione similare…

Rispondi

18 mapogio 6 luglio 2009 alle 17:14

#idelb:
Basta che prima di
b.dispose()
tu aggiunga
i.dispose()
In questo modo potrai subito eliminare/spostare il file da cui sei partito ;) ;)

Rispondi

19 Ezdesign 24 luglio 2009 alle 09:47

Ho utilizzato questo script che reputo molto interessate. Unico problema è che essendo utilizzato in una gallery, quando ci sono molti accessi alla pagina da perte degli utenti la CPU del processore schizza al 70%. Non ne capisco di ASP.NET e quindi vi chiedo se secondo voi si può intervenire per ridurre al minimo l’utilizzo della CPU da parte dello script, magari liberando le risorse alla fine dell’esecuzione.

Rispondi

20 Guido 24 luglio 2009 alle 10:15

Ciao,
io ho notato un comportamento simile, non tanto sulla CPU ma sulla memoria del server.

In pratica quando viene fatto il resize e il crop poi non viene rilasciata in alcun modo la memoria e così il server si impalla.

Peccato perchè l’avevo utilizzato su diversi siti.

Rispondi

21 Anonimo 18 ottobre 2009 alle 13:19

bellissimo…peccato che a me serva per immagini rettangolari…hai qualche consiglio su come fare?

Rispondi

22 Luca 22 novembre 2009 alle 10:31

Stavo abozzando qualcosa ma ho bisogno di un valido aiuto.
in questo modo l’immagine non è più quadrata ma rettangolare (800×300), riesco ad adattare anche l’immagine (per ora sto facendo prove con immagini di altezza superiore alla larghezza(primo if))…ma se cambio immagine non mi trovo più (è anche ovvio poichè sto usando numeri fissi anzicchè variabili (ad es.: NewLar = opxLARGHEZZA/1.52 invece che NewLar = opxLARGHEZZA/Qualche Formula).
< %@ Page Language="VB"%>
< %@ import Namespace="System.Drawing"%>
< %@ import Namespace="System.Drawing.Imaging"%>
< %@ import Namespace="System.Text.RegularExpressions"%>
< %
dim strFilename as string
dim opxLARGHEZZA as string
dim opxALTEZZA as string
dim i as System.Drawing.Image
dim b as System.Drawing.bitmap
dim g as graphics
If Left(request.QueryString("img"),4) = "http" then
'Response.Write("case1
“)
strFilename=server.mappath(right(request.QueryString(“img”),len(request.QueryString(“img”))-len(Request.ServerVariables(“SERVER_NAME”)

Rispondi

23 Luca 22 novembre 2009 alle 10:33

strFilename=server.mappath(right(request.QueryString(“img”),len(request.QueryString(“img”))-len(Request.ServerVariables(“SERVER_NAME”))-7))
else
‘Response.Write(“case2
“)
strFilename = server.mappath(request.QueryString(“img”))
end if
i = System.Drawing.Image.FromFile(strFilename)
opxLARGHEZZA=”800″
opxALTEZZA=”300″
b = New system.drawing.bitmap(opxLARGHEZZA, opxALTEZZA, pixelformat.format24bpprgb)
g = graphics.fromimage(b)
g.InterpolationMode = 2
g.SmoothingMode = 4
g.PixelOffsetMode = 4
g.CompositingQuality = 4

Rispondi

24 Roberto 8 dicembre 2009 alle 21:00

Ciao, per usare l’InterpolationMode bisogna usare per forza ‘graphics.drawimage’ o si può fare anche con ‘Drawing.Bitmap’? Anche a me serviva per le immagini rettangolari, ho uno script che utilizza ‘Drawing.Bitmap’ ma non riesco a implementarci l’InterpolationMode. Grazie, ciao.

Rispondi

25 Luca 10 dicembre 2009 alle 19:27

Roberto posta il codice che vediamo di risolverlo al volo

Rispondi

26 Roberto 10 dicembre 2009 alle 20:49

Ci sono riuscito ma non ho il codice qui a casa. Ho fatto un ibrido utilizzando questo codice e quello di Daniele Bochicchio di ASPitalia. A dir la verità ho alcune perplessità sul perché i metodi sono utilizzati diversamente, ma lo script funziona. Forse non è pulito però…

Rispondi

27 Emanuele 3 febbraio 2010 alle 12:39

Io dovrei modificare una immagine GIF per utilizzarla in un documento PDF con iTextSharp, ma non riesco a capire se con questo script il file nuovo viene salvato (e dove) o se ho la possibilità di utilizzarlo “on-the-fly” per implementarlo… qualcuno sa aiutarmi?
Grazie
Emanuele

Rispondi

28 Ettoruccio 27 giugno 2010 alle 17:50

Ripropongo la domanda di Matteo, rimasta inevasa:

Matteo 1 dicembre 2008 alle 18:41
Ti ringrazio ma ho scaricato lo script che funziona benissimo ma invece di visualizzare l’immagine ho bisogno di salvarla su disco.

b.Save(Response.OutputStream, ImageFormat.Jpeg)

grazie
Matteo

Rispondi

29 Tullio 2 novembre 2010 alle 18:09

square.aspx funziona mentre resize.aspx di dblog non mi funziona, e non conoscendo il linguaggio ero nella m… Ho costruito grazie al pacchetto Dblog ed agli script scaricati dal sito di Tamada Srivinas http://www.9lessons.info un social media network adattando gli scripts che fanno largo uso di jquery al linguaggio usato da dblog cioè classic asp Un problema che mi permane è la visualizzazione dell’immagine di un link, a volte c’azzecca a volte no.

Rispondi

30 Nicola 19 gennaio 2011 alle 09:22

Ciao, grazie per il tuo lavoro, ho avuto un ottimo spunto per iniziare.
Se interessa ho implementato la versione che permette l’immagine rettangolare.

La bitmat viene creata con i due parametri:

b = New System.Drawing.Bitmap(Request.QueryString("x"), Request.QueryString("y"), PixelFormat.Format24bppRgb)

Poi salto fino all’if:

If Integer.Parse(Request.QueryString("x")) > Integer.Parse(Request.QueryString("y")) Then
NewLar = i.Width
NewAlt = (i.Width * Request.QueryString("y")) / Request.QueryString("x")
SrcY = (i.Height - NewAlt) / 2
SrcX = 0
Else
NewLar = (i.Height * Request.QueryString("x")) / Request.QueryString("y")
NewAlt = i.Height
SrcY = 0
SrcX = (i.Width - NewLar) / 2
End If
g.DrawImage(i, New Rectangle(0, 0, Request.QueryString("x"), Request.QueryString("y")), New Rectangle(SrcX, SrcY, NewLar, NewAlt), GraphicsUnit.Pixel)

Il funzionamento è questo: viene fissato il lato più corto, e l’altra dimensione viene calcolata di conseguenza. Il crop avviene al centro del lato lungo.

Una domanda: a livello di prestazioni è meno vantaggioso rispetto ad avere tutte le immagini richiamate da link relativi?

Rispondi

31 Gabriele 19 aprile 2011 alle 08:18

Ciao, interessante sta cosa, posteresti lo script completo?

Gabriele ;-)

Rispondi

32 Gabriele 22 aprile 2011 alle 13:16

Inserisco lo script completo per avere una foto rettangolare

Integer.Parse(Request.QueryString(“y”)) Then
NewLar = i.Width
NewAlt = (i.Width * Request.QueryString(“y”)) / Request.QueryString(“x”)
SrcY = (i.Height – NewAlt) / 2
SrcX = 0
Else
NewLar = (i.Height * Request.QueryString(“x”)) / Request.QueryString(“y”)
NewAlt = i.Height
SrcY = 0
SrcX = (i.Width – NewLar) / 2
End If

g.DrawImage(i, New Rectangle(0, 0, Request.QueryString(“x”), Request.QueryString(“y”)), New Rectangle(SrcX, SrcY, NewLar, NewAlt), GraphicsUnit.Pixel)

response.contenttype=”image/jpeg”
b.save(response.outputstream, imageformat.jpeg)
b.dispose()
%>

richiamo foto : rettangolo.aspx?img=immagine.jpg&x=120&y=90

Gab ;-)

Rispondi

33 Gabriele 22 aprile 2011 alle 13:18

Ho fatto copia incolla di tutto il codice ma non lo visualizza sul post…
Arg arg

Gab

Rispondi

34 Antonio 11 ottobre 2011 alle 22:39

Ciao gabriele saresti così gentile da passarmi il codice completo per il rettangolo, ho provato ma non riesco, sono alle prime armi :-) grazie.

35 Luigi 25 gennaio 2011 alle 18:53

Ciao Simone. Ottimo script e vedo che già sono passati quasi 4 anni da quando lo hai postato. L’ho implementato in un piccolo progettino web per la mia associazione e funziona tutto bene, però… a volte non carica le immagini (capita soprattutto quando lavoro con gli album con più foto. Da cosa può dipendere ? Hosting windows Aruba ed effettuo le chiamate in asp, dbaccess … qualche dritta ? Grazie e ancora complimenti.

Rispondi

36 Luigi 31 gennaio 2011 alle 15:33

Ciao Simone. Eccomi di nuovo qui. Riguardo la domanda di prima credo che la risposta sia da cercare su file troppo grossi e server troppo stressato dalla quantità di immagini da ritagliare. C’è un altro problema che sembra essere legato al tuo script che blocca il file sul server e non lo fa eliminare. In poche parole, se tento di eliminare via web, mi dice permesso negato … stessa cosa se provo via ftp. Sempre se hai tempo e passi da queste parti…hai qualche suggerimento ? Grazie.

Rispondi

37 SimoneRodriguez 31 gennaio 2011 alle 16:35

Ciao Luigi… lo ammetto, sono diventato latitante…

Riguardo al tuo problema, l’utilizzo del metodo “dispose” dovrebbe del tutto liberare le risorse utilizzate. Ho paura che il problema derivi da qualche altra causa.

Sorry

Rispondi

38 Luigi 31 gennaio 2011 alle 20:14

Grazie per la risposta “latitante” :)
Ho disattivato square.aspx semplicemente rinominandolo.
A quel punto non mi ha dato l’errore e ha eliminato il file dal server senza errori. Quindi deduco che la causa sia square.aspx
Non so cos’altro pensare.
Grazie comunque e se ti viene in mente qualcosa ovviamente mi farà piacere ricevere un tuo input.
Bye.

Rispondi

39 oem store 2 marzo 2011 alle 22:48

I just can not imagine with incredibly blog greatly that helped me Thank you

Rispondi

40 Nathanael Jones 3 agosto 2011 alle 12:07

Date un occhiata alla libreria di ImageResizing.Net – riesce a maneggiare l’aspect ratio nel modo giusto ed è migliore nella sintassi URL.

/square.aspx?img=/images/RECEPTIO_2.jpg&opx=150

/images/RECEPTIO_2.jpg?width=150&height=150&crop=auto

Dovreste, inoltre, leggere questa lista di problemi da evitare nei resizing script.

Rispondi

41 Marco 21 settembre 2011 alle 23:31

Ciao Ragazzi lavoro su un sito per aggiungere foto dagli utenti ma purtroppo non tutti gli utenti hanno foto in jpeg, e non tutti sanno usare i programmi di grafica per modificare le foto, a questo punto vi chiedo , se si puo far in modo che accetti anche le gif, jpg, bmp per lo meno queste.
Magari faccio una domanda stupida ma vi prego di perdonarmi sono un novizio di asp.net e asp.
Un salutone
Marco

Rispondi

Lascia un commento

Puoi usare questi tags HTML ed attibuti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Articolo precedente:

prossimo articolo: