Condividi tramite

Uso delle immagini in un sito di Pagine Web ASP.NET (Razor)

  • Articolo

di Tom FitzMacken

Questo articolo illustra come aggiungere, visualizzare e modificare immagini (ridimensionare, capovolgere e aggiungere filigrane) in un sito Web di Pagine Web ASP.NET (Razor).

Contenuto dell'esercitazione:

  • Come aggiungere un'immagine a una pagina in modo dinamico.
  • Come consentire agli utenti di caricare un'immagine.
  • Come ridimensionare un'immagine.
  • Come capovolgere o ruotare un'immagine.
  • Come aggiungere una filigrana a un'immagine.
  • Come usare un'immagine come filigrana.

Queste sono le funzionalità di programmazione ASP.NET introdotte nell'articolo:

  • Helper WebImage .
  • Oggetto Path , che fornisce metodi che consentono di modificare i nomi di percorso e file.

Versioni software usate nell'esercitazione

  • Pagine Web ASP.NET (Razor) 2
  • WebMatrix 2

Questa esercitazione funziona anche con WebMatrix 3.

Aggiunta dinamica di un'immagine a una pagina Web

È possibile aggiungere immagini al sito Web e a singole pagine durante lo sviluppo del sito Web. È anche possibile consentire agli utenti di caricare immagini, che potrebbero essere utili per attività come consentire loro di aggiungere una foto del profilo.

Se un'immagine è già disponibile nel sito e si vuole semplicemente visualizzarla in una pagina, si usa un elemento HTML <img> simile al seguente:

<img src="images/Photo1.jpg" alt="Sample Photo" />

A volte, tuttavia, è necessario essere in grado di visualizzare le immagini in modo dinamico, ovvero non si conosce l'immagine da visualizzare fino a quando la pagina non è in esecuzione.

La procedura descritta in questa sezione illustra come visualizzare un'immagine in tempo reale in cui gli utenti specificano il nome del file di immagine da un elenco di nomi di immagine. Selezionano il nome dell'immagine da un elenco a discesa e, quando inviano la pagina, viene visualizzata l'immagine selezionata.

[Screenshot che mostra un'immagine visualizzata dopo essere stata selezionata da un elenco a discesa.]

  1. In WebMatrix creare un nuovo sito Web.

  2. Aggiungere una nuova pagina denominata DynamicImage.cshtml.

  3. Nella cartella radice del sito Web aggiungere una nuova cartella e denominarla immagini.

  4. Aggiungere quattro immagini alla cartella images appena creata. (Qualsiasi immagine che hai a portata di mano farà, ma dovrebbero adattarsi a una pagina. Rinominare le immagini Photo1.jpg, Photo2.jpg, Photo3.jpge Photo4.jpg. Non si userà Photo4.jpg in questa procedura, ma verrà usata più avanti nell'articolo.

  5. Verificare che le quattro immagini non siano contrassegnate come di sola lettura.

  6. Sostituire il contenuto esistente nella pagina con quanto segue:

    @{  var imagePath= "";
    if( Request["photoChoice"] != null){
        imagePath = @"images\" + Request["photoChoice"];
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Display Image on the Fly</title>
</head>
<body>
<h1>Displaying an Image On the Fly</h1>
<form method="post" action="">
    <div>
        I want to see:
        <select name="photoChoice">
            <option value="Photo1.jpg">Photo 1</option>
            <option value="Photo2.jpg">Photo 2</option>
            <option value="Photo3.jpg">Photo 3</option>
        </select>
        &nbsp;
        <input type="submit" value="Submit" />
    </div>
    <div style="padding:10px;">
        @if(imagePath != ""){
            <img src="@imagePath" alt="Sample Image" width="300px" />
        }
    </div>
</form>
</body>
</html>

    Il corpo della pagina ha un elenco a discesa (un <select> elemento) denominato photoChoice. L'elenco include tre opzioni e l'attributo value di ogni opzione elenco ha il nome di una delle immagini inserite nella cartella images . Essenzialmente, l'elenco consente all'utente di selezionare un nome descrittivo come "Foto 1" e quindi passa il nome del file .jpg quando viene inviata la pagina.

    Nel codice è possibile ottenere la selezione dell'utente (in altre parole, il nome del file di immagine) dall'elenco leggendo Request["photoChoice"]. Si noterà prima di tutto se è presente una selezione. In caso affermativo, si crea un percorso per l'immagine costituita dal nome della cartella per le immagini e dal nome del file di immagine dell'utente. Se si è tentato di costruire un percorso ma non c'era nulla in Request["photoChoice"], si riceverà un errore. Il risultato è un percorso relativo simile al seguente:

    images/Photo1.jpg

    Il percorso viene archiviato nella variabile denominata imagePath che sarà necessario più avanti nella pagina.

    Nel corpo è presente anche un <img> elemento usato per visualizzare l'immagine selezionata dall'utente. L'attributo src non è impostato su un nome file o un URL, come si farebbe per visualizzare un elemento statico. Viene invece impostato su @imagePath, ovvero ottiene il relativo valore dal percorso impostato nel codice.

    La prima volta che la pagina viene eseguita, tuttavia, non è presente alcuna immagine da visualizzare, perché l'utente non ha selezionato nulla. Questo significa in genere che l'attributo src sarebbe vuoto e l'immagine verrebbe visualizzata come rosso "x" (o qualsiasi altro rendering del browser quando non riesce a trovare un'immagine). Per evitare questo problema, inserire l'elemento <img> in un if blocco che verifica se la imagePath variabile contiene elementi. Se l'utente ha effettuato una selezione, imagePath contiene il percorso. Se l'utente non ha selezionato un'immagine o se è la prima volta che viene visualizzata la pagina, l'elemento <img> non viene nemmeno sottoposto a rendering.

  7. Salvare il file ed eseguire la pagina in un browser. Assicurarsi che la pagina sia selezionata nell'area di lavoro File prima di eseguirla.

  8. Selezionare un'immagine dall'elenco a discesa e quindi fare clic su Immagine di esempio. Assicurarsi di visualizzare immagini diverse per scelte diverse.

Caricamento di un'immagine

L'esempio precedente illustra come visualizzare un'immagine in modo dinamico, ma funziona solo con immagini già presenti nel sito Web. Questa procedura illustra come consentire agli utenti di caricare un'immagine, che viene quindi visualizzata nella pagina. In ASP.NET è possibile modificare le immagini in tempo reale usando l'helper WebImage , che include metodi che consentono di creare, modificare e salvare le immagini. L'helper WebImage supporta tutti i tipi di file di immagine Web comuni, tra cui .jpg, .pnge .bmp. In questo articolo si useranno .jpg immagini, ma è possibile usare qualsiasi tipo di immagine.

[Screenshot che mostra la pagina Carica un'immagine.]

  1. Aggiungere una nuova pagina e denominarla UploadImage.cshtml.

  2. Sostituire il contenuto esistente nella pagina con quanto segue:

    @{  WebImage photo = null;
    var newFileName = "";
    var imagePath = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
            newFileName = Guid.NewGuid().ToString() + "_" +
                Path.GetFileName(photo.FileName);
            imagePath = @"images\" + newFileName;

            photo.Save(@"~\" + imagePath);
        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Upload</title>
</head>
<body>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Upload Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Upload" />
    </fieldset>
  </form>
  <h1>Uploaded Image</h1>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imagePath" alt="image" />

    </div>
    }
</body>
</html>

    Il corpo del testo ha un <input type="file"> elemento che consente agli utenti di selezionare un file da caricare. Quando fanno clic su Invia, il file selezionato viene inviato insieme al modulo.

    Per ottenere l'immagine caricata, si usa l'helper WebImage , che include tutti i tipi di metodi utili per l'uso delle immagini. In particolare, si usa WebImage.GetImageFromRequest per ottenere l'immagine caricata (se presente) e archiviarla in una variabile denominata photo.

    Molte operazioni in questo esempio comportano l'acquisizione e l'impostazione di nomi di file e percorsi. Il problema è che si vuole ottenere il nome (e solo il nome) dell'immagine caricata dall'utente e quindi creare un nuovo percorso in cui archiviare l'immagine. Poiché gli utenti potrebbero caricare potenzialmente più immagini con lo stesso nome, si usa un po' di codice aggiuntivo per creare nomi univoci e assicurarsi che gli utenti non sovrascrivano le immagini esistenti.

    Se un'immagine è stata effettivamente caricata (il test if (photo != null)), si ottiene il nome dell'immagine dalla proprietà dell'immagine FileName . Quando l'utente carica l'immagine, FileName contiene il nome originale dell'utente, che include il percorso del computer dell'utente. Potrebbe essere simile al seguente:

    C:\Users\Joe\Pictures\SamplePhoto1.jpg

    Tuttavia, non si vogliono ottenere tutte le informazioni sul percorso, ma si vuole solo il nome file effettivo (SamplePhoto1.jpg). È possibile rimuovere solo il file da un percorso usando il Path.GetFileName metodo , come illustrato di seguito:

    Path.GetFileName(photo.FileName)

    Creare quindi un nuovo nome file univoco aggiungendo un GUID al nome originale. Per altre informazioni sui GUID, vedere Informazioni sui GUID più avanti in questo articolo. Creare quindi un percorso completo che è possibile usare per salvare l'immagine. Il percorso di salvataggio è costituito dal nuovo nome file, dalla cartella (immagini) e dal percorso del sito Web corrente.

    Nota

    Per consentire al codice di salvare i file nella cartella images , l'applicazione necessita di autorizzazioni di lettura/scrittura per tale cartella. Nel computer di sviluppo non si tratta in genere di un problema. Tuttavia, quando si pubblica il sito nel server Web di un provider di hosting, potrebbe essere necessario impostare in modo esplicito tali autorizzazioni. Se si esegue questo codice nel server di un provider di hosting e si verificano errori, rivolgersi al provider di hosting per scoprire come impostare tali autorizzazioni.

    Infine, si passa il percorso di salvataggio al Save metodo dell'helper WebImage . In questo modo l'immagine caricata viene archiviata con il nuovo nome. Il metodo save è simile al seguente: photo.Save(@"~\" + imagePath). Il percorso completo viene aggiunto a @"~\", ovvero il percorso del sito Web corrente. Per informazioni sull'operatore ~ , vedere Introduzione a ASP.NET programmazione Web tramite la sintassi Razor.

    Come nell'esempio precedente, il corpo della pagina contiene un <img> elemento per visualizzare l'immagine. Se imagePath è stato impostato, viene eseguito il rendering dell'elemento <img> e il relativo src attributo viene impostato sul imagePath valore .

  3. Eseguire la pagina in un browser.

  4. Caricare un'immagine e assicurarsi che sia visualizzata nella pagina.

  5. Nel sito aprire la cartella images . Si noterà che è stato aggiunto un nuovo file il cui nome file è simile al seguente:

    45ea4527-7ddd-4965-b9ca-c6444982b342_MyPhoto.png

    Si tratta dell'immagine caricata con un GUID preceduto dal nome. Il proprio file avrà un GUID diverso e probabilmente è denominato qualcosa di diverso da MyPhoto.png.

Suggerimento

Informazioni sui GUID

Un GUID (ID univoco globale) è un identificatore che viene in genere eseguito il rendering in un formato simile al seguente: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. I numeri e le lettere (da A-F) differiscono per ogni GUID, ma tutti seguono il modello di utilizzo dei gruppi di caratteri 8-4-4-12. Tecnicamente, un GUID è un numero a 16 byte/128 bit. Quando è necessario un GUID, è possibile chiamare codice specializzato che genera un GUID per l'utente. L'idea dietro i GUID è che tra le dimensioni enormi del numero (3,4 x 1038) e l'algoritmo per la generazione, il numero risultante è virtualmente garantito essere uno di un tipo. I GUID sono quindi un buon modo per generare nomi per le cose quando è necessario garantire che non si userà lo stesso nome due volte. Il lato negativo, naturalmente, è che i GUID non sono particolarmente descrittivi, quindi tendono a essere usati quando il nome viene usato solo nel codice.

Ridimensionamento di un'immagine

Se il tuo sito Web accetta immagini da un utente, potresti voler ridimensionare le immagini prima di visualizzarle o salvarle. Per questo è possibile usare di nuovo l'helper WebImage .

Questa procedura illustra come ridimensionare un'immagine caricata per creare un'anteprima e quindi salvare l'anteprima e l'immagine originale nel sito Web. Viene visualizzata l'anteprima nella pagina e viene usato un collegamento ipertestuale per reindirizzare gli utenti all'immagine di dimensioni complete.

[Screenshot che mostra la pagina Immagine anteprima.]

  1. Aggiungere una nuova pagina denominata Thumbnail.cshtml.

  2. Nella cartella immagini creare una sottocartella denominata thumbs.

  3. Sostituire il contenuto esistente nella pagina con quanto segue:

    @{  
    WebImage photo = null;
    var newFileName = "";
    var imagePath = "";
    var imageThumbPath  = "";

    if(IsPost){
        photo = WebImage.GetImageFromRequest();
        if(photo != null){
             newFileName = Guid.NewGuid().ToString() + "_" +
                 Path.GetFileName(photo.FileName);
             imagePath = @"images\" + newFileName;
             photo.Save(@"~\" + imagePath);

            imageThumbPath = @"images\thumbs\" + newFileName;
            photo.Resize(width: 60, height: 60, preserveAspectRatio: true,
               preventEnlarge: true);
            photo.Save(@"~\" + imageThumbPath);        }
    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Resizing Image</title>
</head>
<body>
<h1>Thumbnail Image</h1>
  <form action="" method="post" enctype="multipart/form-data">
    <fieldset>
      <legend> Creating Thumbnail Image </legend>
      <label for="Image">Image</label>
      <input type="file" name="Image" />
      <br/>
      <input type="submit" value="Submit" />
    </fieldset>
  </form>
    @if(imagePath != ""){
    <div class="result">
        <img src="@imageThumbPath" alt="Thumbnail image" />
        <a href="@Html.AttributeEncode(imagePath)" target="_Self">
            View full size
        </a>
    </div>

    }
</body>
</html>

    Questo codice è simile al codice dell'esempio precedente. La differenza è che questo codice salva l'immagine due volte, una volta normalmente e una volta dopo aver creato una copia di anteprima dell'immagine. Prima di tutto si ottiene l'immagine caricata e la si salva nella cartella immagini . Si crea quindi un nuovo percorso per l'immagine di anteprima. Per creare effettivamente l'anteprima, si chiama il WebImage metodo helper Resize per creare un'immagine da 60 pixel a 60 pixel. Nell'esempio viene illustrato come mantenere le proporzioni e come è possibile impedire l'ingrandimento dell'immagine( nel caso in cui le nuove dimensioni rendessero effettivamente l'immagine più grande). L'immagine ridimensionata viene quindi salvata nella sottocartella pollici .

    Alla fine del markup si usa lo stesso <img> elemento con l'attributo dinamico src visualizzato negli esempi precedenti per visualizzare in modo condizionale l'immagine. In questo caso viene visualizzata l'anteprima. Si usa anche un <a> elemento per creare un collegamento ipertestuale alla versione grande dell'immagine. Come con l'attributo dell'elemento, si imposta l'attributo srchref dell'elemento <a> in modo dinamico su qualsiasi elemento in imagePath.<img> Per assicurarsi che il percorso possa funzionare come URL, passare imagePath al Html.AttributeEncode metodo, che converte caratteri riservati nel percorso a caratteri che sono ok in un URL.

  4. Eseguire la pagina in un browser.

  5. Caricare una foto e verificare che venga visualizzata l'anteprima.

  6. Fare clic sull'anteprima per visualizzare l'immagine full-size.

  7. Nelle immagini e nelle immagini/pollice notare che sono stati aggiunti nuovi file.

Rotazione e scorrimento di un'immagine

L'helper WebImage consente anche di capovolgere e ruotare le immagini. Questa procedura illustra come ottenere un'immagine dal server, capovolgere l'immagine sottosopra (verticalmente), salvarla e quindi visualizzare l'immagine capovolta nella pagina. In questo esempio si usa solo un file già presente nel server (Photo2.jpg). In un'applicazione reale, probabilmente si capovolge un'immagine il cui nome si ottiene dinamicamente, come si è fatto negli esempi precedenti.

[Screenshot che mostra la pagina Flip Image Vertical.]

  1. Aggiungere una nuova pagina denominata FlipImage.cshtml.

  2. Sostituire il contenuto esistente nella pagina con quanto segue:

    @{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
    if(photo != null){
        imagePath = @"images\Photo2.jpg";
        photo.FlipVertical();
        photo.Save(@"~\" + imagePath);
     }
}
<!DOCTYPE html>
<html>
<head>
  <title>Get Image From File</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Flip Image Vertically</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>

    Il codice usa l'helper WebImage per ottenere un'immagine dal server. Si crea il percorso dell'immagine usando la stessa tecnica usata negli esempi precedenti per il salvataggio delle immagini e si passa tale percorso quando si crea un'immagine usando WebImage:

    WebImage photo = new WebImage(@"~\Images\Photo2.jpg");

    Se viene trovata un'immagine, si costruisce un nuovo percorso e un nuovo nome di file, come è stato fatto negli esempi precedenti. Per scorrere l'immagine, si chiama il FlipVertical metodo e quindi si salva di nuovo l'immagine.

    L'immagine viene visualizzata di nuovo nella pagina usando l'elemento con l'attributo <img>src impostato su imagePath.

  3. Eseguire la pagina in un browser. L'immagine per Photo2.jpg viene visualizzata sottosopra.

  4. Aggiornare di nuovo la pagina o richiedere di nuovo la pagina per visualizzare l'immagine viene capovolta a destra.

Per ruotare un'immagine, si usa lo stesso codice, ad eccezione del fatto che invece di chiamare o , si chiama FlipVerticalRotateLeft o FlipHorizontalRotateRight.

Aggiunta di una filigrana a un'immagine

Quando si aggiungono immagini al sito Web, è possibile aggiungere una filigrana all'immagine prima di salvarla o visualizzarla in una pagina. Persone spesso usano filigrane per aggiungere informazioni sul copyright a un'immagine o per pubblicizzare il proprio nome aziendale.

[Screenshot che mostra l'aggiunta di una filigrana a una pagina immagine.]

  1. Aggiungere una nuova pagina denominata Watermark.cshtml.

  2. Sostituire il contenuto esistente nella pagina con quanto segue:

    @{  var imagePath= "";
    WebImage photo = new WebImage(@"~\Images\Photo3.jpg");
    if(photo != null){
        imagePath = @"images\Photo3.jpg";
        photo.AddTextWatermark("My Watermark", fontColor:"Yellow", fontFamily:
            "Arial");
        photo.Save(@"~\" + imagePath);    }
}
<!DOCTYPE html>
<html>
<head>
  <title>Water Mark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
<h1>Adding a Watermark to an Image</h1>
@if(imagePath != ""){
  <div class="result">
    <img src="@imagePath" alt="Image" />
  </div>
}
</body>
</html>

    Questo codice è simile al codice nella pagina FlipImage.cshtml precedente (anche se questa volta usa il file diPhoto3.jpg ). Per aggiungere la filigrana, chiamare il WebImage metodo del helper prima di AddTextWatermark salvare l'immagine. Nella chiamata a AddTextWatermark, si passa il testo "Filigrana personale", impostare il colore del carattere su giallo e impostare la famiglia di caratteri su Arial. Sebbene non sia visualizzato qui, l'helper WebImage consente anche di specificare l'opacità, la famiglia di caratteri e le dimensioni del carattere e la posizione del testo della filigrana. Quando si salva l'immagine non deve essere di sola lettura.

    Come si è visto in precedenza, l'immagine viene visualizzata nella pagina usando l'elemento con l'attributo <img> src impostato su @imagePath.

  3. Eseguire la pagina in un browser. Si noti il testo "Filigrana personale" nell'angolo inferiore destro dell'immagine.

Uso di un'immagine come filigrana

Anziché usare il testo per una filigrana, è possibile usare un'altra immagine. Persone talvolta usano immagini come un logo aziendale come filigrana o usano un'immagine filigrana anziché testo per informazioni sul copyright.

[Screenshot che mostra l'uso di un'immagine come pagina Filigrana.]

  1. Aggiungere una nuova pagina denominata ImageWatermark.cshtml.

  2. Aggiungere un'immagine alla cartella immagini che è possibile usare come logo e rinominare l'immagine MyCompanyLogo.jpg. Questa immagine deve essere un'immagine che può essere visualizzata chiaramente quando è impostata su 80 pixel di larghezza e 20 pixel elevati.

  3. Sostituire il contenuto esistente nella pagina con quanto segue:

    @{  var imagePath = "";
   WebImage WatermarkPhoto = new WebImage(@"~\" +
        @"\Images\MyCompanyLogo.jpg");
    WebImage photo = new WebImage(@"~\Images\Photo4.jpg");
    if(photo != null){
        imagePath = @"images\Photo4.jpg";
        photo.AddImageWatermark(WatermarkPhoto, width: 80, height: 20,
           horizontalAlign:"Center", verticalAlign:"Bottom",
           opacity:100,  padding:10);
      photo.Save(@"~\" + imagePath);
   }
}
<!DOCTYPE html>
<html>
<head>
  <title>Image Watermark</title>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
</head>
<body>
  <h1>Using an Image as a Watermark</h1>
  @if(imagePath != ""){
    <div class="result">
      <img src="@imagePath" alt="Image" />
    </div>
  }
</body>
</html>

    Si tratta di un'altra variante del codice degli esempi precedenti. In questo caso, si chiama AddImageWatermark per aggiungere l'immagine di filigrana all'immagine di destinazione (Photo3.jpg) prima di salvare l'immagine. Quando si chiama AddImageWatermark, si imposta la larghezza su 80 pixel e l'altezza su 20 pixel. L'immagineMyCompanyLogo.jpg è allineata orizzontalmente al centro e allineata verticalmente nella parte inferiore dell'immagine di destinazione. L'opacità è impostata sul 100% e la spaziatura interna è impostata su 10 pixel. Se l'immagine della filigrana è maggiore dell'immagine di destinazione, non si verificherà nulla. Se l'immagine filigrana è maggiore dell'immagine di destinazione e si imposta la spaziatura interna per la filigrana immagine su zero, la filigrana viene ignorata.

    Come prima, viene visualizzata l'immagine usando l'elemento <img> e un attributo dinamico src .

  4. Eseguire la pagina in un browser. Si noti che l'immagine filigrana viene visualizzata nella parte inferiore dell'immagine principale.

Risorse aggiuntive

Uso dei file in un sito di Pagine Web ASP.NET

Introduzione alla programmazione Pagine Web ASP.NET usando la sintassi Razor