Praca z obrazami w witrynie ASP.NET Web Pages (Razor)

Artykuł
07/13/2023

W tym artykule przedstawiono sposób dodawania, wyświetlania i manipulowania obrazami (zmienianie rozmiaru, przerzucanie i dodawanie znaków wodnych) w witrynie internetowej ASP.NET Web Pages (Razor).

Zawartość:

Jak dynamicznie dodać obraz do strony.

Jak umożliwić użytkownikom przekazywanie obrazu.

Jak zmienić rozmiar obrazu.

Jak przerzucać lub obracać obraz.

Jak dodać znak wodny do obrazu.

Jak używać obrazu jako znaku wodnego.

Oto ASP.NET funkcje programowania wprowadzone w artykule:

Pomocnik WebImage .

Obiekt Path , który udostępnia metody, które umożliwiają manipulowanie ścieżką i nazwami plików.

Wersje oprogramowania używane w samouczku

ASP.NET Web Pages (Razor) 2

WebMatrix 2

Ten samouczek działa również z programem WebMatrix 3.

Dynamiczne dodawanie obrazu do strony internetowej

Obrazy można dodawać do witryny internetowej i do poszczególnych stron podczas tworzenia witryny internetowej. Możesz również zezwolić użytkownikom na przekazywanie obrazów, co może być przydatne w przypadku zadań, takich jak dodawanie zdjęcia profilu.

Jeśli obraz jest już dostępny w witrynie i chcesz go wyświetlić na stronie, użyj elementu HTML <img> w następujący sposób:

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

Czasami jednak musisz mieć możliwość dynamicznego wyświetlania obrazów — to znaczy, że nie wiesz, jaki obraz ma być wyświetlany, dopóki strona nie zostanie uruchomiona.

Procedura w tej sekcji przedstawia sposób wyświetlania obrazu na bieżąco, w którym użytkownicy określają nazwę pliku obrazu z listy nazw obrazów. Wybierają nazwę obrazu z listy rozwijanej, a po przesłaniu strony zostanie wyświetlony wybrany obraz.

[Zrzut ekranu przedstawia obraz wyświetlany po wybraniu z listy rozwijanej.]

W programie WebMatrix utwórz nową witrynę internetową.
Dodaj nową stronę o nazwie DynamicImage.cshtml.
W folderze głównym witryny internetowej dodaj nowy folder i nadaj mu nazwę images.
Dodaj cztery obrazy do właśnie utworzonego folderu images . (Wszystkie obrazy, które masz przydatne, zrobią, ale powinny one mieścić się na stronie). Zmień nazwę obrazów Photo1.jpg, Photo2.jpg, Photo3.jpgi Photo4.jpg. (Nie użyjesz Photo4.jpg w tej procedurze, ale użyjesz jej w dalszej części artykułu).
Sprawdź, czy cztery obrazy nie są oznaczone jako tylko do odczytu.
Zastąp istniejącą zawartość na stronie następującymi elementami:
```
@{  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>
```
Treść strony zawiera listę rozwijaną ( <select> element) o nazwie photoChoice. Lista ma trzy opcje, a value atrybut każdej opcji listy ma nazwę jednego z obrazów umieszczonych w folderze images . Zasadniczo lista umożliwia użytkownikowi wybranie przyjaznej nazwy, takiej jak "Zdjęcie 1", a następnie przekazanie nazwy pliku.jpg po przesłaniu strony.

W kodzie możesz pobrać wybór użytkownika (innymi słowy nazwę pliku obrazu) z listy, czytając tekst Request["photoChoice"]. Najpierw zobaczysz, czy w ogóle istnieje wybór. Jeśli istnieje, należy utworzyć ścieżkę obrazu, która składa się z nazwy folderu dla obrazów i nazwy pliku obrazu użytkownika. (Jeśli próbowano skonstruować ścieżkę, ale nie było nic w Request["photoChoice"]pliku , zostanie wyświetlony błąd). Spowoduje to wyświetlenie ścieżki względnej w następujący sposób:

images/Photo1.jpg

Ścieżka jest przechowywana w zmiennej o nazwie imagePath , która będzie potrzebna później na stronie.

W treści znajduje się również <img> element używany do wyświetlania obrazu wybranego przez użytkownika. Atrybut src nie jest ustawiony na nazwę pliku ani adres URL, tak jak w przypadku wyświetlania elementu statycznego. Zamiast tego jest ona ustawiona na @imagePathwartość , co oznacza, że pobiera jej wartość ze ścieżki ustawionej w kodzie.

Przy pierwszym uruchomieniu strony nie ma jednak obrazu do wyświetlenia, ponieważ użytkownik nie wybrał żadnych elementów. Zwykle oznaczałoby to, że src atrybut będzie pusty, a obraz będzie wyświetlany jako czerwony "x" (lub cokolwiek jest renderowane przez przeglądarkę, gdy nie może znaleźć obrazu). Aby temu zapobiec, należy umieścić <img> element w if bloku, który sprawdza, czy zmienna imagePath ma coś w nim. Jeśli użytkownik dokonał wyboru, imagePath zawiera ścieżkę. Jeśli użytkownik nie wybrał obrazu lub jeśli jest to pierwszy raz, gdy zostanie wyświetlona strona, <img> element nie jest nawet renderowany.
Zapisz plik i uruchom stronę w przeglądarce. (Przed uruchomieniem strony upewnij się, że strona została wybrana w obszarze roboczym Pliki ).
Wybierz obraz z listy rozwijanej, a następnie kliknij pozycję Przykładowy obraz. Upewnij się, że są widoczne różne obrazy dla różnych opcji.

Przekazywanie obrazu

W poprzednim przykładzie pokazano, jak dynamicznie wyświetlać obraz, ale pracował tylko z obrazami, które były już w witrynie internetowej. Ta procedura pokazuje, jak umożliwić użytkownikom przekazywanie obrazu, który jest następnie wyświetlany na stronie. W ASP.NET możesz manipulować obrazami na bieżąco przy użyciu WebImage pomocnika, który zawiera metody, które umożliwiają tworzenie, manipulowanie i zapisywanie obrazów. Pomocnik WebImage obsługuje wszystkie typowe typy plików obrazów internetowych, w tym .jpg, .pngi .bmp. W tym artykule użyjesz .jpg obrazów, ale możesz użyć dowolnego typu obrazu.

[Zrzut ekranu przedstawia stronę Przekazywanie obrazu.]

Dodaj nową stronę i nadaj jej nazwę UploadImage.cshtml.
Zastąp istniejącą zawartość na stronie następującymi elementami:
```
@{  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>
```
Treść tekstu ma <input type="file"> element, który umożliwia użytkownikom wybranie pliku do przekazania. Po kliknięciu przycisku Prześlij plik zostanie przesłany wraz z formularzem.

Aby pobrać przekazany obraz, użyj WebImage pomocnika, który ma różnego rodzaju przydatne metody pracy z obrazami. W szczególności służy WebImage.GetImageFromRequest do pobierania przekazanego obrazu (jeśli istnieje) i przechowywania go w zmiennej o nazwie photo.

Wiele prac w tym przykładzie obejmuje pobieranie i ustawianie nazw plików i ścieżek. Problem polega na tym, że chcesz uzyskać nazwę (i tylko nazwę) obrazu przekazanego przez użytkownika, a następnie utworzyć nową ścieżkę do miejsca przechowywania obrazu. Ponieważ użytkownicy mogą potencjalnie przekazać wiele obrazów o tej samej nazwie, należy użyć nieco dodatkowego kodu, aby utworzyć unikatowe nazwy i upewnić się, że użytkownicy nie zastępują istniejących obrazów.

Jeśli obraz został przekazany (test if (photo != null)), otrzymasz nazwę obrazu z właściwości obrazu FileName . Gdy użytkownik przekaże obraz, FileName zawiera oryginalną nazwę użytkownika, która zawiera ścieżkę z komputera użytkownika. Może to wyglądać następująco:

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

Nie potrzebujesz jednak wszystkich tych informacji o ścieżce — po prostu potrzebujesz rzeczywistej nazwy pliku (SamplePhoto1.jpg). Możesz usunąć tylko plik ze ścieżki przy użyciu Path.GetFileName metody , w następujący sposób:
```
Path.GetFileName(photo.FileName)
```
Następnie utworzysz nową unikatową nazwę pliku, dodając identyfikator GUID do oryginalnej nazwy. (Aby uzyskać więcej informacji na temat identyfikatorów GUID, zobacz Informacje o identyfikatorach GUID w dalszej części tego artykułu). Następnie utworzysz pełną ścieżkę, której można użyć do zapisania obrazu. Ścieżka zapisu składa się z nowej nazwy pliku, folderu (obrazów) i bieżącej lokalizacji witryny internetowej.

Uwaga

Aby kod zapisywał pliki w folderze images , aplikacja musi mieć uprawnienia do odczytu i zapisu dla tego folderu. Na komputerze dewelopera zazwyczaj nie jest to problem. Jednak po opublikowaniu witryny na serwerze sieci Web dostawcy hostingu może być konieczne jawne ustawienie tych uprawnień. Jeśli uruchomisz ten kod na serwerze dostawcy hostingu i wystąpią błędy, zapoznaj się z dostawcą hostingu, aby dowiedzieć się, jak ustawić te uprawnienia.

Na koniec przekazujesz ścieżkę zapisywania do Save metody WebImage pomocnika. Spowoduje to zapisanie przekazanego obrazu pod nową nazwą. Metoda save wygląda następująco: photo.Save(@"~\" + imagePath). Pełna ścieżka jest dołączana do @"~\"elementu , który jest bieżącą lokalizacją witryny internetowej. (Aby uzyskać informacje na temat ~ operatora, zobacz Wprowadzenie do ASP.NET programowania internetowego przy użyciu składni Razor).

Podobnie jak w poprzednim przykładzie treść strony zawiera <img> element do wyświetlenia obrazu. Jeśli imagePath został ustawiony, element jest renderowany, <img> a jego src atrybut jest ustawiony na imagePath wartość.
Uruchom stronę w przeglądarce.
Przekaż obraz i upewnij się, że jest on wyświetlany na stronie.
W witrynie otwórz folder images . Zobaczysz, że dodano nowy plik, którego nazwa pliku wygląda następująco:

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

Jest to obraz przekazany z prefiksem GUID do nazwy. (Twój własny plik będzie miał inny identyfikator GUID i prawdopodobnie nosi nazwę inną niż MyPhoto.png).

Porada

Informacje o identyfikatorach GUID

Identyfikator GUID (globalnie unikatowy identyfikator) to identyfikator, który jest zwykle renderowany w formacie w następujący sposób: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Liczby i litery (od A-F) różnią się dla każdego identyfikatora GUID, ale wszystkie są zgodne ze wzorcem używania grup 8-4-4-4-12 znaków. (Technicznie identyfikator GUID jest liczbą 16-bajtową/128-bitową). Gdy potrzebujesz identyfikatora GUID, możesz wywołać wyspecjalizowany kod, który generuje identyfikator GUID. Ideą identyfikatorów GUID jest to, że między ogromną liczbą (3,4 x 10³⁸) a algorytmem generowania go, wynikowa liczba jest praktycznie gwarantowana jako jedna z nich. W związku z tym identyfikatory GUID są dobrym sposobem generowania nazw dla elementów, gdy musisz zagwarantować, że nie będziesz używać tej samej nazwy dwa razy. Wadą jest oczywiście to, że identyfikatory GUID nie są szczególnie przyjazne dla użytkownika, więc zwykle są używane, gdy nazwa jest używana tylko w kodzie.

Zmiana rozmiaru obrazu

Jeśli witryna internetowa akceptuje obrazy od użytkownika, możesz zmienić rozmiar obrazów przed ich wyświetleniem lub zapisaniem. W tym celu możesz ponownie użyć WebImage pomocnika.

W tej procedurze pokazano, jak zmienić rozmiar przekazanego obrazu w celu utworzenia miniatury, a następnie zapisać miniaturę i oryginalny obraz w witrynie internetowej. Miniaturę można wyświetlić na stronie i użyć hiperlinku, aby przekierować użytkowników do obrazu o pełnym rozmiarze.

[Zrzut ekranu przedstawia stronę Miniatura obrazu.]

Dodaj nową stronę o nazwie Thumbnail.cshtml.
W folderze images utwórz podfolder o nazwie thumbs.
Zastąp istniejącą zawartość na stronie następującymi elementami:
```
@{  
    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>
```
Ten kod jest podobny do kodu z poprzedniego przykładu. Różnica polega na tym, że ten kod zapisuje obraz dwa razy, raz normalnie i raz po utworzeniu kopii miniatury obrazu. Najpierw uzyskasz przekazany obraz i zapisz go w folderze images . Następnie utworzysz nową ścieżkę dla obrazu miniatury. Aby utworzyć miniaturę, wywołaj WebImage metodę pomocnika Resize , aby utworzyć obraz o rozmiarze 60 pikseli przez 60 pikseli. W przykładzie pokazano, jak zachować współczynnik proporcji i jak można zapobiec powiększaniu obrazu (w przypadku, gdy nowy rozmiar rzeczywiście zwiększy obraz). Obraz o zmienionym rozmiarze jest następnie zapisywany w podfolderze kciuków .

Na końcu znaczników użyjesz tego samego <img> elementu z atrybutem dynamicznym src , który został wyświetlony w poprzednich przykładach, aby warunkowo pokazać obraz. W takim przypadku zostanie wyświetlona miniatura. Element służy <a> również do tworzenia hiperlinku do dużej wersji obrazu. Podobnie jak w przypadku src atrybutu <img> elementu, należy ustawić href atrybut elementu <a> dynamicznie na dowolny element w imagePath. Aby upewnić się, że ścieżka może działać jako adres URL, należy przekazać imagePath do Html.AttributeEncode metody , która konwertuje zastrzeżone znaki w ścieżce na znaki, które są w porządku w adresie URL.
Uruchom stronę w przeglądarce.
Przekaż zdjęcie i sprawdź, czy miniatura jest wyświetlana.
Kliknij miniaturę, aby wyświetlić obraz o pełnym rozmiarze.
W obrazach i obrazach/kciukach należy pamiętać, że dodano nowe pliki.

Obracanie i przerzucanie obrazu

Pomocnik WebImage umożliwia również przerzucanie i obracanie obrazów. Ta procedura pokazuje, jak pobrać obraz z serwera, przerzucić obraz do góry nogami (pionowo), zapisać go, a następnie wyświetlić przerzucany obraz na stronie. W tym przykładzie używasz tylko pliku, który już istnieje na serwerze (Photo2.jpg). W rzeczywistej aplikacji prawdopodobnie przerzucasz obraz, którego nazwa jest uzyskiwana dynamicznie, tak jak w poprzednich przykładach.

[Zrzut ekranu przedstawia stronę Flip Image Vertical (Przerzucanie obrazu w pionie).]

Dodaj nową stronę o nazwie FlipImage.cshtml.
Zastąp istniejącą zawartość na stronie następującymi elementami:
```
@{  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>
```
Kod używa WebImage pomocnika do pobrania obrazu z serwera. Ścieżka do obrazu jest tworzona przy użyciu tej samej techniki, która była używana we wcześniejszych przykładach do zapisywania obrazów, i przekazujesz tę ścieżkę podczas tworzenia obrazu przy użyciu polecenia WebImage:
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
Jeśli zostanie znaleziony obraz, skonstruujesz nową ścieżkę i nazwę pliku, tak jak w poprzednich przykładach. Aby przerzucić obraz, wywołasz metodę FlipVertical , a następnie zapiszesz obraz ponownie.

Obraz jest ponownie wyświetlany na stronie przy użyciu <img> elementu z atrybutem ustawionym src na imagePath.
Uruchom stronę w przeglądarce. Obraz Photo2.jpgjest wyświetlany do góry nogami.
Odśwież stronę lub ponownie zażądaj strony, aby zobaczyć, że obraz jest ponownie przerzucany w prawo.

Aby obrócić obraz, należy użyć tego samego kodu, z tą różnicą, że zamiast wywoływać metodę lub , należy wywołać metodę FlipVerticalRotateLeft lub RotateRight.FlipHorizontal

Dodawanie znaku wodnego do obrazu

Podczas dodawania obrazów do witryny internetowej warto dodać znak wodny do obrazu przed zapisaniem go lub wyświetleniem go na stronie. Osoby często używać znaków wodnych do dodawania informacji o prawach autorskich do obrazu lub anonsowania ich nazwy biznesowej.

[Zrzut ekranu przedstawia stronę Dodawanie znaku wodnego do obrazu.]

Dodaj nową stronę o nazwie Watermark.cshtml.
Zastąp istniejącą zawartość na stronie następującymi elementami:
```
@{  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>
```
Ten kod jest podobny do kodu na stronie FlipImage.cshtml z wcześniejszej strony (chociaż tym razem używa pliku Photo3.jpg ). Aby dodać znak wodny, przed zapisaniem obrazu należy wywołać WebImage metodę pomocnika AddTextWatermark . W wywołaniu metody AddTextWatermarkprzekażesz tekst "Mój znak wodny", ustawisz kolor czcionki na żółty i ustawisz rodzinę czcionek na Arial. (Chociaż nie jest on tutaj wyświetlany, WebImage pomocnik umożliwia również określenie nieprzezroczystości, rodziny czcionek i rozmiaru czcionki oraz położenia tekstu znaku wodnego). Podczas zapisywania obrazu nie może on być tylko do odczytu.

Jak pokazano wcześniej, obraz jest wyświetlany na stronie przy użyciu <img> elementu z atrybutem src ustawionym na @imagePathwartość .
Uruchom stronę w przeglądarce. Zwróć uwagę na tekst "Mój znak wodny" w prawym dolnym rogu obrazu.

Używanie obrazu jako znaku wodnego

Zamiast używać tekstu dla znaku wodnego, możesz użyć innego obrazu. Osoby czasami używać obrazów, takich jak logo firmy jako znak wodny, lub używają obrazu znaku wodnego zamiast tekstu do informacji o prawach autorskich.

[Zrzut ekranu przedstawia stronę Używanie obrazu jako znaku wodnego.]

Dodaj nową stronę o nazwie ImageWatermark.cshtml.
Dodaj obraz do folderu images , którego możesz użyć jako logo, i zmień nazwę obrazu MyCompanyLogo.jpg. Ten obraz powinien być obrazem, który można wyraźnie zobaczyć, gdy jest ustawiony na 80 pikseli szerokości i 20 pikseli wysokości.
Zastąp istniejącą zawartość na stronie następującymi elementami:
```
@{  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>
```
Jest to kolejna odmiana kodu z wcześniejszych przykładów. W tym przypadku przed zapisaniem obrazu należy wywołać AddImageWatermark metodę , aby dodać obraz limitu do obrazu docelowego (Photo3.jpg). Po wywołaniu metody AddImageWatermarkustawiasz jej szerokość na 80 pikseli, a wysokość na 20 pikseli. Obraz MyCompanyLogo.jpg jest wyrównany w poziomie do środka i wyrównany w pionie u dołu obrazu docelowego. Nieprzezroczystość jest ustawiona na 100%, a wypełnienie ma wartość 10 pikseli. Jeśli obraz limitu jest większy niż obraz docelowy, nic się nie stanie. Jeśli obraz limitu jest większy niż obraz docelowy i ustawisz dopełnienie dla znaku wodnego na zero, znak wodny jest ignorowany.

Tak jak poprzednio, obraz jest wyświetlany przy użyciu <img> elementu i atrybutu dynamicznego src .
Uruchom stronę w przeglądarce. Zwróć uwagę, że obraz znaku wodnego jest wyświetlany w dolnej części obrazu głównego.

Dodatkowe zasoby

Praca z plikami w witrynie ASP.NET Web Pages

Wprowadzenie do ASP.NET programowania stron internetowych przy użyciu składni Razor

Udostępnij za pośrednictwem

Praca z obrazami w witrynie ASP.NET Web Pages (Razor)

Wersje oprogramowania używane w samouczku

Dynamiczne dodawanie obrazu do strony internetowej

Przekazywanie obrazu

Informacje o identyfikatorach GUID

Zmiana rozmiaru obrazu

Obracanie i przerzucanie obrazu

Dodawanie znaku wodnego do obrazu

Używanie obrazu jako znaku wodnego

Dodatkowe zasoby

Opinia

Dodatkowe zasoby