ASP.NET Web Pages (Razor) sitesindeki görüntülerle çalışmaWorking with Images in an ASP.NET Web Pages (Razor) Site

Tom FitzMacken tarafındanby Tom FitzMacken

Bu makalede, bir ASP.NET Web Pages (Razor) Web sitesinde görüntüleri ekleme, görüntüleme ve işleme (filigranları yeniden boyutlandırma, çevirme ve ekleme) gösterilmektedir.This article shows you how to add, display, and manipulate images (resize, flip, and add watermarks) in an ASP.NET Web Pages (Razor) website.

Öğrenecekleriniz:What you'll learn:

  • Sayfaya dinamik olarak görüntü ekleme.How to add an image to a page dynamically.
  • Kullanıcıların bir görüntüyü karşıya yüklemesine izin verin.How to let users upload an image.
  • Görüntüyü yeniden boyutlandırma.How to resize an image.
  • Bir görüntüyü çevirme veya döndürme.How to flip or rotate an image.
  • Görüntüye filigran ekleme.How to add a watermark to an image.
  • Bir görüntüyü filigran olarak kullanma.How to use an image as a watermark.

Makalesinde sunulan ASP.NET programlama özellikleri şunlardır:These are the ASP.NET programming features introduced in the article:

  • WebImage Yardımcısı.The WebImage helper.
  • Yolu ve dosya adlarını değiştirmenize olanak sağlayan yöntemler sağlayan Path nesnesi.The Path object, which provides methods that let you manipulate path and file names.

Öğreticide kullanılan yazılım sürümleriSoftware versions used in the tutorial

  • ASP.NET Web sayfaları (Razor) 2ASP.NET Web Pages (Razor) 2
  • WebMatrix 2WebMatrix 2

Bu öğretici WebMatrix 3 ile de kullanılabilir.This tutorial also works with WebMatrix 3.

Bir Web sayfasına dinamik olarak görüntü eklemeAdding an Image to a Web Page Dynamically

Web sitenizi geliştirirken, Web sitenize ve tek tek sayfalara görüntü ekleyebilirsiniz.You can add images to your website and to individual pages while you're developing the website. Ayrıca, kullanıcıların bir profil fotoğrafı eklemesine izin veren görevler için yararlı olabilecek resimleri karşıya yüklemesine izin verebilirsiniz.You can also let users upload images, which might be useful for tasks like letting them add a profile photo.

Sitenizde zaten bir görüntü varsa ve yalnızca bir sayfada göstermek istiyorsanız, şöyle bir HTML <img> öğesi kullanın:If an image is already available on your site and you just want to display it on a page, you use an HTML <img> element like this:

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

Bazen, görüntüleri dinamik olarak — görüntülemenin yanı, sayfa çalışmadığı sürece hangi görüntünün görüntüleneceğini bilemezsiniz.Sometimes, though, you need to be able to display images dynamically — that is, you don't know what image to display until the page is running.

Bu bölümdeki yordamda, kullanıcıların görüntü adı listesinden görüntü dosyası adını belirtmesi durumunda bir görüntünün nasıl görüntüleneceği gösterilmektedir.The procedure in this section shows how to display an image on the fly where users specify the image file name from a list of image names. Bu kişiler, açılan listeden görüntünün adını seçer ve sayfayı gönderdiğinde, seçtiğiniz resim görüntülenir.They select the name of the image from a drop-down list, and when they submit the page, the image they selected is displayed.

görüntüyle[image]

  1. WebMatrix 'te yeni bir Web sitesi oluşturun.In WebMatrix, create a new website.

  2. Dynamicımage. cshtmladlı yeni bir sayfa ekleyin.Add a new page named DynamicImage.cshtml.

  3. Web sitesinin kök klasöründe yeni bir klasör ekleyin ve resimolarak adlandırın.In the root folder of the website, add a new folder and name it images.

  4. Az önce oluşturduğunuz görüntüler klasörüne dört görüntü ekleyin.Add four images to the images folder you just created. (Kullanışlı olan tüm görüntüler olur, ancak bir sayfaya sığması gerekir.) Photo1. jpg, Photo2. jpg, Photo3. jpgve Photo4. jpggörüntülerini yeniden adlandırın.(Any images you have handy will do, but they should fit onto a page.) Rename the images Photo1.jpg, Photo2.jpg, Photo3.jpg, and Photo4.jpg. (Bu yordamda Photo4. jpg kullanamazsınız, ancak makalenin ilerleyen kısımlarında kullanacaksınız.)(You won't use Photo4.jpg in this procedure, but you'll use it later in the article.)

  5. Dört görüntünün salt okunurdur olarak işaretlenmediğini doğrulayın.Verify that the four images are not marked as read-only.

  6. Sayfadaki mevcut içeriği aşağıdaki gibi değiştirin:Replace the existing content in the page with the following:

    @{  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 photoChoiceadlı bir açılan liste (bir <select> öğesi) bulunur.The body of the page has a drop-down list (a <select> element) that's named photoChoice. Listede üç seçenek vardır ve her liste seçeneğinin value özniteliği, görüntüler klasörüne yerleştirdiğiniz görüntülerden birinin adını içerir.The list has three options, and the value attribute of each list option has the name of one of the images that you put in the images folder. Temelde, liste kullanıcının "fotoğraf 1"gibi kolay bir ad seçmesini sağlar ve ardından sayfa gönderildiğinde . jpg dosya adını geçirir.Essentially, the list lets the user select a friendly name like "Photo 1", and it then passes the .jpg file name when the page is submitted.

    Kodda, kullanıcının seçimini (diğer bir deyişle, görüntü dosyası adı) Request["photoChoice"]okuyarak listeden alabilirsiniz.In the code, you can get the user's selection (in other words, the image file name) from the list by reading Request["photoChoice"]. Önce bir seçim olup olmadığını görürsünüz.You first see if there's a selection at all. Varsa, görüntü için resimlerin ve kullanıcının görüntü dosyası adının adını içeren bir yol oluşturursunuz.If there is, you construct a path for the image that consists of the name of the folder for the images and the user's image file name. (Bir yol oluşturmaya çalıştıysanız, ancak Request["photoChoice"]hiçbir şey olmadıysa bir hata alırsınız.) Bunun gibi göreli bir yol oluşur:(If you tried to construct a path but there was nothing in Request["photoChoice"], you'd get an error.) This results in a relative path like this:

    Images/Photo1. jpgimages/Photo1.jpg

    Yol, sayfada daha sonra ihtiyacınız olacak imagePath adlı değişkende saklanır.The path is stored in variable named imagePath that you'll need later in the page.

    Gövdede, kullanıcının çekileceği görüntüyü göstermek için kullanılan bir <img> öğesi de vardır.In the body, there's also an <img> element that's used to display the image that the user picked. src özniteliği bir dosya adına veya URL 'ye ayarlı değil, bir statik öğeyi göstermek için yaptığınız gibi.The src attribute isn't set to a file name or URL, like you'd do to display a static element. Bunun yerine, @imagePatholarak ayarlanır, yani bu değer kodda ayarladığınız yoldan değerini alır.Instead, it's set to @imagePath, meaning that it gets its value from the path you set in code.

    Sayfa ilk kez çalıştığında, Kullanıcı hiçbir şey seçmediği için görüntülenecek görüntü yok.The first time that the page runs, though, there's no image to display, because the user hasn't selected anything. Bu, normalde src özniteliğinin boş olacağı ve görüntünün kırmızı "x" olarak (veya bir görüntü bulamadığında tarayıcı tarafından ne zaman işlediğini) göstereceği anlamına gelir.This would normally mean that the src attribute would be empty and the image would show up as a red "x" (or whatever the browser renders when it can't find an image). Bunu engellemek için, imagePath değişkeninin içinde herhangi bir şey olup olmadığını görmek üzere test eden bir if bloğuna <img> öğesini yerleştirebilirsiniz.To prevent this, you put the <img> element in an if block that tests to see whether the imagePath variable has anything in it. Kullanıcı bir seçim yaptıysanız imagePath yolu içerir.If the user made a selection, imagePath contains the path. Kullanıcı bir görüntü seçmediyse veya sayfa ilk kez görüntülendiğinde <img> öğesi bile işlenmez.If the user didn't pick an image or if this is the first time the page is displayed, the <img> element isn't even rendered.

  7. Dosyayı kaydedin ve sayfayı bir tarayıcıda çalıştırın.Save the file and run the page in a browser. (Çalıştırmadan önce sayfanın dosyalar çalışma alanında seçili olduğundan emin olun.)(Make sure the page is selected in the Files workspace before you run it.)

  8. Aşağı açılan listeden bir görüntü seçin ve ardından örnek görüntü' e tıklayın.Select an image from the drop-down list and then click Sample Image. Farklı seçimler için farklı görüntüler görtığınızdan emin olun.Make sure that you see different images for different choices.

Görüntü karşıya yüklemeUploading an Image

Önceki örnekte bir görüntünün dinamik olarak nasıl görüntüleneceği, ancak yalnızca Web sitenizde zaten bulunan görüntülerle çalışmakta olduğunuz gösteriliyordu.The previous example showed you how to display an image dynamically, but it worked only with images that were already on your website. Bu yordamda, kullanıcıların bir görüntüyü karşıya yüklemesine nasıl izin ver, daha sonra sayfada görüntülenme gösterilmektedir.This procedure shows how to let users upload an image, which is then displayed on the page. ASP.NET ' de resimleri oluşturma, işleme ve kaydetmenizi sağlayan yöntemler içeren WebImage Yardımcısı 'nı kullanarak anında görüntüleri yönetebilirsiniz.In ASP.NET, you can manipulate images on the fly using the WebImage helper, which has methods that let you create, manipulate, and save images. WebImage Yardımcısı, . jpg, . pngve . bmpdahil tüm ortak Web görüntüsü dosya türlerini destekler.The WebImage helper supports all the common web image file types, including .jpg, .png, and .bmp. Bu makale boyunca . jpg görüntülerini kullanacaksınız, ancak herhangi bir görüntü türünü kullanabilirsiniz.Throughout this article, you'll use .jpg images, but you can use any of the image types.

görüntüyle[image]

  1. Yeni bir sayfa ekleyin ve bu sayfayı Uploadımage. cshtmlolarak adlandırın.Add a new page and name it UploadImage.cshtml.

  2. Sayfadaki mevcut içeriği aşağıdaki gibi değiştirin:Replace the existing content in the page with the following:

    @{  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ı seçmesini sağlayan bir <input type="file"> öğesi vardır.The body of the text has an <input type="file"> element, which lets users select a file to upload. Gönder' e tıkladıklarında, çekildikleri dosya formla birlikte gönderilir.When they click Submit, the file they picked is submitted along with the form.

    Karşıya yüklenen görüntüyü almak için, görüntülerle çalışmak üzere tüm kullanışlı Yöntemler içeren WebImage yardımcısını kullanırsınız.To get the uploaded image, you use the WebImage helper, which has all sorts of useful methods for working with images. Özellikle, karşıya yüklenen görüntüyü (varsa) almak ve photoadlı bir değişkende depolamak için WebImage.GetImageFromRequest kullanırsınız.Specifically, you use WebImage.GetImageFromRequest to get the uploaded image (if any) and store it in a variable named photo.

    Bu örnekteki çalışmanın çok fazla olması, dosya ve yol adlarını almayı ve ayarlamayı içerir.A lot of the work in this example involves getting and setting file and path names. 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ü depolayacağınız yere yeni bir yol oluşturmak istemiştir.The issue is that you want to get the name (and just the name) of the image that the user uploaded, and then create a new path for where you're going to store the image. Kullanıcılar, aynı ada sahip birden çok görüntüyü karşıya yükleyebildiğinden, benzersiz adlar oluşturmak ve kullanıcıların var olan resimlerin üzerine yazmadığından emin olmak için ek kod kullanın.Because users could potentially upload multiple images that have the same name, you use a bit of extra code to create unique names and make sure that users don't overwrite existing pictures.

    Bir görüntü gerçekten karşıya yüklenmişse (test if (photo != null)) görüntünün adını görüntünün FileName özelliğinden alırsınız.If an image actually has been uploaded (the test if (photo != null)), you get the image name from the image's FileName property. Kullanıcı görüntüyü karşıya yüklediğinde, FileName kullanıcının bilgisayarından yolunu içeren özgün adını içerir.When the user uploads the image, FileName contains the user's original name, which includes the path from the user's computer. Şöyle görünebilir:It might look like this:

    C:\users\joe\resim\samplephoto1.jpgC:\Users\Joe\Pictures\SamplePhoto1.jpg

    Tüm bu yol bilgilerini istemezsiniz ancak — gerçek dosya adını (SamplePhoto1. jpg) istediğiniz gibi istemezsiniz.You don't want all that path information, though — you just want the actual file name (SamplePhoto1.jpg). Path.GetFileName yöntemini kullanarak yalnızca bir yoldan dosya açabilirsiniz, örneğin:You can strip out just the file from a path by using the Path.GetFileName method, like this:

    Path.GetFileName(photo.FileName)
    

    Ardından, özgün ada bir GUID ekleyerek yeni bir benzersiz dosya adı oluşturursunuz.You then create a new unique file name by adding a GUID to the original name. (GUID 'Ler hakkında daha fazla bilgi için bu makaledeki GUID 'Ler hakkında bölümüne bakın.) Ardından, görüntüyü kaydetmek için kullanabileceğiniz bir bütün yol oluşturursunuz.(For more about GUIDs, see About GUIDs later in this article.) Then you construct a complete path that you can use to save the image. Kayıt yolu, yeni dosya adından, klasörden (görüntülerden) ve geçerli Web sitesi konumundan oluşur.The save path is made up of the new file name, the folder (images), and the current website location.

    Note

    Kodunuzun resimler klasöründeki dosyaları kaydetmesi için, uygulamanın bu klasör için okuma-yazma izinlerine sahip olması gerekir.In order for your code to save files in the images folder, the application needs read-write permissions for that folder. Geliştirme bilgisayarınızda bu genellikle bir sorun değildir.On your development computer this is not typically an issue. 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.However, when you publish your site to a hosting provider's web server, you might need to explicitly set those permissions. Bu kodu bir barındırma sağlayıcısının sunucusunda çalıştırırsanız ve hata alırsanız, bu izinleri nasıl ayarlayacağınızı öğrenmek için barındırma sağlayıcısına başvurun.If you run this code on a hosting provider's server and get errors, check with the hosting provider to find out how to set those permissions.

    Son olarak, kayıt yolunu WebImage Yardımcısı 'nın Save yöntemine geçitirsiniz.Finally, you pass the save path to the Save method of the WebImage helper. Bu, karşıya yüklenen görüntüyü yeni adının altına depolar.This stores the uploaded image under its new name. Save yöntemi şöyle görünür: photo.Save(@"~\" + imagePath).The save method looks like this: photo.Save(@"~\" + imagePath). Tüm yol, geçerli Web sitesi konumu olan @"~\"eklenir.The complete path is appended to @"~\", which is the current website location. (~ işleci hakkında daha fazla bilgi için bkz. Razor söz dizimini kullanarak ASP.NET Web programlamaya giriş.)(For information about the ~ operator, see Introduction to ASP.NET Web Programming Using the Razor Syntax.)

    Önceki örnekte olduğu gibi, sayfanın gövdesi görüntünün görüntüleneceği bir <img> öğesi içerir.As in the previous example, the body of the page contains an <img> element to display the image. imagePath ayarlandıysa, <img> öğesi işlenir ve src özniteliği imagePath değere ayarlanır.If imagePath has been set, the <img> element is rendered and its src attribute is set to the imagePath value.

  3. Sayfayı bir tarayıcıda çalıştırın.Run the page in a browser.

  4. Bir görüntüyü karşıya yükleyin ve sayfada görüntülendiğinden emin olun.Upload an image and make sure it's displayed in the page.

  5. Sitenizde görüntüler klasörünü açın.In your site, open the images folder. Dosya adının şuna benzer bir şekilde göründüğünü yeni bir dosya eklendiğini görürsünüz:You see that a new file has been added whose file name looks something like this::

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

    Bu, adının önekli bir GUID ile karşıya yüklediğiniz görüntüdür.This is the image that you uploaded with a GUID prefixed to the name. (Kendi dosyanız farklı bir GUID 'e sahip olur ve muhtemelen myphoto. png'den farklı bir şey olarak adlandırılır.)(Your own file will have a different GUID and probably is named something different than MyPhoto.png.)

Tip

GUID 'Ler hakkındaAbout GUIDs

GUID (Global-Unique ID), genellikle şöyle bir biçimde işlenen bir tanıtıcıdır: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8.A GUID (globally-unique ID) is an identifier that's usually rendered in a format like this: 936DA01F-9ABD-4d9d-80C7-02AF85C822A8. Sayılar ve harfler (A-F) Her GUID için farklılık gösterir, ancak hepsi 8-4-4-4-12 karakterlik grupları kullanma düzenlerini izler.The numbers and letters (from A-F) differ for each GUID, but they all follow the pattern of using groups of 8-4-4-4-12 characters. (Teknik olarak, bir GUID 16 baytlık/128 bit bir sayıdır.) Bir GUID gerekiyorsa, sizin için bir GUID üreten özelleştirilmiş kodu çağırabilirsiniz.(Technically, a GUID is a 16-byte/128-bit number.) When you need a GUID, you can call specialized code that generates a GUID for you. GUID 'lerin arkasındaki düşünce, sayının çok büyük boyutu (3,4 x 1038) ve oluşturma algoritması arasında, sonuçta elde edilen sayının bir türden biri olması durumunda neredeyse garanti edilir.The idea behind GUIDs is that between the enormous size of the number (3.4 x 1038) and the algorithm for generating it, the resulting number is virtually guaranteed to be one of a kind. Bu nedenle, her iki kez de aynı adı kullanmayacağından emin olmanız gerektiğinde, nesnelerin adlarını oluşturmak için iyi bir yoldur.GUIDs therefore are a good way to generate names for things when you must guarantee that you won't use the same name twice. Tabii ki, bu, GUID 'lerin özellikle Kullanıcı dostu olmadığı için, ad yalnızca kodda kullanıldığında kullanılır.The downside, of course, is that GUIDs aren't particularly user friendly, so they tend to be used when the name is used only in code.

Görüntüyü Yeniden BoyutlandırmaResizing an Image

Web siteniz bir kullanıcıdan görüntüleri kabul ediyorsa, görüntüleri görüntülemeden veya kaydetmeden önce yeniden boyutlandırmak isteyebilirsiniz.If your website accepts images from a user, you might want to resize the images before you display or save them. Bunun için WebImage yardımcısını kullanabilirsiniz.You can again use the WebImage helper for this.

Bu yordamda karşıya yüklenen görüntünün bir küçük resim oluşturmak için yeniden boyutlandırılması ve sonra küçük resim ve özgün görüntünün Web sitesine kaydedilmesi gösterilmektedir.This procedure shows how to resize an uploaded image to create a thumbnail and then save the thumbnail and original image in the website. Sayfada küçük resmi görüntüler ve bir köprü kullanarak kullanıcıları tam boyutlu görüntüye yönlendirebilirsiniz.You display the thumbnail on the page and use a hyperlink to redirect users to the full-sized image.

görüntüyle[image]

  1. Thumbnail. cshtmladlı yeni bir sayfa ekleyin.Add a new page named Thumbnail.cshtml.

  2. Görüntüler klasöründe, thumbsadında bir alt klasör oluşturun.In the images folder, create a subfolder named thumbs.

  3. Sayfadaki mevcut içeriği aşağıdaki gibi değiştirin:Replace the existing content in the page with the following:

    @{  
        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 benzerdir.This code is similar to the code from the previous example. Bu fark, görüntünün küçük bir kopyasını oluşturduktan sonra, bu kodun görüntüyü normal bir kez ve bir kez kaydetmektedir.The difference is that this code saves the image twice, once normally and once after you create a thumbnail copy of the image. Önce karşıya yüklenen görüntüyü alın ve görüntüler klasörüne kaydedin.First you get the uploaded image and save it in the images folder. Ardından küçük resim görüntüsü için yeni bir yol oluşturursunuz.You then construct a new path for the thumbnail image. Küçük resmi oluşturmak için, WebImage yardımcının Resize yöntemini çağırarak, 60 piksellik bir görüntüye göre 60 piksellik bir görüntü oluşturabilirsiniz.To actually create the thumbnail, you call the WebImage helper's Resize method to create a 60-pixel by 60-pixel image. Örnek, en boy oranını nasıl koruyabileceğinizi ve görüntünün genişletilmesini nasıl önleyebileceğinizi gösterir (yeni boyut aslında görüntüyü daha büyük hale getirir).The example shows how you preserve the aspect ratio and how you can prevent the image from being enlarged (in case the new size would actually make the image larger). Yeniden boyutlandırılmış resim daha sonra thumbs alt klasörüne kaydedilir.The resized image is then saved in the thumbs subfolder.

    Biçimlendirmenin sonunda, görüntüyü koşullu olarak göstermek için önceki örneklerde gördüğünüz dinamik src özniteliğiyle aynı <img> öğesini kullanırsınız.At the end of the markup, you use the same <img> element with the dynamic src attribute that you've seen in the previous examples to conditionally show the image. Bu durumda, küçük resmi görüntüleriz.In this case, you display the thumbnail. Ayrıca, görüntünün büyük sürümüne köprü oluşturmak için bir <a> öğesi kullanırsınız.You also use an <a> element to create a hyperlink to the big version of the image. <img> öğesinin src özniteliğinde olduğu gibi, <a> öğenin href özniteliğini dinamik olarak imagePatholarak ayarlarsınız.As with the src attribute of the <img> element, you set the href attribute of the <a> element dynamically to whatever is in imagePath. Yolun URL olarak çalıştığından emin olmak için imagePath Html.AttributeEncode yöntemine geçitirsiniz ve bu, yoldaki ayrılmış karakterleri bir URL 'de tamam olan karakterlere dönüştürür.To make sure that the path can work as a URL, you pass imagePath to the Html.AttributeEncode method, which converts reserved characters in the path to characters that are ok in a URL.

  4. Sayfayı bir tarayıcıda çalıştırın.Run the page in a browser.

  5. Fotoğrafı karşıya yükleyin ve küçük resmin gösterildiğini doğrulayın.Upload a photo and verify that the thumbnail is shown.

  6. Tam boyutlu görüntüyü görmek için küçük resme tıklayın.Click the thumbnail to see the full-size image.

  7. Resimlerde ve resimlerde/thumbs'da yeni dosyaların eklendiğini unutmayın.In the images and images/thumbs, note that new files have been added.

Bir görüntüyü döndürme ve çevirmeRotating and Flipping an Image

WebImage Yardımcısı, görüntüleri çevirmenize ve döndürmenize de olanak tanır.The WebImage helper also lets you flip and rotate images. Bu yordamda, sunucudan bir görüntünün nasıl alınacağı, görüntünün baş aşağı ters çevrilme (dikey), nasıl kaydedileceği ve sonra çevrilmiş görüntüyü sayfada görüntülemesi gösterilmektedir.This procedure shows how to get an image from the server, flip the image upside down (vertically), save it, and then display the flipped image on the page. Bu örnekte, yalnızca sunucuda zaten sahip olduğunuz bir dosyayı kullanıyorsunuz (Photo2. jpg).In this example, you're just using a file you already have on the server (Photo2.jpg). Gerçek bir uygulamada, büyük olasılıkla adı, önceki örneklerde yaptığınız gibi, dinamik olarak aldığınız bir görüntüyü çevirirsiniz.In a real application, you'd probably flip an image whose name you get dynamically, like you did in previous examples.

görüntüyle[image]

  1. FlipImage. cshtmladlı yeni bir sayfa ekleyin.Add a new page named FlipImage.cshtml.

  2. Sayfadaki mevcut içeriği aşağıdaki gibi değiştirin:Replace the existing content in the page with the following:

    @{  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 bir görüntü almak için WebImage yardımcısını kullanır.The code uses the WebImage helper to get an image from the server. Görüntü yolunu, daha önceki örneklerde görüntü kaydetme için kullandığınız tekniği kullanarak oluşturursunuz ve WebImagekullanarak bir görüntü oluşturduğunuzda bu yolu geçirirsiniz:You create the path to the image using the same technique you used in earlier examples for saving images, and you pass that path when you create an image using WebImage:

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

    Bir görüntü bulunursa, daha önceki örneklerde yaptığınız gibi yeni bir yol ve dosya adı oluşturursunuz.If an image is found, you construct a new path and file name, like you did in earlier examples. Görüntüyü çevirmek için FlipVertical yöntemini çağırır ve sonra görüntüyü yeniden kaydetmelisiniz.To flip the image, you call the FlipVertical method, and then you save the image again.

    Görüntü, src özniteliği imagePatholarak ayarlanan <img> öğesi kullanılarak sayfada görüntülenir.The image is again displayed on the page by using the <img> element with the src attribute set to imagePath.

  3. Sayfayı bir tarayıcıda çalıştırın.Run the page in a browser. Photo2. jpg görüntüsü baş aşağı gösterilir.The image for Photo2.jpg is shown upside down.

  4. Görüntüyü yenilemek için sayfayı yenileyin veya sayfayı tekrar isteyin.Refresh the page or request the page again to see the image is flipped right side up again.

Bir görüntüyü döndürmek için, FlipVertical veya FlipHorizontalçağırmak yerine, RotateLeft veya RotateRightçağırmanız dışında aynı kodu kullanırsınız.To rotate an image, you use the same code, except that instead of calling the FlipVertical or FlipHorizontal, you call RotateLeft or RotateRight.

Görüntüye filigran eklemeAdding a Watermark to an Image

Web sitenize görüntü eklediğinizde, kaydetmeden önce görüntüye bir filigran eklemek veya bir sayfada göstermek isteyebilirsiniz.When you add images to your website, you might want to add a watermark to the image before you save it or display it on a page. İnsanlar bir görüntüye telif hakkı bilgileri eklemek veya iş adlarını tanıtmak için genellikle filigranlar kullanır.People often use watermarks to add copyright information to an image or to advertise their business name.

görüntüyle[image]

  1. Filigran. cshtmladlı yeni bir sayfa ekleyin.Add a new page named Watermark.cshtml.

  2. Sayfadaki mevcut içeriği aşağıdaki gibi değiştirin:Replace the existing content in the page with the following:

    @{  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, flipImage. cshtml sayfasında daha erken kod gibidir (Bu kez Photo3. jpg dosyasını kullanır).This code is like the code in the FlipImage.cshtml page from earlier (although this time it uses the Photo3.jpg file). Filigranı eklemek için, görüntüyü kaydetmeden önce WebImage yardımcının AddTextWatermark yöntemini çağırın.To add the watermark, you call the WebImage helper's AddTextWatermark method before you save the image. AddTextWatermarkçağrısında, metni Filigranım "geçirin", yazı tipi rengini sarı olarak ayarlarsınız ve yazı tipi ailesini Arial olarak ayarlarsınız.In the call to AddTextWatermark, you pass the text "My Watermark", set the font color to yellow, and set the font family to Arial. (Burada gösterilmese de WebImage Yardımcısı, opaklık, yazı tipi ailesi ve yazı tipi boyutu ile filigran metninin konumunu belirtmenizi sağlar.) Görüntüyü kaydettiğinizde, salt okuma olmaması gerekir.(Although it's not shown here, the WebImage helper also lets you specify opacity, font family and font size, and the position of the watermark text.) When you save the image it must not be read-only.

    Daha önce gördüğünüz gibi görüntü, @imagePatholarak ayarlanmış src özniteliği ile <img> öğesi kullanılarak sayfada görüntülenir.As you've seen before, the image is displayed on the page by using the <img> element with the src attribute set to @imagePath.

  3. Sayfayı bir tarayıcıda çalıştırın.Run the page in a browser. Resmin sağ alt köşesindeki "Filigranım" metnini görürsünüz.Notice the text "My Watermark" at the bottom-right corner of the image.

Bir görüntüyü filigran olarak kullanmaUsing an Image As a Watermark

Bir filigran için metin kullanmak yerine, başka bir görüntü kullanabilirsiniz.Instead of using text for a watermark, you can use another image. İnsanlar bazen bir şirket logosu gibi görüntüleri bir filigran olarak veya telif hakkı bilgileri için metin yerine bir filigran görüntüsü kullanır.People sometimes use images like a company logo as a watermark, or they use a watermark image instead of text for copyright information.

görüntüyle[image]

  1. Imagefiligran. cshtmladlı yeni bir sayfa ekleyin.Add a new page named ImageWatermark.cshtml.

  2. Resimler klasörüne logo olarak kullanabileceğiniz bir görüntü ekleyin ve mycompanylogo. jpggörüntüsünü yeniden adlandırın.Add an image to the images folder that you can use as a logo, and rename the image MyCompanyLogo.jpg. Bu görüntü, 80 piksel genişliğinde ve 20 piksel yüksekliğinde olarak ayarlandığında açıkça görebileceğiniz bir görüntü olmalıdır.This image should be an image that you can see clearly when it's set to 80 pixels wide and 20 pixels high.

  3. Sayfadaki mevcut içeriği aşağıdaki gibi değiştirin:Replace the existing content in the page with the following:

    @{  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 kod üzerindeki başka bir çeşitçdır.This is another variation on the code from earlier examples. Bu durumda, görüntüyü kaydetmeden önce, hedef görüntüye (Photo3. jpg) filigran görüntüsünü eklemek için AddImageWatermark çağırın.In this case, you call AddImageWatermark to add the watermark image to the target image (Photo3.jpg) before you save the image. AddImageWatermarkçağırdığınızda, genişliğini 80 piksel ve yüksekliği 20 piksel olarak ayarlarsınız.When you call AddImageWatermark, you set its width to 80 pixels and the height to 20 pixels. Mycompanylogo. jpg görüntüsü ortasında yatay olarak hizalanır ve hedef görüntünün en altında dikey olarak hizalanmıştır.The MyCompanyLogo.jpg image is horizontally aligned in the center and vertically aligned at the bottom of the target image. Opaklık %100 olarak ayarlanır ve doldurma 10 piksel olarak ayarlanır.The opacity is set to 100% and the padding is set to 10 pixels. Filigran görüntüsü hedef görüntüden büyükse, hiçbir şey olmaz.If the watermark image is bigger than the target image, nothing will happen. Filigran görüntüsü hedef görüntüden büyükse ve resim filigranı için doldurmayı sıfıra ayarlarsanız, filigran yoksayılır.If the watermark image is bigger than the target image and you set the padding for the image watermark to zero, the watermark is ignored.

    Daha önce olduğu gibi, <img> öğesini ve dinamik src özniteliğini kullanarak görüntüyü görüntüleriz.As before, you display the image using the <img> element and a dynamic src attribute.

  4. Sayfayı bir tarayıcıda çalıştırın.Run the page in a browser. Filigran resminin ana görüntünün altında göründüğünü unutmayın.Notice that the watermark image appears at the bottom of the main image.

Ek KaynaklarAdditional Resources

Bir ASP.NET Web sayfaları sitesinde dosyalarla çalışmaWorking with Files in an ASP.NET Web Pages Site

Razor söz dizimini kullanarak ASP.NET Web sayfaları programlamasına girişIntroduction to ASP.NET Web Pages Programming Using the Razor Syntax