9 – Práce s obrázky

 
 

 

Tato kapitola ukazuje, jak přidat obrázky na web a zobrazit je a jak s nimi manipulovat (změnit jejich velikost, překlopit je nebo do nich přidat vodoznak).

Co se naučíte:

V této kapitole budou představeny následující funkce programování pomocí technologie ASP.NET:

 

 

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

Obrázky můžete přidávat na web a na jednotlivé stránky během vývoje webu. Můžete také uživatelům poskytnout možnost obrázky na server nahrávat, což může být užitečné pro takové úlohy, jako například přidání fotografie do profilu.

Pokud obrázek už je k dispozici na webu a vy ho pouze chcete zobrazit na stránce, můžete k tomu použít element <img> jazyka HTML například takto:

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

Někdy ale potřebujete být schopni zobrazit obrázky dynamicky – tedy pokud nevíte, jaký obrázek má být zobrazen, dokud stránka není spuštěna.

Postup uvedený v této části ukazuje, jak zobrazit obrázek v reálném čase poté, co uživatel název souboru obrázku vybere ze seznamu názvů obrázků. Uživatel vybere obrázek z rozevíracího seznamu a obrázek je zobrazen po odeslání stránky.

ch9images-1

  1. V prostředí WebMatrix vytvořte nový web.
  2. Přidejte novou stránku s názvem DynamicImage.cshtml.
  3. V kořenové složce webu přidejte novou složku s názvem images (obrázky).
  4. Do právě vytvořené složky images přidejte čtyři obrázky. (Můžete použít libovolné obrázky, které máte po ruce, ale musí se vejít na stránku.) Obrázky přejmenujte na Photo1.jpg, Photo2.jpg, Photo3.jpgPhoto4.jpg. (Obrázek Photo4.jpg v tomto postupu nepoužijeme, ale použijeme jej v další části této kapitoly.)
  5. Ověřte, zda tyto čtyři obrázky nejsou označeny pouze pro čtení.
  6. Nahraďte stávající kód značkovacího jazyka ve 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> 
              
            <input type="submit" value="Submit" /> 
        </div> 
        <div style="padding:10px;"> 
            @if(imagePath != ""){ 
                <img src="@imagePath" alt="Sample Image" width="300px" /> 
            } 
        </div> 
    </form> 
    </body> 
    </html>

    Tělo stránky obsahuje rozevírací seznam (element <select>) s názvem photoChoice (výběr fotografií). Seznam nabízí tři možnosti výběru a atribut value (hodnota) pro každou z nich obsahuje název jednoho z obrázků, které jste vložili do složky images (obrázky). Princip spočívá v tom, že seznam uživateli umožňuje vybrat uživatelsky přívětivý název, například Photo 1 (Fotografie 1), a při odeslání stránky je pak předán název souboru JPG.

    V kódu je možné získat výběr uživatele v seznamu (jinými slovy, název souboru obrázku) přečtením hodnoty Request["photoChoice"]. Nejdříve zjistíme, zda byl vůbec nějaký výběr proveden. Pokud ano, vytvoříme pro obrázek cestu sestávající z názvu složky s obrázky a z názvu souboru obrázku vybraného uživatelem. (Pokud byste se pokusili cestu sestavit, ale položka Request["photoChoice"] by nic neobsahovala, nastala by chyba.) Výsledkem je relativní cesta, která může vypadat například takto:

    images/Photo1.jpg

    Cesta je uložena v proměnné s názvem imagePath (cesta k obrázku), kterou budeme potřebovat v další části stránky.

    V těle se také nachází element <img>, pomocí něhož je zobrazen obrázek vybraný uživatelem. Atribut src není nastaven na název souboru ani na adresu URL, jak by tomu bylo u statického elementu. Místo toho je nastaven na výraz @imagePath, což znamená, že svou hodnotu získá z cesty nastavené v kódu.

    Při prvním spuštění stránky ale není pro zobrazení k dispozici žádný obrázek, protože uživatel zatím nic nevybral. To by běžně znamenalo, že atribut src by byl prázdný a obrázek by byl zobrazen jako červený křížek (nebo jiný symbol, který prohlížeč vykreslí v případě, že obrázek nemůže najít). Abychom tomu předešli, vložíme element <img> do bloku if, který testuje, zda proměnná imagePath (cesta k obrázku) obsahuje nějakou hodnotu. Pokud uživatel výběr provedl, proměnná imagePath obsahuje cestu. Pokud uživatel žádný obrázek nevybral nebo se jedná o první zobrazení stránky, element <img> není vůbec vykreslen.

  7. Soubor uložte a spusťte stránku v prohlížeči. (Před jejím spuštěním ověřte, zda je stránka vybrána v pracovním prostředí Files – Soubory.)

Nahrání obrázku

V předchozím příkladu jsme si ukázali, jak dynamicky zobrazit obrázek, ale v tomto příkladu jsme pracovali pouze s obrázky, které se již nacházely na webu. Tento postup ukazuje, jak uživatelům poskytnout možnost nahrát obrázek, který je poté zobrazen na stránce. ASP.NET umožňuje s obrázkem v reálném čase manipulovat s použitím pomocné třídy WebImage (Webový obrázek), která poskytuje metody umožňující obrázky vytvářet, manipulovat s nimi a ukládat je. Pomocná třída WebImage podporuje všechny běžné typy souborů webových obrázků, včetně souborů JPG, PNGBMP. Všude v této kapitole budeme používat obrázky JPG, ale můžete použít libovolný typ obrázků.

ch9images-2

  1. Přidejte novou stránku s názvem UploadImage.cshtml.
  2. Nahraďte stávající kód značkovacího jazyka ve 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>

    V těle textu se nachází element <input type="file">, pomocí něhož uživatel může vybrat soubor, který chce nahrát. Když uživatel klikne na tlačítko Submit (Odeslat), je vybraný soubor odeslán spolu s formulářem.

    Nahraný obrázek získáme s použitím pomocné třídy WebImage (Webový obrázek), která nabízí celou řadu užitečných metod pro práci s obrázky. Konkrétně použijeme metodu WebImage.GetImageFromRequest (Webový obrázek.Získat obrázek z požadavku), pomocí níž získáme nahraný obrázek (pokud je nějaký obrázek k dispozici) a uložíme jej do proměnné s názvem photo (fotografie).

    Velká část práce v tomto příkladu je spojena se získáním a nastavením názvu souboru a cesty. Problém spočívá v tom, že chceme získat název (a pouze název) obrázku nahraného uživatelem a poté vytvořit novou cestu k místu, kam se chystáme obrázek uložit. Protože uživatelé by případně mohli nahrát více obrázků se stejným názvem, s pomocí dalšího kódu vytvoříme jedinečné názvy a postaráme se o to, aby uživatelé nepřepsali stávající obrázky.

    Pokud byl obrázek skutečně nahrán (test if (photo != null)), získáme název obrázku z vlastnosti FileName (Název souboru) obrázku. Když uživatel nahraje obrázek, vlastnost FileName obsahuje uživatelův původní název včetně cesty v počítači uživatele. Může vypadat například takto:

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

    Všechny tyto informace o cestě ale nepotřebujeme — stačí nám jen samotný název souboru (SamplePhoto1.jpg). Vyjmout z cesty pouze soubor můžeme pomocí metody Path.GetFileName (Cesta.Získat název souboru), a sice takto:

    Path.GetFileName(photo.FileName)

    Poté vytvoříme nový jedinečný název souboru přidáním identifikátoru GUID k původnímu názvu. (Více informací o identifikátorech GUID získáte v další části této kapitoly O identifikátorech GUID.) Následně sestavíme úplnou cestu, kterou použijeme k uložení obrázku. Cestu pro uložení tvoří nový název souboru, složka (images) a aktuální umístění webu.

    Poznámka   Aby váš kód mohl ukládat soubory ve složce images (obrázky), aplikace pro tuto složku potřebuje oprávnění ke čtení a zápisu. V počítači používaném pro vývoj to obvykle není problém. Ale je možné, že když web publikujete na webovém serveru poskytovatele hostingových služeb, budete muset tato oprávnění speciálně nastavit. Pokud tento kód spouštíte na serveru poskytovatele hostingových služeb a dochází přitom k chybám, zjistěte si od poskytovatele hostingových služeb, jak tato oprávnění nastavit.

    Na závěr cestu pro uložení předáme metodě Save (Uložit) pomocné třídy WebImage (Webový obrázek). Tato metoda nahraný obrázek uloží pod novým názvem. Metoda pro uložení vypadá takto: photo.Save(@"~\" + imagePath). úplná cesta je přidána k výrazu @"~\", neboli k aktuálnímu umístění webu. (Více informací o operátoru ~ získáte v kapitole 2 – úvod do programování webů ASP.NET s použitím syntaxe Razor.)

    Stejně jako v předchozím příkladu tělo stránky obsahuje element <img> pro zobrazení obrázku. Pokud proměnná imagePath (cesta k obrázku) byla nastavena, element <img> je vykreslen a jeho atribut src je nastaven na hodnotu proměnné imagePath.

  3. Spusťte stránku v prohlížeči.

Změna velikosti obrázku

Když web přijme od uživatele obrázky, může být vhodné změnit velikost obrázků před jejich zobrazením nebo uložením. To lze opět provést s použitím pomocné třídy WebImage (Webový obrázek).

Tento postup ukazuje, jak změnit velikost nahraného obrázku za účelem vytvoření jeho miniatury a poté miniaturu uložit na webu spolu s původním obrázkem. Na stránce zobrazíme miniaturu a hypertextový odkaz přesměruje uživatele na obrázek v plné velikosti.

ch9images-3

  1. Přidejte novou stránku s názvem Thumbnail.cshtml.
  2. Ve složce images (obrázky) vytvořte podsložku s názvem thumbs (miniatury).
  3. Nahraďte stávající kód značkovacího jazyka ve 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 se podobá kódu z předchozího příkladu. Rozdíl spočívá v tom, že tento kód obrázek ukládá dvakrát – jednou normálně a jednou po vytvoření miniatury s kopií obrázku. Nejdříve získáme nahraný obrázek a uložíme ho do složky images (obrázky). Poté vytvoříme novou cestu pro miniaturu obrázku. K samotnému vytvoření miniatury použijeme volání metody Resize (Změnit velikost) pomocné třídy WebImage (Webový obrázek), která vytvoří obrázek o velikosti 60 × 60 pixelů. Tento příklad ukazuje, jak zachovat poměr stran a jak předejít zvětšení obrázku (v případě, že nová velikost by ve skutečnosti způsobila zvětšení obrázku). Obrázek se změněnou velikostí je poté uložen v podsložce thumbs (miniatury).

    Na konci kódu značkovacího jazyka použijeme stejný element <img> s dynamicky nastaveným atributem src, jaký byl v předchozích příkladech použit k podmíněnému zobrazení obrázku. Tentokrát pomocí něj zobrazíme miniaturu. Pomocí elementu <a> vytvoříme také hypertextový odkaz na větší verzi obrázku. Stejně jako u atributu src elementu <img> nastavíme atribut href elementu <a> dynamicky na hodnotu, která se nachází v proměnné imagePath (cesta k obrázku). Abychom měli jistotu, že cesta bude fungovat jako adresa URL, předáme proměnnou imagePath metodě Html.AttributeEncode (Html.Zakódovat atribut), pomocí níž převedeme vyhrazené znaky obsažené v cestě na znaky, které jsou v adrese URL přípustné.

  4. Spusťte stránku v prohlížeči.

Otočení a překlopení obrázku

Pomocná třída WebImage také umožňuje obrázky překlopit nebo otočit. Tento postup ukazuje, jak získat obrázek ze serveru, překlopit ho spodní stranou vzhůru (vertikálně), uložit jej a poté překlopený obrázek zobrazit na stránce. V tomto příkladu použijeme pouze soubor, který již je uložen na serveru (Photo2.jpg). Ve skutečné aplikaci bychom nejspíš překlápěli obrázek, jehož název jsme získali dynamicky, stejně jako tomu bylo v předchozích příkladech.

ch9images-4

  1. Přidejte novou stránku s názvem Flip.cshtml.
  2. Stávající kód značkovacího jazyka v souboru nahraďte 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 s použitím pomocné třídy WebImage získá obrázek ze serveru. Cestu k obrázku vytvoříme s použitím stejné techniky, jakou popisovaly předchozí příklady pro uložení obrázků, a předáme ji při vytvoření obrázku s použitím pomocné třídy WebImage:

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

    Pokud je obrázek nalezen, vytvoříme novou cestu a název souboru stejným způsobem jako v předchozích příkladech. Pro překlopení obrázku zavoláme metodu FlipVertical (Překlopit vertikálně) a poté obrázek opět uložíme.

    Obrázek je opět zobrazen na stránce pomocí elementu <img>, jehož atribut src je nastaven na hodnotu proměnné imagePath (cesta k obrázku).

  3. Spusťte stránku v prohlížeči. Obrázek Photo2.jpg je zobrazen překlopený spodní stranou vzhůru. Pokud si stránku vyžádáte ještě jednou, bude obrázek znovu překlopen správnou stranou vzhůru.

Pro otočení obrázku můžete použít stejný kód, pouze místo volání metody FlipVertical (Překlopit vertikálně) nebo FlipHorizontal (Překlopit horizontálně) budete volat metodu RotateLeft (Otočit doleva) nebo RotateRight (Otočit doprava).

Přidání vodoznaku do obrázku

Při přidávání obrázku na web může být vhodné před jeho uložením nebo zobrazením na stránce přidat do obrázku vodoznak. Vodoznak bývá často použit pro přidání informací o autorských právech nebo k propagaci názvu firmy.

ch9images-5

  1. Přidejte novou stránku s názvem Watermark.cshtml.
  2. Stávající kód značkovacího jazyka nahraďte 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 stránky Flip.cshtml z předchozí části, i když tentokrát používá soubor Photo3.jpg. Pro přidání vodoznaku pomocná třída WebImage (Webový obrázek) poskytuje metodu AddTextWatermark (Přidat textový vodoznak), kterou použijeme předtím, než je obrázek uložen. Při volání metody AddTextWatermark předáme text "My Watermark" ("Můj vodoznak"), nastavíme žlutou barvu písma a skupinu písem Arial. (I když to tento příklad neukazuje, pomocná třída WebImage umožňuje určit také průhlednost, rodinu a velikost písma nebo pozici textu vodoznaku.) Aby bylo obrázek možné uložit, nesmí být pouze ke čtení.

    Jak jste viděli již v předchozích příkladech, obrázek je na stránce zobrazen pomocí elementu <img>, jehož atribut src je nastaven pomocí kódu @imagePath (cesta k obrázku).

  3. Spusťte stránku v prohlížeči.

Použití obrázku jako vodoznaku

Místo textu je pro vodoznak možné použít jiný obrázek. Někdy jsou jako vodoznak používány obrázky jako například logo společnosti nebo je obrázek vodoznaku použit místo textu pro zobrazení informací o autorských právech.

ch9images-6

  1. Přidejte novou stránku s názvem ImageWatermark.cshtml.
  2. Do složky images (obrázky) přidejte obrázek, který je možné použít jako logo, a přejmenujte ho na MyCompanyLogo.jpg (Logo naší společnosti). Obrázek by měl být zřetelně vidět i při nastavení velikosti 80 pixelů na šířku a 20 pixelů na výšku.
  3. Stávající kód značkovacího jazyka nahraďte 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>

    Jde o další obměnu kódu z předchozích příkladů. V tomto případě voláme metodu AddImageWatermark (Přidat obrázek vodoznaku), abychom do cílového obrázku (Photo3.jpg) před jeho uložením přidali vodoznak. Při volání metody AddImageWatermark nastavíme jeho šířku na 80 pixelů a výšku na 20 pixelů. Obrázek MyCompanyLogo.jpg je v cílovém obrázku horizontálně zarovnán na střed a vertikálně je zarovnán dolů. Neprůhlednost je nastavena na hodnotu 100 % a odsazení je nastaveno na 10 pixelů. Pokud je obrázek vodoznaku větší než cílový obrázek, nic se nestane. Pokud je obrázek větší než cílový obrázek a odsazení obrázku vodoznaku nastavíte na hodnotu nula, bude vodoznak ignorován.

    Stejně jako dříve obrázek zobrazíme s použitím elementu <img> a dynamicky nastaveného atributu src.

  4. Spusťte stránku v prohlížeči.

Další materiály

Kapitola 8 – Práce se soubory

Referenční příručka pro webové stránky ASP.NET se syntaxí Razor