Crop and Resize con asp.net

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:
https://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:
https://www.simonerodriguez.com/square.aspx?img=/images/RECEPTIO_2.jpg&opx=150

[dm]1[/dm]

42 Comments
  1. 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

  2. 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

  3. 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?

  4. 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)

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

  6. 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.

  7. 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! ; - )

  8. 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

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

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

  11. 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

  12. 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? : - )

  13. 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…

  14. 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…

  15. 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

  16. 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

  17. Ho sviluppato una soluzione similare…

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

  19. 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.

  20. 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.

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

  22. 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”)

  23. 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

  24. 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.

  25. Roberto posta il codice che vediamo di risolverlo al volo

  26. 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ò…

  27. 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

  28. 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

  29. 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.

  30. 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?

    • Ciao, interessante sta cosa, posteresti lo script completo?

      Gabriele 😉

      • 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 😉

        • Ciao, molto interessante il tuo script per crop verticale però non riesco a farlo funzionare. Non visualizza le immagini, con il crop square non ho problemi, funziona tutto, ma con il verticale no. Hai qualche dritta da darmi?
          Grazie

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

          Gab

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

  31. 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.

  32. 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.

    • 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

  33. 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.

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

  35. 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.

  36. 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

Leave a reply