Práce s obrázky na webu ASP.NET Web Pages (Razor)

Článek
07/13/2023

V tomto článku se dozvíte, jak na webu ASP.NET Web Pages (Razor) přidat obrázky, zobrazit je a jak s nimi manipulovat (změnit jejich velikost, překlopit je a přidat vodoznaky).

Naučíte se:

Postup dynamického přidání obrázku na stránku

Jak umožnit uživatelům nahrát obrázek

Jak změnit velikost obrázku.

Jak překlopit nebo otočit obrázek.

Jak přidat vodoznak do obrázku.

Jak použít obrázek jako vodoznak.

Toto jsou ASP.NET programovací funkce představené v tomto článku:

Pomocná rutina WebImage .

Objekt Path , který poskytuje metody, které umožňují manipulovat s cestami a názvy souborů.

Verze softwaru použité v kurzu

webové stránky ASP.NET (Razor) 2

WebMatrix 2

Tento kurz funguje také s nástrojem WebMatrix 3.

Dynamické přidání obrázku na webovou stránku

Během vývoje webu můžete přidávat obrázky na svůj web a na jednotlivé stránky. Můžete také uživatelům umožnit nahrávat obrázky, což může být užitečné pro úlohy, jako je například možnost přidat profilovou fotku.

Pokud už je obrázek na vašem webu dostupný a chcete ho jenom zobrazit na stránce, použijte element HTML <img> podobný tomuto:

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

Někdy ale potřebujete, abyste mohli obrázky zobrazovat dynamicky – to znamená, že nevíte, jaký obrázek se má zobrazit, dokud stránka neběží.

Postup v této části ukazuje, jak za běhu zobrazit obrázek, kde uživatelé zadávají název souboru obrázku ze seznamu názvů obrázků. Vyberou název obrázku z rozevíracího seznamu a po odeslání stránky se zobrazí obrázek, který vybrali.

[Snímek obrazovky zobrazuje obrázek, který se zobrazuje po výběru z rozevíracího seznamu.]

Ve službě WebMatrix vytvořte nový web.
Přidejte novou stránku s názvem DynamicImage.cshtml.
Do kořenové složky webu přidejte novou složku a pojmenujte ji images.
Do složky images , kterou jste právě vytvořili, přidejte čtyři obrázky. (Všechny obrázky, které máte po ruce, ale měly by se vejít na stránku.) Přejmenujte image Photo1.jpg, Photo2.jpg, Photo3.jpga Photo4.jpg. (V tomto postupu nepoužijetePhoto4.jpg , ale použijete ho později v tomto článku.)
Ověřte, že tyto čtyři image nejsou označené jako jen pro čtení.
Nahraďte existující obsah na stránce následujícím kódem:
```
@{  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>
```
Text stránky obsahuje rozevírací seznam ( <select> element) s názvem photoChoice. Seznam obsahuje tři možnosti a value atribut každé možnosti seznamu má název jednoho z obrázků, které jste umístili do složky images . Seznam v podstatě umožňuje uživateli vybrat popisný název, například "Fotka 1", a při odeslání stránky pak předá .jpg název souboru.

V kódu můžete získat výběr uživatele (jinými slovy název souboru obrázku) ze seznamu čtením Request["photoChoice"]. Nejdřív zjistíte, jestli je nějaký výběr vůbec k dispozici. Pokud existuje, vytvoříte cestu k imagi, která se skládá z názvu složky pro obrázky a názvu souboru obrázku uživatele. (Pokud byste se pokusili vytvořit cestu, ale v Request["photoChoice"]souboru nic nebylo, zobrazila by se chyba.) Výsledkem je relativní cesta podobná této:

obrázky a Photo1.jpg

Cesta je uložená v proměnné s názvem imagePath , kterou budete potřebovat později na stránce.

V těle je také <img> prvek, který slouží k zobrazení obrázku vybraného uživatelem. Atribut src není nastavený na název souboru nebo adresu URL, jako byste to udělali pro zobrazení statického prvku. Místo toho je nastavená na @imagePath, což znamená, že získává hodnotu z cesty, kterou jste nastavili v kódu.

Při prvním spuštění stránky ale není k dispozici žádný obrázek, který by se dal zobrazit, protože uživatel nic nevybral. To by normálně znamenalo, že src atribut by byl prázdný a obrázek by se zobrazil jako červený "x" (nebo cokoliv jiného, co prohlížeč vykreslí, když nemůže najít obrázek). Chcete-li tomu zabránit, umístíte <img> prvek do if bloku, který testuje, zda imagePath proměnná obsahuje něco. Pokud uživatel provedl výběr, imagePath obsahuje cestu . Pokud uživatel nevybral obrázek nebo pokud se stránka zobrazuje poprvé, <img> prvek se ani nevykreslí.
Uložte soubor a spusťte stránku v prohlížeči. (Před spuštěním se ujistěte, že je stránka vybraná v pracovním prostoru Soubory .)
V rozevíracím seznamu vyberte obrázek a pak klikněte na Ukázkový obrázek. Ujistěte se, že vidíte různé obrázky pro různé volby.

Nahrání obrázku

Předchozí příklad vám ukázal, jak zobrazit obrázek dynamicky, ale fungoval pouze s obrázky, které už byly na vašem webu. Tento postup ukazuje, jak umožnit uživatelům nahrát obrázek, který se pak zobrazí na stránce. V ASP.NET můžete s obrázky za běhu manipulovat pomocí WebImage pomocné rutiny, která obsahuje metody, které umožňují vytvářet obrázky, manipulovat s nimi a ukládat je. Tato pomocná rutina WebImage podporuje všechny běžné typy souborů webových obrázků, včetně souborů.jpg, .pnga .bmp. V tomto článku budete používat .jpg obrázky, ale můžete použít libovolný typ obrázků.

[Snímek obrazovky ukazuje stránku Nahrát obrázek.]

Přidejte novou stránku a pojmenujte ji UploadImage.cshtml.
Nahraďte existující obsah na stránce následujícím kódem:
```
@{  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>
```
Text textu obsahuje <input type="file"> prvek, který uživatelům umožňuje vybrat soubor k nahrání. Když kliknou na Odeslat, vybraný soubor se odešle spolu s formulářem.

K získání nahraného obrázku použijete pomocnou rutinu WebImage , která nabízí nejrůznější užitečné metody pro práci s obrázky. Konkrétně použijete WebImage.GetImageFromRequest k získání nahraného obrázku (pokud existuje) a jeho uložení do proměnné s názvem photo.

Hodně práce v tomto příkladu zahrnuje získání a nastavení názvů souborů a cest. Problém spočívá v tom, že chcete získat název (a jenom název) obrázku, který uživatel nahrál, a pak vytvořit novou cestu pro umístění, kam chcete obrázek uložit. Vzhledem k tomu, že uživatelé můžou potenciálně nahrát více obrázků se stejným názvem, použijete trochu kódu navíc k vytvoření jedinečných názvů a zajistíte, aby uživatelé nepřepsali existující obrázky.

Pokud byl obrázek skutečně nahrán (test if (photo != null)), získáte název obrázku z vlastnosti obrázku FileName . Když uživatel nahraje obrázek, FileName obsahuje původní jméno uživatele, které obsahuje cestu z počítače uživatele. Může to vypadat takto:

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

Ale nechcete mít všechny informace o této cestě – potřebujete jenom skutečný název souboru (SamplePhoto1.jpg). Soubor můžete z cesty vysunout pomocí Path.GetFileName metody , například takto:
```
Path.GetFileName(photo.FileName)
```
Potom vytvoříte nový jedinečný název souboru přidáním identifikátoru GUID k původnímu názvu. (Další informace o identifikátorech GUID najdete v části Informace o identifikátorech GUID dále v tomto článku.) Pak vytvoříte úplnou cestu, kterou můžete použít k uložení image. Cesta k uložení se skládá z nového názvu souboru, složky (obrázků) a aktuálního umístění webu.

Poznámka

Aby mohl kód ukládat soubory do složky images , potřebuje aplikace pro danou složku oprávnění ke čtení i zápisu. Na vývojovém počítači to obvykle není problém. Když ale publikujete web na webový server poskytovatele hostingu, možná budete muset tato oprávnění explicitně nastavit. Pokud tento kód spustíte na serveru poskytovatele hostingu a dojde k chybám, obraťte se na poskytovatele hostingu a zjistěte, jak tato oprávnění nastavit.

Nakonec předáte cestu uložení metodě Save pomocné rutiny WebImage . Tím se nahraný obrázek uloží pod svým novým názvem. Metoda save vypadá takto: photo.Save(@"~\" + imagePath). Úplná cesta se připojí k @"~\", což je aktuální umístění webu. (Informace o operátoru najdete v ~ tématu Úvod do webového programování ASP.NET pomocí syntaxe Razor.)

Stejně jako v předchozím příkladu obsahuje <img> tělo stránky prvek pro zobrazení obrázku. Pokud imagePath byl nastaven, <img> element je vykreslen a jeho src atribut je nastaven na imagePath hodnotu.
Spusťte stránku v prohlížeči.
Nahrajte obrázek a ujistěte se, že je zobrazený na stránce.
Na svém webu otevřete složku images . Uvidíte, že byl přidán nový soubor, jehož název vypadá přibližně takto:

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

Toto je obrázek, který jste nahráli s identifikátorem GUID s předponou názvu. (Váš vlastní soubor bude mít jiný identifikátor GUID a pravděpodobně bude mít jiný název než MyPhoto.png.)

Tip

O identifikátorech GUID

Identifikátor GUID (globálně jedinečné ID) je identifikátor, který se obvykle vykresluje v tomto formátu: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Čísla a písmena (od A do F) se pro každý identifikátor GUID liší, ale všechna se řídí vzorem použití skupin o 8-4-4-4-12 znaků. (Technicky vzato je identifikátor GUID 16-bajtové nebo 128bitové číslo.) Pokud potřebujete identifikátor GUID, můžete volat specializovaný kód, který za vás vygeneruje identifikátor GUID. Ideou identifikátorů GUID je, že mezi obrovskou velikostí čísla (3,4 x 10³⁸) a algoritmem pro jeho generování je výsledné číslo prakticky zaručeno, že bude jedním svého druhu. Identifikátory GUID jsou proto dobrým způsobem, jak generovat názvy věcí, když musíte zaručit, že nebudete používat stejný název dvakrát. Nevýhodou samozřejmě je, že identifikátory GUID nejsou uživatelsky přívětivé, takže se obvykle používají, když se název používá jenom v kódu.

Změna velikosti obrázku

Pokud váš web přijímá obrázky od uživatele, můžete před jejich zobrazením nebo uložením změnit jejich velikost. K tomu můžete znovu použít WebImage pomocnou rutinu.

Tento postup ukazuje, jak změnit velikost nahraného obrázku tak, aby se vytvořila miniatura a pak miniatura a původní obrázek uložily na web. Zobrazíte miniaturu na stránce a pomocí hypertextového odkazu přesměrujete uživatele na obrázek v plné velikosti.

[Snímek obrazovky se stránkou Miniatura obrázku.]

Přidejte novou stránku s názvem Thumbnail.cshtml.
Ve složce images vytvořte podsložku s názvem thumbs.
Nahraďte existující obsah na stránce následujícím kódem:
```
@{  
    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>
```
Tento kód je podobný kódu z předchozího příkladu. Rozdíl je v tom, že tento kód uloží obrázek dvakrát, jednou normálně a jednou po vytvoření miniatury obrázku. Nejprve získáte nahraný obrázek a uložíte ho do složky images . Pak vytvoříte novou cestu k obrázku miniatury. Pokud chcete skutečně vytvořit miniaturu, zavoláte metodu WebImage pomocníka Resize , která vytvoří obrázek o rozměrech 60 pixelů a 60 pixelů. Příklad ukazuje, jak zachováte poměr stran a jak můžete zabránit zvětšení obrázku (pro případ, že by nová velikost skutečně zvětšila obrázek). Obrázek se změněnou velikostí se pak uloží do podsložky thumbs .

Na konci revize použijete stejný <img> element s dynamickým src atributem, který jste viděli v předchozích příkladech, abyste podmíněně zobrazili obrázek. V tomto případě zobrazíte miniaturu. Prvek také použijete <a> k vytvoření hypertextového odkazu na velkou verzi image. Stejně jako u src atributu elementu <img> nastavíte href atribut elementu <a> dynamicky na to, co je v imagePath. Abyste měli jistotu, že cesta může fungovat jako adresa URL, předáte imagePathHtml.AttributeEncode do metody, která převede rezervované znaky v cestě na znaky, které jsou v adrese URL v pořádku.
Spusťte stránku v prohlížeči.
Nahrajte fotku a ověřte, že je zobrazená miniatura.
Kliknutím na miniaturu zobrazíte obrázek v plné velikosti.
V obrázcích a obrázcích/palcích si všimněte, že byly přidány nové soubory.

Otáčení a převrácení obrázku

Pomocník WebImage také umožňuje překlopit a otáčet obrázky. Tento postup ukazuje, jak získat obrázek ze serveru, překlopit ho vzhůru nohama (svisle), uložit ho a pak překlopit obrázek na stránce. V tomto příkladu používáte jenom soubor, který už na serveru máte (Photo2.jpg). Ve skutečné aplikaci byste pravděpodobně překlopili obrázek, jehož název dostanete dynamicky, jako jste to udělali v předchozích příkladech.

[Snímek obrazovky ukazuje stránku Překlopit obrázek svisle.]

Přidejte novou stránku s názvem FlipImage.cshtml.
Nahraďte existující obsah na stránce následujícím kódem:
```
@{  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>
```
Kód použije pomocnou rutinu WebImage k získání image ze serveru. Cestu k imagi vytvoříte stejným způsobem, jaký jste použili v předchozích příkladech pro ukládání imagí, a tuto cestu předáte při vytváření image pomocí WebImage:
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
Pokud se obrázek najde, vytvoříte novou cestu a název souboru, jako jste to udělali v předchozích příkladech. Pokud chcete obrázek překlopit, zavolejte metodu FlipVertical a pak obrázek znovu uložte.

Obrázek se znovu zobrazí na stránce pomocí elementu <img> s atributem nastaveným src na imagePath.
Spusťte stránku v prohlížeči. Obrázek proPhoto2.jpg se zobrazí vzhůru nohama.
Aktualizujte stránku nebo ji znovu požádejte, aby se obrázek znovu převrátil doprava nahoru.

Pokud chcete obrázek otočit, použijte stejný kód s tím rozdílem, že místo volání FlipVertical nebo FlipHorizontalvoláte RotateLeftRotateRightnebo .

Přidání vodoznaku k obrázku

Když na web přidáte obrázky, můžete k němu přidat vodoznak, než ho uložíte nebo zobrazíte na stránce. Lidé vodoznaky často používají k přidání informací o autorských právech k obrázku nebo k inzerování názvu firmy.

[Snímek obrazovky ukazuje stránku Přidání vodoznaku na obrázek.]

Přidejte novou stránku s názvem Watermark.cshtml.
Nahraďte existující obsah na stránce následujícím kódem:
```
@{  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>
```
Tento kód se podobá kódu na stránce FlipImage.cshtml z předchozích verzí (i když tentokrát používá souborPhoto3.jpg ). Vodoznak přidáte tak, že před uložením obrázku WebImage zavoláte metodu pomocníka AddTextWatermark . Ve volání AddTextWatermarkpředáte text "Můj vodoznak", nastavíte barvu písma na žlutou a rodinu písem nastavíte na Arial. (I když se tady nezobrazuje, WebImage pomocník vám také umožňuje určit neprůhlednost, rodinu a velikost písma a umístění textu vodoznaku.) Když obrázek uložíte, nesmí být jen pro čtení.

Jak jste už viděli, obrázek se na stránce zobrazí pomocí elementu <img> s atributem src nastaveným na @imagePath.
Spusťte stránku v prohlížeči. Všimněte si textu "Můj vodoznak" v pravém dolním rohu obrázku.

Použití obrázku jako vodoznaku

Místo použití textu pro vodoznak můžete použít jiný obrázek. Lidé někdy jako vodoznak použít obrázky, jako je logo společnosti, nebo místo textu pro informace o autorských právech používají obrázek vodoznaku.

[Snímek obrazovky ukazuje stránku Použití obrázku jako vodoznaku.]

Přidejte novou stránku s názvem ImageWatermark.cshtml.
Do složky images přidejte obrázek, který můžete použít jako logo, a přejmenujte ho MyCompanyLogo.jpg. Měl by to být obrázek, který můžete jasně vidět, když je nastavený na šířku 80 pixelů a výšku 20 pixelů.
Nahraďte existující obsah na stránce následujícím kódem:
```
@{  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>
```
Toto je další varianta kódu z předchozích příkladů. V takovém případě zavoláte AddImageWatermark a před uložením obrázku přidáte obrázek vodoznaku do cílového obrázku (Photo3.jpg). Při volání AddImageWatermarknastavíte jeho šířku na 80 pixelů a výšku na 20 pixelů. ObrázekMyCompanyLogo.jpg je vodorovně zarovnán na střed a svisle v dolní části cílového obrázku. Neprůhlednost je nastavená na 100 % a odsazení je nastavené na 10 pixelů. Pokud je obrázek vodoznaku větší než cílový obrázek, nic se nestane. Pokud je obrázek vodoznaku větší než cílový obrázek a nastavíte odsazení vodoznaku obrázku na nulu, vodoznak se ignoruje.

Stejně jako předtím zobrazíte obrázek pomocí elementu <img> a dynamického src atributu.
Spusťte stránku v prohlížeči. Všimněte si, že obrázek vodoznaku se zobrazí v dolní části hlavního obrázku.

Další materiály

Práce se soubory na webu ASP.NET webových stránek

Úvod do programování ASP.NET webových stránek pomocí syntaxe Razor

Práce s obrázky na webu ASP.NET Web Pages (Razor)

Verze softwaru použité v kurzu

Dynamické přidání obrázku na webovou stránku

Nahrání obrázku

O identifikátorech GUID

Změna velikosti obrázku

Otáčení a převrácení obrázku

Přidání vodoznaku k obrázku

Použití obrázku jako vodoznaku

Další materiály

Váš názor

Váš názor

Další materiály