Arbeiten mit Bildern auf einer ASP.NET Web Pages(Razor)-Website

Artikel
07/13/2023

In diesem Artikel erfahren Sie, wie Sie Bilder auf einer ASP.NET Web Pages -Website (Razor) hinzufügen, anzeigen und bearbeiten (Ändern der Größe, Umdrehung und Hinzufügen von Wasserzeichen).

Sie lernen Folgendes:

Dynamisches Hinzufügen eines Bilds zu einer Seite

So können Benutzer ein Bild hochladen.

So ändern Sie die Größe eines Bilds.

So wird ein Bild gedreht oder gedreht.

So fügen Sie einem Bild ein Wasserzeichen hinzu.

Verwenden eines Bilds als Wasserzeichen

Dies sind die ASP.NET Programmierfeatures, die im Artikel vorgestellt werden:

Das WebImage Hilfsprogramm.

Das Path -Objekt, das Methoden bereitstellt, mit denen Sie Pfad- und Dateinamen bearbeiten können.

Im Tutorial verwendete Softwareversionen

ASP.NET Web Pages (Razor) 2

WebMatrix 2

Dieses Tutorial funktioniert auch mit WebMatrix 3.

Dynamisches Hinzufügen eines Bilds zu einer Webseite

Sie können Bilder zu Ihrer Website und zu einzelnen Seiten hinzufügen, während Sie die Website entwickeln. Sie können Benutzern auch das Hochladen von Bildern ermöglichen, was für Aufgaben wie das Hinzufügen einer Profilfoto nützlich sein kann.

Wenn ein Bild bereits auf Ihrer Website verfügbar ist und Sie es nur auf einer Seite anzeigen möchten, verwenden Sie ein HTML-Element <img> wie folgt:

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

Manchmal müssen Sie Bilder jedoch dynamisch anzeigen können. Das heißt, Sie wissen nicht, welches Bild angezeigt werden soll, bis die Seite ausgeführt wird.

Die Prozedur in diesem Abschnitt zeigt, wie Sie ein Bild im Betrieb anzeigen, bei dem Benutzer den Imagedateinamen aus einer Liste von Bildnamen angeben. Sie wählen den Namen des Bilds aus einer Dropdownliste aus, und wenn sie die Seite übermitteln, wird das ausgewählte Bild angezeigt.

[Screenshot zeigt ein Bild, das nach der Auswahl aus einer Dropdownliste angezeigt wird.]

Erstellen Sie in WebMatrix eine neue Website.
Fügen Sie eine neue Seite namens DynamicImage.cshtml hinzu.
Fügen Sie im Stammordner der Website einen neuen Ordner hinzu, und nennen Sie ihn Images.
Fügen Sie dem soeben erstellten Images-Ordner vier Images hinzu. (Alle Bilder, die Sie zur Hand haben, tun es, aber sie sollten auf eine Seite passen.) Benennen Sie die Bilder Photo1.jpg, Photo2.jpg, Photo3.jpgund Photo4.jpgum. (Sie verwenden Photo4.jpg in diesem Verfahren nicht, aber Sie verwenden es weiter unten im Artikel.)
Stellen Sie sicher, dass die vier Bilder nicht als schreibgeschützt gekennzeichnet sind.
Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:
```
@{  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>
```
Der Text der Seite enthält eine Dropdownliste (ein <select> Element) mit dem Namen photoChoice. Die Liste verfügt über drei Optionen, und das value Attribut jeder Listenoption hat den Namen eines der Bilder, die Sie im Ordner images abgelegt haben. Im Wesentlichen ermöglicht die Liste dem Benutzer die Auswahl eines Anzeigenamens wie "Foto 1" und übergibt dann den .jpg Dateinamen, wenn die Seite übermittelt wird.

Im Code können Sie die Auswahl des Benutzers (d. h. den Namen der Bilddatei) aus der Liste abrufen, indem Sie lesen Request["photoChoice"]. Sie sehen zunächst, ob überhaupt eine Auswahl vorhanden ist. Falls vorhanden, erstellen Sie einen Pfad für das Image, der aus dem Namen des Ordners für die Bilder und dem Namen der Imagedatei des Benutzers besteht. (Wenn Sie versucht haben, einen Pfad zu erstellen, aber nichts in Request["photoChoice"]war, erhalten Sie eine Fehlermeldung.) Dies ergibt einen relativen Pfad wie folgt:

images/Photo1.jpg

Der Pfad wird in einer Variablen mit dem Namen imagePath gespeichert, die Sie später auf der Seite benötigen.

Im Textkörper befindet sich auch ein <img> Element, das verwendet wird, um das vom Benutzer ausgewählte Bild anzuzeigen. Das src Attribut ist nicht auf einen Dateinamen oder eine URL festgelegt, wie Sie dies tun würden, um ein statisches Element anzuzeigen. Stattdessen ist es auf @imagePathfestgelegt, was bedeutet, dass es seinen Wert aus dem Pfad erhält, den Sie im Code festgelegt haben.

Wenn die Seite zum ersten Mal ausgeführt wird, wird jedoch kein Bild angezeigt, da der Benutzer nichts ausgewählt hat. Dies würde normalerweise bedeuten, dass das src Attribut leer ist und das Bild als rotes "x" angezeigt würde (oder was auch immer der Browser rendert, wenn ein Bild nicht gefunden werden kann). Um dies zu verhindern, fügen Sie das <img> Element in einen Block ein if , der testet, um zu sehen, ob die imagePath Variable etwas enthält. Wenn der Benutzer eine Auswahl getroffen hat, imagePath enthält den Pfad. Wenn der Benutzer kein Bild ausgewählt hat oder die Seite zum ersten Mal angezeigt wird, wird das <img> Element nicht einmal gerendert.
Speichern Sie die Datei, und führen Sie die Seite in einem Browser aus. (Stellen Sie sicher, dass die Seite im Arbeitsbereich Dateien ausgewählt ist , bevor Sie sie ausführen.)
Wählen Sie in der Dropdownliste ein Bild aus, und klicken Sie dann auf Beispielbild. Stellen Sie sicher, dass unterschiedliche Bilder für unterschiedliche Optionen angezeigt werden.

Hochladen eines Bilds

Im vorherigen Beispiel haben Sie gezeigt, wie Sie ein Bild dynamisch anzeigen, aber es funktionierte nur mit Bildern, die sich bereits auf Ihrer Website befanden. In diesem Verfahren wird gezeigt, wie Benutzer ein Bild hochladen können, das dann auf der Seite angezeigt wird. In ASP.NET können Sie Bilder mit dem WebImage Hilfsprogramm bearbeiten, das über Methoden verfügt, mit denen Sie Bilder erstellen, bearbeiten und speichern können. Das WebImage Hilfsprogramm unterstützt alle gängigen Webimagedateitypen, einschließlich .jpg, .pngund .bmp. In diesem Artikel verwenden Sie .jpg Bilder, aber Sie können jeden der Bildtypen verwenden.

[Screenshot: Seite

Fügen Sie eine neue Seite hinzu, und nennen Sie sie UploadImage.cshtml.
Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:
```
@{  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>
```
Der Textkörper verfügt über ein <input type="file"> Element, mit dem Benutzer eine Datei auswählen können, die hochgeladen werden soll. Wenn sie auf Senden klicken, wird die ausgewählte Datei zusammen mit dem Formular übermittelt.

Um das hochgeladene Bild abzurufen, verwenden Sie das WebImage Hilfsprogramm, das über alle möglichen nützlichen Methoden zum Arbeiten mit Bildern verfügt. Insbesondere verwenden WebImage.GetImageFromRequest Sie, um das hochgeladene Bild (falls vorhanden) abzurufen und in einer Variablen mit dem Namen photozu speichern.

Ein Großteil der Arbeit in diesem Beispiel umfasst das Abrufen und Festlegen von Datei- und Pfadnamen. Das Problem besteht darin, dass Sie den Namen (und nur den Namen) des vom Benutzer hochgeladenen Images abrufen und dann einen neuen Pfad für den Speicherort des Images erstellen möchten. Da Benutzer möglicherweise mehrere Bilder mit demselben Namen hochladen können, verwenden Sie ein wenig zusätzlichen Code, um eindeutige Namen zu erstellen und sicherzustellen, dass Benutzer vorhandene Bilder nicht überschreiben.

Wenn ein Bild tatsächlich hochgeladen wurde (der Test if (photo != null)), erhalten Sie den Bildnamen aus der Eigenschaft des Bilds FileName . Wenn der Benutzer das Bild hochlädt, FileName enthält er den ursprünglichen Namen des Benutzers, der den Pfad vom Computer des Benutzers enthält. Dies kann etwa so aussehen:

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

Sie möchten jedoch nicht alle Pfadinformationen – Sie möchten nur den tatsächlichen Dateinamen (SamplePhoto1.jpg). Sie können nur die Datei aus einem Pfad entfernen, indem Sie die Path.GetFileName -Methode verwenden, wie folgt:
```
Path.GetFileName(photo.FileName)
```
Anschließend erstellen Sie einen neuen eindeutigen Dateinamen, indem Sie dem ursprünglichen Namen eine GUID hinzufügen. (Weitere Informationen zu GUIDs finden Sie weiter unten in diesem Artikel unter Informationen zu GUIDs .) Anschließend erstellen Sie einen vollständigen Pfad, mit dem Sie das Image speichern können. Der Speicherpfad besteht aus dem neuen Dateinamen, dem Ordner (Bildern) und dem aktuellen Websitespeicherort.

Hinweis

Damit Ihr Code Dateien im Ordner images speichern kann, benötigt die Anwendung Lese-/Schreibberechtigungen für diesen Ordner. Auf Ihrem Entwicklungscomputer ist dies in der Regel kein Problem. Wenn Sie Ihre Website jedoch auf dem Webserver eines Hostinganbieters veröffentlichen, müssen Sie diese Berechtigungen möglicherweise explizit festlegen. Wenn Sie diesen Code auf dem Server eines Hostinganbieters ausführen und Fehler erhalten, wenden Sie sich an den Hostinganbieter, um zu erfahren, wie diese Berechtigungen festgelegt werden.

Schließlich übergeben Sie den Speicherpfad an die Save Methode des WebImage Hilfsprogramm. Dadurch wird das hochgeladene Bild unter dem neuen Namen gespeichert. Die Save-Methode sieht wie folgt aus: photo.Save(@"~\" + imagePath). Der vollständige Pfad wird an angefügt, wobei es sich um @"~\"den aktuellen Standort der Website handelt. (Informationen zum ~ Operator finden Sie unter Einführung in ASP.NET Webprogrammierung mithilfe der Razor-Syntax.)

Wie im vorherigen Beispiel enthält der Text der Seite ein <img> Element zum Anzeigen des Bilds. Wenn imagePath festgelegt wurde, wird das <img> Element gerendert und sein src Attribut auf den imagePath Wert festgelegt.
Führen Sie die Seite in einem Browser aus.
Laden Sie ein Bild hoch, und stellen Sie sicher, dass es auf der Seite angezeigt wird.
Öffnen Sie auf Ihrer Website den Ordner images . Sie sehen, dass eine neue Datei hinzugefügt wurde, deren Dateiname etwa wie folgt aussieht:

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

Dies ist das Bild, das Sie mit einer GUID hochgeladen haben, die dem Namen vorangestellt ist. (Ihre eigene Datei weist eine andere GUID auf und heißt wahrscheinlich etwas anderes als MyPhoto.png.)

Tipp

Informationen zu GUIDs

Eine GUID (globally unique ID) ist ein Bezeichner, der normalerweise in einem Format wie diesem gerendert wird: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Die Zahlen und Buchstaben (von A-F) unterscheiden sich für jede GUID, aber sie folgen alle dem Muster der Verwendung von Gruppen mit 8-4-4-4-4-12 Zeichen. (Technisch gesehen ist eine GUID eine 16-Byte/128-Bit-Zahl.) Wenn Sie eine GUID benötigen, können Sie spezialisierten Code aufrufen, der eine GUID für Sie generiert. Die Idee hinter GUIDs ist, dass zwischen der enormen Größe der Zahl (3,4 x 10³⁸) und dem Algorithmus für ihre Generierung die resultierende Zahl praktisch garantiert einzigartig ist. GUIDs sind daher eine gute Möglichkeit, Namen für Dinge zu generieren, wenn Sie sicherstellen müssen, dass Sie denselben Namen nicht zweimal verwenden. Der Nachteil ist natürlich, dass GUIDs nicht besonders benutzerfreundlich sind, sodass sie in der Regel verwendet werden, wenn der Name nur im Code verwendet wird.

Größenänderungen bei Bildern

Wenn Ihre Website Bilder von einem Benutzer akzeptiert, sollten Sie die Größe der Bilder ändern, bevor Sie sie anzeigen oder speichern. Hierfür können Sie erneut das WebImage Hilfsprogramm verwenden.

In diesem Verfahren wird gezeigt, wie Sie die Größe eines hochgeladenen Bilds ändern, um eine Miniaturansicht zu erstellen und dann die Miniaturansicht und das Originalbild auf der Website zu speichern. Sie zeigen die Miniaturansicht auf der Seite an und verwenden einen Link, um Benutzer auf das bild in voller Größe umzuleiten.

[Screenshot: Seite

Fügen Sie eine neue Seite namens Thumbnail.cshtml hinzu.
Erstellen Sie im Ordner images einen Unterordner namens thumbs.
Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:
```
@{  
    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>
```
Dieser Code ähnelt dem Code aus dem vorherigen Beispiel. Der Unterschied besteht darin, dass dieser Code das Bild zweimal speichert, einmal normal und einmal, nachdem Sie eine Miniaturansicht des Bilds erstellt haben. Zuerst erhalten Sie das hochgeladene Bild und speichern es im Ordner images . Anschließend erstellen Sie einen neuen Pfad für das Miniaturbild. Um die Miniaturansicht tatsächlich zu erstellen, rufen Sie die Methode des WebImage Hilfsprogrammes Resize auf, um ein Bild mit 60 x 60 Pixel zu erstellen. Das Beispiel zeigt, wie Sie das Seitenverhältnis beibehalten und verhindern können, dass das Bild vergrößert wird (falls die neue Größe das Bild tatsächlich vergrößern würde). Das geänderte Bild wird dann im Unterordner thumbs gespeichert.

Am Ende des Markups verwenden Sie dasselbe <img> Element mit dem dynamischen src Attribut, das Sie in den vorherigen Beispielen gesehen haben, um das Bild bedingt anzuzeigen. In diesem Fall zeigen Sie die Miniaturansicht an. Sie verwenden auch ein <a> -Element, um einen Link zur großen Version des Images zu erstellen. Wie beim src -Attribut des <img> -Elements legen Sie das href Attribut des -Elements dynamisch auf das <a> in imagePathfest. Um sicherzustellen, dass der Pfad als URL funktionieren kann, übergeben imagePath Sie an die Html.AttributeEncode -Methode, die reservierte Zeichen im Pfad in Zeichen konvertiert, die in einer URL in Ordnung sind.
Führen Sie die Seite in einem Browser aus.
Laden Sie ein Foto hoch, und überprüfen Sie, ob die Miniaturansicht angezeigt wird.
Klicken Sie auf die Miniaturansicht, um das Bild in voller Größe anzuzeigen.
Beachten Sie in den Bildernund Bildern/Daumen, dass neue Dateien hinzugefügt wurden.

Drehen und Spiegeln eines Bilds

Mit WebImage dem Hilfsprogramm können Sie auch Bilder drehen und drehen. In diesem Verfahren wird gezeigt, wie Sie ein Bild vom Server abrufen, das Bild auf den Kopf stellen (vertikal), speichern und dann das gedrehte Bild auf der Seite anzeigen. In diesem Beispiel verwenden Sie nur eine Datei, die Bereits auf dem Server vorhanden ist (Photo2.jpg). In einer realen Anwendung würden Sie wahrscheinlich ein Bild, dessen Name Sie dynamisch erhalten, wie in früheren Beispielen.

[Screenshot: Seite

Fügen Sie eine neue Seite mit dem Namen FlipImage.cshtml hinzu.
Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:
```
@{  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>
```
Der Code verwendet das WebImage Hilfsprogramm, um ein Image vom Server abzurufen. Sie erstellen den Pfad zum Image mit der gleichen Technik, die Sie in früheren Beispielen zum Speichern von Bildern verwendet haben, und übergeben diesen Pfad, wenn Sie ein Image mit WebImageerstellen:
```
WebImage photo = new WebImage(@"~\Images\Photo2.jpg");
```
Wenn ein Image gefunden wird, erstellen Sie wie in früheren Beispielen einen neuen Pfad und Dateinamen. Um das Bild umzudrehen, rufen Sie die FlipVertical -Methode auf, und speichern Sie das Bild dann erneut.

Das Bild wird erneut auf der Seite angezeigt, indem das <img> -Element mit dem src -Attribut auf imagePathfestgelegt ist.
Führen Sie die Seite in einem Browser aus. Das Bild für Photo2.jpg wird kopfüber angezeigt.
Aktualisieren Sie die Seite, oder fordern Sie die Seite erneut an, um zu sehen, dass das Bild wieder rechts nach oben gedreht wird.

Um ein Bild zu rotieren, verwenden Sie denselben Code, mit dem Unterschied, dass Sie nicht oder aufrufen FlipVerticalFlipHorizontal, sondern oder RotateRightaufrufenRotateLeft.

Hinzufügen eines Wasserzeichens zu einem Bild

Wenn Sie Ihrer Website Bilder hinzufügen, möchten Sie dem Bild möglicherweise ein Wasserzeichen hinzufügen, bevor Sie es speichern oder auf einer Seite anzeigen. Personen verwenden häufig Wasserzeichen, um einem Bild Urheberrechtsinformationen hinzuzufügen oder um ihren Geschäftsnamen zu bewerben.

[Screenshot zeigt die Seite Hinzufügen eines Wasserzeichens zu einem Bild.]

Fügen Sie eine neue Seite mit dem Namen Watermark.cshtml hinzu.
Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:
```
@{  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>
```
Dieser Code ähnelt dem Code auf der Seite FlipImage.cshtml von früher (obwohl dieses Mal die Photo3.jpg-Datei verwendet wird). Um das Wasserzeichen hinzuzufügen, rufen Sie die Methode des WebImage Hilfsprogrammes AddTextWatermark auf, bevor Sie das Bild speichern. Beim Aufruf von AddTextWatermarkübergeben Sie den Text "Mein Wasserzeichen", legen die Schriftfarbe auf Gelb fest und legen die Schriftfamilie auf Arial fest. (Obwohl es hier nicht angezeigt wird, können Sie mit dem WebImage Hilfsprogramm auch Deckkraft, Schriftfamilie und Schriftgrad sowie die Position des Wasserzeichentexts angeben.) Wenn Sie das Bild speichern, darf es nicht schreibgeschützt sein.

Wie Sie bereits gesehen haben, wird das Bild auf der Seite angezeigt, indem das <img> -Element mit dem src-Attribut auf @imagePathfestgelegt ist.
Führen Sie die Seite in einem Browser aus. Beachten Sie den Text "Mein Wasserzeichen" in der unteren rechten Ecke des Bilds.

Verwenden eines Bilds als Wasserzeichen

Anstatt Text für ein Wasserzeichen zu verwenden, können Sie ein anderes Bild verwenden. Personen verwenden manchmal Bilder wie ein Firmenlogo als Wasserzeichen, oder sie verwenden ein Wasserzeichenbild anstelle von Text für Urheberrechtsinformationen.

[Screenshot der Seite Verwenden eines Bilds als Wasserzeichen.]

Fügen Sie eine neue Seite mit dem Namen ImageWatermark.cshtml hinzu.
Fügen Sie dem Ordner images ein Bild hinzu, das Sie als Logo verwenden können, und benennen Sie das Bild MyCompanyLogo.jpgum. Dieses Bild sollte ein Bild sein, das Sie deutlich sehen können, wenn es auf 80 Pixel breit und 20 Pixel hoch festgelegt ist.
Ersetzen Sie den vorhandenen Inhalt auf der Seite durch Folgendes:
```
@{  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>
```
Dies ist eine weitere Variante des Codes aus früheren Beispielen. In diesem Fall rufen AddImageWatermark Sie auf, um das Wasserzeichenbild dem Zielbild (Photo3.jpg) hinzuzufügen, bevor Sie das Bild speichern. Wenn Sie aufrufen AddImageWatermark, legen Sie die Breite auf 80 Pixel und die Höhe auf 20 Pixel fest. Das MyCompanyLogo.jpg Bild ist horizontal in der Mitte ausgerichtet und vertikal am unteren Rand des Zielbilds ausgerichtet. Die Deckkraft ist auf 100 % und die Auffüllung auf 10 Pixel festgelegt. Wenn das Wasserzeichenbild größer als das Zielbild ist, geschieht nichts. Wenn das Wasserzeichenbild größer als das Zielbild ist und Sie die Füllung für das Bildwasserzeichen auf Null festlegen, wird das Wasserzeichen ignoriert.

Wie zuvor zeigen Sie das Bild mithilfe des <img> Elements und eines dynamischen src Attributs an.
Führen Sie die Seite in einem Browser aus. Beachten Sie, dass das Wasserzeichenbild am unteren Rand des Standard Bilds angezeigt wird.

Zusätzliche Ressourcen

Arbeiten mit Dateien in einer ASP.NET Web Pages Website

Einführung in die ASP.NET Web Pages Programmierung mithilfe der Razor-Syntax

Share via

Arbeiten mit Bildern auf einer ASP.NET Web Pages(Razor)-Website

Im Tutorial verwendete Softwareversionen

Dynamisches Hinzufügen eines Bilds zu einer Webseite

Hochladen eines Bilds

Informationen zu GUIDs

Größenänderungen bei Bildern

Drehen und Spiegeln eines Bilds

Hinzufügen eines Wasserzeichens zu einem Bild

Verwenden eines Bilds als Wasserzeichen

Zusätzliche Ressourcen

Feedback

Feedback

Zusätzliche Ressourcen