Aracılığıyla paylaş

ASP.NET Web Sayfaları (Razor) Sitesinde Resimlerle Çalışma

  • Makale

yazan: Tom FitzMacken

Bu makalede, ASP.NET Web Sayfaları (Razor) web sitesinde resimleri ekleme, görüntüleme ve işleme (filigranları yeniden boyutlandırma, çevirme ve ekleme) gösterilmektedir.

Öğrenecekleriniz:

  • Sayfaya dinamik olarak resim ekleme.
  • Kullanıcıların görüntü yüklemesine izin verme.
  • Resmi yeniden boyutlandırma.
  • Resmi çevirme veya döndürme.
  • Resme filigran ekleme.
  • Resmi filigran olarak kullanma.

Makalede tanıtılan ASP.NET programlama özellikleri şunlardır:

  • Yardımcı WebImage .
  • Yol Path ve dosya adlarını işlemenize olanak tanıyan yöntemler sağlayan nesnesi.

Öğreticide kullanılan yazılım sürümleri

  • ASP.NET Web Sayfaları (Razor) 2
  • WebMatrix 2

Bu öğretici, WebMatrix 3 ile de çalışır.

Web Sayfasına Dinamik Olarak Görüntü Ekleme

Web sitesini geliştirirken web sitenize ve tek tek sayfalara resim ekleyebilirsiniz. Ayrıca kullanıcıların resim yüklemesine izin vererek profil fotoğrafı eklemelerine izin verme gibi görevler için yararlı olabilir.

Sitenizde zaten bir görüntü varsa ve yalnızca bir sayfada görüntülemek istiyorsanız, aşağıdakine benzer bir HTML <img> öğesi kullanırsınız:

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

Ancak bazen resimleri dinamik olarak görüntüleyebilmelisiniz; başka bir deyişle, sayfa çalışana kadar hangi görüntünün görüntüleneceğini bilemeyebilirsiniz.

Bu bölümdeki yordamda, kullanıcıların görüntü adları listesinden görüntü dosyası adını belirttiği anında bir görüntünün nasıl görüntüleneceği gösterilmektedir. Açılan listeden resmin adını seçer ve sayfayı gönderdiklerinde seçtikleri resim görüntülenir.

[Açılan listeden seçildikten sonra görüntülenen görüntüyü gösteren ekran görüntüsü.]

  1. WebMatrix'te yeni bir web sitesi oluşturun.

  2. DynamicImage.cshtml adlı yeni bir sayfa ekleyin.

  3. Web sitesinin kök klasörüne yeni bir klasör ekleyin ve bunu görüntüler olarak adlandırın.

  4. Yeni oluşturduğunuz images klasörüne dört resim ekleyin. (Kullanışlı olan tüm resimler işe yarar, ancak bunlar bir sayfaya sığmalıdır.) ,Photo2.jpg, Photo3.jpgve Photo4.jpgPhoto1.jpggörüntüleri yeniden adlandırın. (Bu yordamda Photo4.jpg kullanmayacaksınız, ancak makalenin ilerleyen bölümlerinde kullanacaksınız.)

  5. Dört görüntünün salt okunur olarak işaretlenmediğini doğrulayın.

  6. Sayfadaki mevcut içeriği aşağıdakilerle değiştirin:

    @{  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>

    Sayfanın gövdesinde adlı photoChoicebir açılan liste (öğe<select>) vardır. Listede üç seçenek vardır ve value her liste seçeneğinin özniteliği images klasörüne yerleştirdiğiniz görüntülerden birinin adına sahiptir. Temelde, liste kullanıcının "Fotoğraf 1" gibi kolay bir ad seçmesine olanak tanır ve sayfa gönderildiğinde .jpg dosya adını geçirir.

    Kodda, okuyarak Request["photoChoice"]kullanıcının seçimini (başka bir deyişle resim dosyası adı) listeden alabilirsiniz. Öncelikle bir seçim olup olmadığını görürsünüz. Varsa, görüntü için görüntülerin klasörünün adından ve kullanıcının resim dosyası adından oluşan bir yol oluşturursunuz. (Bir yol oluşturmayı denediyseniz ancak içinde Request["photoChoice"]hiçbir şey yoksa hata alırsınız.) Bunun sonucunda şuna benzer göreli bir yol elde edin:

    görüntüler/Photo1.jpg

    Yol, sayfanın ilerleyen bölümlerinde ihtiyacınız olacak adlı imagePath değişkende depolanır.

    Gövdede, kullanıcının seçtiği görüntüyü görüntülemek için kullanılan bir <img> öğe de vardır. src Özniteliği, statik bir öğeyi görüntülemek için yaptığınız gibi bir dosya adına veya URL'ye ayarlanmadı. Bunun yerine olarak ayarlanır @imagePath, yani değerini kodda ayarladığınız yoldan alır.

    Ancak sayfa ilk kez çalıştırıldığında, kullanıcı hiçbir şey seçmediğinden görüntülenecek görüntü yoktur. Bu normalde özniteliğin src boş olacağı ve görüntünün kırmızı bir "x" olarak gösterileceği anlamına gelir (veya tarayıcı görüntü bulamadıklarında her ne işleyecekse). Bunu önlemek için öğesini, değişkenin <img> içinde herhangi bir şey olup olmadığını görmek üzere test eden bir if bloğuna imagePath yerleştirirsiniz. Kullanıcı bir seçim yaptıysa, imagePath yolu içerir. Kullanıcı bir görüntü seçmediyse veya sayfa ilk kez görüntüleniyorsa, <img> öğe işlenmez.

  7. Dosyayı kaydedin ve sayfayı tarayıcıda çalıştırın. (Sayfayı çalıştırmadan önce Dosyalar çalışma alanında seçili olduğundan emin olun.)

  8. Açılan listeden bir resim seçin ve Örnek Görüntü'ye tıklayın. Farklı seçenekler için farklı görüntüler gördüğünüzden emin olun.

Görüntü Karşıya Yükleme

Önceki örnekte, bir görüntünün dinamik olarak nasıl görüntüleneceği gösterildi, ancak yalnızca web sitenizde bulunan görüntülerle çalıştı. Bu yordamda, kullanıcıların bir görüntüyü karşıya yüklemesine nasıl izin verileceği gösterilir ve bu görüntü daha sonra sayfada görüntülenir. ASP.NET'da, görüntüleri oluşturmanıza, işlemenize ve kaydetmenize olanak tanıyan yöntemlere sahip yardımcıyı kullanarak WebImage görüntüleri anında işleyebilirsiniz. Yardımcı, WebImage.jpg,.png ve .bmpdahil olmak üzere tüm yaygın web görüntüsü dosya türlerini destekler. Bu makale boyunca .jpg görüntü kullanacaksınız, ancak görüntü türlerinden herhangi birini kullanabilirsiniz.

[Görüntü Karşıya Yükle sayfasını gösteren ekran görüntüsü.]

  1. Yeni bir sayfa ekleyin ve uploadImage.cshtml olarak adlandırnın.

  2. Sayfadaki mevcut içeriği aşağıdakilerle değiştirin:

    @{  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>

    Metnin gövdesinde, kullanıcıların karşıya yüklenecek dosyayı <input type="file"> seçmesine olanak tanıyan bir öğesi vardır. Gönder'e tıkladığında, seçtikleri dosya formla birlikte gönderilir.

    Karşıya yüklenen görüntüyü almak için, görüntülerle çalışmak için her türlü yararlı yönteme sahip olan yardımcıyı kullanırsınız WebImage . Özellikle, karşıya yüklenen görüntüyü (varsa) almak ve adlı photobir değişkende depolamak için kullanırsınızWebImage.GetImageFromRequest.

    Bu örnekteki çalışmanın çoğu dosya ve yol adlarını alma ve ayarlamayı içerir. Sorun, kullanıcının karşıya yüklediği görüntünün adını (ve yalnızca adını) almak ve ardından görüntüyü depoladığınız yer için yeni bir yol oluşturmak istemenizdir. Kullanıcılar aynı ada sahip birden çok görüntüyü karşıya yükleyebileceğinden, benzersiz adlar oluşturmak ve kullanıcıların mevcut resimlerin üzerine yazmadığından emin olmak için biraz ek kod kullanırsınız.

    Bir görüntü gerçekten karşıya yüklenmişse (test if (photo != null)), görüntünün özelliğinden FileName görüntü adını alırsınız. Kullanıcı görüntüyü karşıya yüklediğinde, FileName kullanıcının bilgisayarındaki yolu içeren özgün adını içerir. Şu şekilde görünebilir:

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

    Ancak tüm bu yol bilgilerini istemiyorsunuz; yalnızca gerçek dosya adını (SamplePhoto1.jpg) istiyorsunuz. yöntemini kullanarak Path.GetFileName bir yoldan yalnızca dosyayı çıkarabilirsiniz, örneğin:

    Path.GetFileName(photo.FileName)

    Ardından, özgün ada bir GUID ekleyerek yeni bir benzersiz dosya adı oluşturursunuz. (GUID'ler hakkında daha fazla bilgi için bu makalenin devamında yer alan GUID'ler hakkında bölümüne bakın.) Ardından, görüntüyü kaydetmek için kullanabileceğiniz tam bir yol oluşturursunuz. Kaydetme yolu yeni dosya adından, klasörden (görüntüler) ve geçerli web sitesinin konumundan oluşur.

    Not

    Kodunuzun images klasörüne dosya kaydetmesi için uygulamanın bu klasör için okuma-yazma izinlerine sahip olması gerekir. Geliştirme bilgisayarınızda bu genellikle bir sorun değildir. Ancak, sitenizi bir barındırma sağlayıcısının web sunucusunda yayımladığınızda, bu izinleri açıkça ayarlamanız gerekebilir. Bu kodu bir barındırma sağlayıcısının sunucusunda çalıştırır ve hata alırsanız, bu izinleri nasıl ayarlayabileceğinizi öğrenmek için barındırma sağlayıcısına başvurun.

    Son olarak, yardımcının yöntemine SaveWebImage kaydetme yolunu geçirirsiniz. Bu, karşıya yüklenen görüntüyü yeni adı altında depolar. Kaydetme yöntemi şöyle görünür: photo.Save(@"~\" + imagePath). Tam yol, geçerli web sitesi konumu olan öğesine eklenir @"~\". (İşleç ~ hakkında daha fazla bilgi için bkz. Razor Söz Dizimini Kullanarak ASP.NET Web Programlamaya Giriş.)

    Önceki örnekte olduğu gibi, sayfanın gövdesinde görüntüyü görüntülemek için bir <img> öğe bulunur. ayarlandıysa imagePath , <img> öğesi işlenir ve src özniteliği değere imagePath ayarlanır.

  3. Sayfayı tarayıcıda çalıştırın.

  4. Bir görüntüyü karşıya yükleyin ve sayfada görüntülendiğinden emin olun.

  5. Sitenizde images klasörünü açın. Dosya adı şu şekilde görünen yeni bir dosya eklendiğini görürsünüz:

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

    Bu, adına bir GUID ön eki eklenerek karşıya yüklediğiniz görüntüdür. (Kendi dosyanız farklı bir GUID'ye sahip olur ve büyük olasılıkla MyPhoto.pngfarklı bir adla adlandırılır.)

İpucu

GUID'ler hakkında

GUID (genel olarak benzersiz kimlik), genellikle şöyle bir biçimde işlenen bir tanımlayıcıdır: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Sayılar ve harfler (A-F'den) her GUID için farklılık gösterir, ancak hepsi 8-4-4-4-4-12 karakterlik grupları kullanma desenini izler. (Teknik olarak, GUID 16 bayt/128 bit sayıdır.) GUID'ye ihtiyacınız olduğunda, sizin için bir GUID oluşturan özel kod çağırabilirsiniz. GUID'lerin ardındaki fikir, sayının muazzam boyutu (3,4 x 1038) ile bunu oluşturma algoritması arasında elde edilen sayının bir tür olması neredeyse garanti edilir. Bu nedenle GUID'ler, aynı adı iki kez kullanmayabileceğinizi garanti etmeniz gerektiğinde öğeler için ad oluşturmanın iyi bir yoludur. Dezavantajı, guid'lerin özellikle kullanıcı dostu olmadığından ad yalnızca kodda kullanıldığında kullanılma eğilimindedir.

Görüntüyü Yeniden Boyutlandırma

Web siteniz bir kullanıcının görüntülerini kabul ederse, görüntülemeden veya kaydetmeden önce resimleri yeniden boyutlandırmak isteyebilirsiniz. Bunun için yardımcıyı WebImage yeniden kullanabilirsiniz.

Bu yordam, karşıya yüklenen bir görüntüyü yeniden boyutlandırarak küçük resim oluşturmayı ve ardından küçük resmi ve özgün görüntüyü web sitesine kaydetmeyi gösterir. Küçük resmi sayfada görüntüler ve kullanıcıları tam boyutlu resme yönlendirmek için bir köprü kullanırsınız.

[Küçük Resim Görüntüsü sayfasını gösteren ekran görüntüsü.]

  1. Thumbnail.cshtml adlı yeni bir sayfa ekleyin.

  2. images klasöründe thumbs adlı bir alt klasör oluşturun.

  3. Sayfadaki mevcut içeriği aşağıdakilerle değiştirin:

    @{  
    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>

    Bu kod, önceki örnekteki koda benzer. Aradaki fark, bu kodun resmi normal bir şekilde ve siz resmin küçük resim kopyasını oluşturduktan sonra iki kez kaydetmesidir. İlk olarak karşıya yüklenen görüntüyü alır ve görüntüler klasörüne kaydedersiniz. Ardından küçük resim görüntüsü için yeni bir yol oluşturursunuz. Küçük resmi oluşturmak için yardımcının WebImageResize yöntemini çağırarak 60 piksele 60 piksellik bir görüntü oluşturursunuz. Örnekte en boy oranını nasıl koruduğunuz ve görüntünün büyütülmesini nasıl önleyebileceğiniz gösterilmektedir (yeni boyutun görüntüyü büyütme olasılığına karşı). Yeniden boyutlandırılan görüntü daha sonra başparmak alt klasörüne kaydedilir.

    İşaretlemeyi tamamladığınızda, görüntüyü koşullu olarak göstermek için önceki örneklerde gördüğünüz dinamik src öznitelikle aynı <img> öğeyi kullanırsınız. Bu durumda küçük resmi görüntülersiniz. Görüntünün büyük sürümüne köprü oluşturmak için de bir <a> öğe kullanırsınız. öğesinin src özniteliğinde <img> olduğu gibi öğesinin href özniteliğini <a> içinde imagePatholan öğeye dinamik olarak ayarlarsınız. Yolun URL olarak çalışabilmesini sağlamak için, yoldaki Html.AttributeEncode ayrılmış karakterleri URL'de tamam olan karakterlere dönüştüren yöntemine geçirirsinizimagePath.

  4. Sayfayı tarayıcıda çalıştırın.

  5. Bir fotoğraf yükleyin ve küçük resmin gösterildiğini doğrulayın.

  6. Tam boyutlu görüntüyü görmek için küçük resme tıklayın.

  7. Görüntülerde ve görüntülerde/başparmaklarda yeni dosyaların eklendiğine dikkat edin.

Resmi Döndürme ve Çevirme

Yardımcı WebImage ayrıca resimleri çevirmenize ve döndürmenize de olanak tanır. Bu yordam, sunucudan görüntü almayı, görüntüyü baş aşağı çevirmeyi (dikey olarak) çevirmeyi, kaydetmeyi ve ardından çevrilmiş görüntüyü sayfada görüntülemeyi gösterir. Bu örnekte, sunucuda zaten sahip olduğunuz bir dosyayı kullanıyorsunuz (Photo2.jpg). Gerçek bir uygulamada, önceki örneklerde yaptığınız gibi adını dinamik olarak aldığınız bir görüntüyü büyük olasılıkla çevirirsiniz.

[Görüntüyü Dikey Çevir sayfasını gösteren ekran görüntüsü.]

  1. FlipImage.cshtml adlı yeni bir sayfa ekleyin.

  2. Sayfadaki mevcut içeriği aşağıdakilerle değiştirin:

    @{  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, sunucudan WebImage görüntü almak için yardımcıyı kullanır. Görüntü kaydetmek için önceki örneklerde kullandığınız tekniği kullanarak görüntünün yolunu oluşturur ve kullanarak WebImagebir görüntü oluşturduğunuzda bu yolu geçirirsiniz:

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

    Bir görüntü bulunursa, önceki örneklerde yaptığınız gibi yeni bir yol ve dosya adı oluşturursunuz. Görüntüyü çevirmek için yöntemini çağırıp FlipVertical görüntüyü yeniden kaydedersiniz.

    Görüntü, özniteliği olarak ayarlanmış imagePathöğesi src kullanılarak <img> sayfada yeniden görüntülenir.

  3. Sayfayı tarayıcıda çalıştırın. Photo2.jpg resmi baş aşağı gösterilir.

  4. Sayfayı yenileyin veya resmin yeniden sağ tarafa çevrildiğini görmek için sayfayı yeniden isteyin.

Bir görüntüyü döndürmek için, veya çağrısı FlipVertical yapmak yerine veya FlipHorizontalRotateRightçağrısı yapmak yerine aynı kodu kullanırsınızRotateLeft.

Resme Filigran Ekleme

Web sitenize resim eklediğinizde, kaydetmeden veya sayfada görüntülemeden önce resme filigran eklemek isteyebilirsiniz. Kişiler bir resme telif hakkı bilgileri eklemek veya iş adlarını tanıtmak için filigranları genellikle kullanır.

[Görüntüye Filigran Ekleme sayfasını gösteren ekran görüntüsü.]

  1. Watermark.cshtml adlı yeni bir sayfa ekleyin.

  2. Sayfadaki mevcut içeriği aşağıdakilerle değiştirin:

    @{  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>

    Bu kod, daha önceki FlipImage.cshtml sayfasındaki kod gibidir (ancak bu kez Photo3.jpg dosyasını kullanır). Filigranı eklemek için, görüntüyü kaydetmeden önce yardımcının WebImageAddTextWatermark yöntemini çağırırsınız. çağrısında AddTextWatermark"Filigranım" metnini geçirir, yazı tipi rengini sarıya ayarlar ve yazı tipi ailesini Arial olarak ayarlarsınız. (Burada gösterilmese de, WebImage yardımcı opaklık, yazı tipi ailesi ve yazı tipi boyutu ile filigran metninin konumunu belirtmenize de olanak tanır.) Görüntüyü kaydettiğinizde salt okunur olmamalıdır.

    Daha önce gördüğünüz gibi, src özniteliği olarak ayarlanmış @imagePathöğesi kullanılarak <img> görüntü sayfada görüntülenir.

  3. Sayfayı tarayıcıda çalıştırın. Resmin sağ alt köşesindeki "Filigranım" metnine dikkat edin.

Resmi Filigran Olarak Kullanma

Filigran için metin kullanmak yerine başka bir resim kullanabilirsiniz. Kişiler bazen filigran olarak şirket logosu gibi resimler veya telif hakkı bilgileri için metin yerine filigran resmi kullanırlar.

[Ekran görüntüsü, Filigran Olarak Resim Kullanma sayfasını gösterir.]

  1. ImageWatermark.cshtml adlı yeni bir sayfa ekleyin.

  2. Logo olarak kullanabileceğiniz images klasörüne bir resim ekleyin ve MyCompanyLogo.jpgresmi yeniden adlandırın. Bu resim, 80 piksel genişliğinde ve 20 piksel yüksekliğinde ayarlandığında net bir şekilde görebileceğiniz bir görüntü olmalıdır.

  3. Sayfadaki mevcut içeriği aşağıdakilerle değiştirin:

    @{  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>

    Bu, önceki örneklerden koddaki başka bir çeşitlemedir. Bu durumda, resmi kaydetmeden önce filigran resmini hedef resme (Photo3.jpg) eklemek için çağrısında AddImageWatermark bulunursunuz. çağrısı AddImageWatermarkyaptığınızda, genişliğini 80 piksel, yüksekliği 20 piksel olarak ayarlarsınız. MyCompanyLogo.jpg görüntüsü yatay olarak ortaya ve dikey olarak hedef görüntünün altına hizalanır. Opaklık %100 ve doldurma 10 piksel olarak ayarlanır. Filigran resmi hedef görüntüden büyükse hiçbir şey olmaz. Filigran resmi hedef görüntüden büyükse ve resim filigranı için doldurmayı sıfır olarak ayarlarsanız, filigran yoksayılır.

    Daha önce olduğu gibi, öğesini ve dinamik src özniteliğini <img> kullanarak görüntüyü görüntüleyebilirsiniz.

  4. Sayfayı tarayıcıda çalıştırın. Filigran resminin ana görüntünün en altında göründüğüne dikkat edin.

Ek Kaynaklar

ASP.NET Web Sayfaları Sitesindeki Dosyalarla Çalışma

Razor Söz Dizimini Kullanarak ASP.NET Web Sayfaları Programlamaya Giriş