Öğretici: Azure Görüntü İşleme görüntü meta verileri oluşturmak için Depolama

Makale
10/15/2021
Okumak için 17 dakika

Bu öğreticide, karşıya yüklenen görüntüler için meta veriler oluşturmak için Azure Görüntü İşleme hizmetini bir web uygulamasıyla nasıl tümleştirebilirsiniz? Bu, bir şirketin tüm görüntüleri için hızla açıklayıcı açıklamalı alt yazılar veya aranabilir anahtar sözcükler oluşturmak istediği durumlarda dijital varlık yönetimi (DAM) senaryolarında kullanışlıdır.

Kullanıcılar tarafından yüklenen Visual Studio kabul eden ve görüntüleri Azure blob depolama alanında depo eden bir MVC Web uygulaması yazmak için Visual Studio'yi kullanacağız. C# ile blobları okumayı ve yazmayı ve blob meta verilerini kullanarak, kendi oluşturdukları bloblara ek bilgi iliştirme hakkında bilgi edinebilirsiniz. Ardından kullanıcı tarafından yüklenen her görüntüyü Görüntü İşleme API'sini göndererek resim yazısı ve arama meta verileri oluşturabilirsiniz. Son olarak, uygulamayı buluta dağıtmak için Visual Studio.

Bu öğretici şunların nasıl yapıldığını gösterir:

Depolama hesabını ve depolama kapsayıcılarını kullanarak Azure portal
Web uygulaması oluşturma Visual Studio Azure'a dağıtma
Görüntülerden Görüntü İşleme ayıklamak için Görüntü İşleme API'sini kullanma
Azure sanal ağ görüntülerine meta Depolama ekleme
Görüntü meta verilerini Azure Depolama Gezgini

İpucu

Meta veri oluşturmak Görüntü İşleme Veri Analizi'nin Kullanma bölümü En çok Görüntü Analizi ile alakalıdır. Görüntü Analizi'nin kurulmuş bir uygulamayla nasıl tümleştirildiklerini görmek için oraya atlayabilirsiniz.

Azure aboneliğiniz yoksa başlamadan önce ücretsiz bir hesap oluşturun.

Önkoşullar

Visual Studio 2017 veya Community sürümü, "ASP.NET ve web geliştirme" ve "Azure geliştirme" iş yükleri yüklü.
Azure Depolama Gezgini aracı yüklü.

Depolama hesabı oluşturma

Bu bölümde depolama hesabı oluşturmak için Azure portal'leri kullanasınız. Ardından bir kapsayıcı çifti oluşturabilirsiniz: biri kullanıcı tarafından karşıya yüklenen görüntüleri depolamak için, diğeri ise karşıya yüklenen görüntülerden oluşturulan görüntü küçük resimlerini depolamak için.

Tarayıcınızda Azure portalını açın. Oturum açmanız istense, oturum açmanızı Microsoft hesabı.
Depolama hesabı oluşturmak için sol şeritteki + Kaynak oluştur'a tıklayın. Ardından Depolama ve ardından hesabı Depolama tıklayın.
Ad alanına depolama hesabı için benzersiz bir ad girin ve yanında yeşil bir onay işareti göründüğünden emin olun. Bu hesap altında oluşturulan bloblara erişilen URL'nin bir bölümünü oluşturduğu için ad önemlidir. Depolama hesabını "IntellipixResources" adlı yeni bir kaynak grubuna yer açın ve size en yakın bölgeyi seçin. Yeni depolama hesabını oluşturmak için ekranın alt kısmında gözden geçir + oluştur düğmesine tıklayarak bitirin.

Not

Depolama adları 3-24 karakter uzunluğunda olabilir ve yalnızca sayı ve küçük harfler içerebilir. Ayrıca, girmeniz gereken ad Azure'da benzersiz olmalıdır. Aynı adı başka biri seçtikten sonra adın Ad alanında kırmızı ünlem işaretiyle kullanılamaz olduğu size bildirilecek.
Sol şeritteki Kaynak grupları'ne tıklayın. Ardından "IntellipixResources" kaynak grubuna tıklayın.
Kaynak grubu için açılan sekmede, oluşturduğunuz depolama hesabına tıklayın. Depolama hesabı henüz orada değilse, görünene kadar sekmenin üst kısmında Yenile'ye tıkleyebilirsiniz.
Depolama hesabının sekmesinde Bloblar'a tıklar ve bu hesapla ilişkilendirilmiş kapsayıcıların listesini görüntüleyin.
Depolama hesabında şu anda kapsayıcı yok. Blob oluşturamadan önce, blobu depolamak için bir kapsayıcı oluşturmanız gerekir. Yeni bir kapsayıcı oluşturmak için + Kapsayıcı'ya tıklayın. Ad photos alanına yazın ve Genel erişim düzeyi olarak Blob'ı seçin. Ardından Tamam'a tıklar ve "photos" adlı bir kapsayıcı oluşturun.

Varsayılan olarak kapsayıcılar ve içerikleri özeldir. Erişim düzeyi olarak Blob'un seçili olması, "fotoğraflar" kapsayıcıdaki blobların genel erişime açık olmasını sağlar, ancak kapsayıcının kendisini genel hale değildir. "Fotoğraflar" kapsayıcısı içinde depolanan görüntüler bir Web uygulamasından bağlanacak olduğundan istediğiniz şey bu.
Önceki adımı tekrarlayın ve kapsayıcının Genel erişim düzeyinin Blob olarak ayarlanmış olmasını sağlayarak "thumbnails" adlı bir kapsayıcı oluşturun.
Her iki kapsayıcının da bu depolama hesabı için kapsayıcı listesinde yer alan ve adların doğru yazıldığından emin olun.
"Blob hizmeti" ekranı kapatın. Depolama hesabı ekranın sol tarafındaki menüde Erişim anahtarları'a tıklayın ve ardından key1 için ANAHTAR'ın yanındaki Kopyala düğmesine tıklayın. Bu erişim anahtarını daha sonra kullanmak üzere sık kullanılan metin düzenleyicinize yapıştırın.

Şimdi, oluşturmakta olacağınız uygulamaya yüklenen görüntüleri tutmak için bir depolama hesabı ve görüntülerin depolanması için kapsayıcılar oluşturdunız.

Çalıştırma Azure Depolama Gezgini

Azure Depolama Gezgini, Windows, macOS ve Linux çalıştıran bilgisayarlarda Azure Depolama ile çalışmak için grafik arabirim sağlayan ücretsiz bir araçtır. Veri kaynağıyla aynı işlevlerin çoğunu Azure portal ve blob meta verilerini görüntüleme gibi diğer özellikleri sunar. Bu bölümde, önceki bölümde Microsoft Azure Depolama Gezgini kapsayıcıları görüntülemek için Microsoft Azure Depolama Gezgini'leri kullanabilirsiniz.

Daha önce yüklememiş Depolama Gezgini veya en son sürümü çalıştırmış olduğundan emin olmak için sürümüne gidin ve indirin http://storageexplorer.com/ ve yükleyin.
Başlangıç Depolama Gezgini. Oturum açmanız istener, oturum açmanız Microsoft hesabı oturum asanızla aynı oturum açma — Azure portal. Depolama Gezgini'ın sol bölmesinde depolama hesabını görmüyorsanız, aşağıda vurgulanan Hesapları Yönet düğmesine tıklayın ve hem Microsoft hesabı hem de depolama hesabını oluşturmak için kullanılan aboneliğin Depolama Gezgini'a eklendik.
İçeriğini görüntülemek için depolama hesabının yanındaki küçük oka tıklayın ve ardından Blob Kapsayıcıları'nın yanındaki oka tıklayın. Oluşturduğunuz kapsayıcıların listede görüntü olduğunu onaylayın.

Kapsayıcılar şu anda boş, ancak uygulama dağıtıldıktan ve fotoğrafları karşıya yüklemeye başladıktan sonra bu değişecektir. Bir Depolama Gezgini yüklemeniz, uygulamanın blob depolamaya ne yaz yaptığını görmenizi kolaylaştırır.

Visual Studio'de yeni bir Web uygulaması oluşturma

Bu bölümde, Visual Studio'de yeni bir Web uygulaması oluşturacak ve görüntüleri karşıya yüklemek, blob depolamaya yazmak ve bir Web sayfasında görüntülemek için gereken temel işlevleri uygulamak için kod eksersiniz.

İlk Visual Studio ve Dosya -> -> Project komutunu kullanarak "Intellipix" (akıllı resimler) adlı yeni bir Visual C# ASP.NET Web Uygulaması projesi oluşturun.
"Yeni ASP.NET Web Uygulaması" iletişim kutusunda MVC'nin seçili olduğundan emin olun. Daha sonra, Tamam'a tıklayın.
Proje yapısını gözden geçirmek için biraz zaman Çözüm Gezgini. Diğer şeylerin arasında, projenin MVC denetleyicilerini tutan Denetleyiciler adlı bir klasör ve projenin görünümlerini tutan Görünümler adlı bir klasör vardır. Uygulamayı uygulamak için bu klasörlerdeki varlıklarla ve diğer klasörlerde çalışıyor olursanız.
Uygulamayı Visual Studio başlatmak için Hata Ayıklama -> Hata Ayıklama Olmadan Başlat komutunu kullanın (veya Ctrl+F5 tuşlarına basın). Uygulamanın mevcut durumu şöyledir:
Tarayıcıyı kapatın ve Visual Studio. Bu Çözüm Gezgini Intellipix projesine sağ tıklayın ve Paketleri Yönet... seçeneğini NuGet seçin. Gözat'a tıklayın. Ardından arama imageresizer kutusuna yazın ve ImageResizer adlı NuGet paketini seçin. Son olarak, paketin en son kararlı sürümünü yüklemek için Yükle'ye tıklayın. ImageResizer, uygulamaya yüklenen görüntülerden görüntü küçük resimleri oluşturmak için kullanabileceğiniz API'leri içerir. Tüm değişiklikleri tamamlar ve size sunulan tüm lisansları kabul eder.
WindowsAzure.NuGet adlı Depolama paketini projeye eklemek için bu işlemi tekrarlayın. Bu paket, .NET uygulamalarından Azure Depolama API'leri içerir. Tüm değişiklikleri tamamlar ve size sunulan tüm lisansları kabul eder.
Web.config açın ve aşağıdaki ifadeyi <appSettings> bölümüne ekleyerek, account_name ilk bölümde oluşturduğunuz depolama hesabının adıyla ve ACCOUNT_KEY kaydettiğiniz erişim anahtarıyla değiştirin.
```
<add key="StorageConnectionString" value="DefaultEndpointsProtocol=https;AccountName=ACCOUNT_NAME;AccountKey=ACCOUNT_KEY" />
```
Projenin Görünümler/paylaşılan klasöründe _Layout. cshtml adlı dosyayı açın. 19. satırda "uygulama adı" nı "ıntellipıx" olarak değiştirin. Satır şöyle görünmelidir:
```
@Html.ActionLink("Intellipix", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
```
Not

ASP.NET MVC projesinde, _Layout. cshtml , diğer görünümler için şablon görevi gören özel bir görünümdür. Genellikle bu dosyadaki tüm görünümlerde ortak olan üst bilgi ve alt bilgi içeriğini tanımlarsınız.
Projenin modeller klasörüne sağ tıklayın ve Add-> Class... komutunu kullanarak klasöre bloınfo. cs adlı bir sınıf dosyası ekleyin. Ardından boş Bloınfo sınıfını aşağıdaki sınıf tanımıyla değiştirin:
```
public class BlobInfo
{
    public string ImageUri { get; set; }
    public string ThumbnailUri { get; set; }
    public string Caption { get; set; }
}
```

Projenin denetleyiciler klasöründen HomeController. cs dosyasını açın ve aşağıdaki using deyimlerini dosyanın en üstüne ekleyin:

using ImageResizer;
using Intellipix.Models;
using Microsoft.WindowsAzure.Storage;
using Microsoft.WindowsAzure.Storage.Blob;
using System.Configuration;
using System.Threading.Tasks;
using System.IO;

HomeController. cs içindeki Index metodunu aşağıdaki uygulamayla değiştirin:

public ActionResult Index()
{
    // Pass a list of blob URIs in ViewBag
    CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
    CloudBlobClient client = account.CreateCloudBlobClient();
    CloudBlobContainer container = client.GetContainerReference("photos");
    List<BlobInfo> blobs = new List<BlobInfo>();

    foreach (IListBlobItem item in container.ListBlobs())
    {
        var blob = item as CloudBlockBlob;

        if (blob != null)
        {
            blobs.Add(new BlobInfo()
            {
                ImageUri = blob.Uri.ToString(),
                ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/")
            });
        }
    }

    ViewBag.Blobs = blobs.ToArray();
    return View();
}

yeni dizin yöntemi, "photos" kapsayıcıdaki blobları numaralandırır ve bu blob 'ları temsil eden bloınfo nesnelerinin bir dizisini ASP.NET MVC 'nin viewbag özelliği aracılığıyla görünüme geçirir. Daha sonra, bu nesneleri numaralandırmak ve bir fotoğraf küçük resimleri koleksiyonunu görüntülemek için görünümü değiştirirsiniz. depolama hesabınıza erişmek ve — blobstorageaccount, cloudblobclient ve cloudblobcontainer' ı numaralandırmak için kullanacağınız sınıflar, — NuGet aracılığıyla yüklediğiniz windowsazure. Depolama paketinden gelir.

HomeController. cs Içindeki HomeController sınıfına aşağıdaki yöntemi ekleyin:

[HttpPost]
public async Task<ActionResult> Upload(HttpPostedFileBase file)
{
    if (file != null && file.ContentLength > 0)
    {
        // Make sure the user selected an image file
        if (!file.ContentType.StartsWith("image"))
        {
            TempData["Message"] = "Only image files may be uploaded";
        }
        else
        {
            try
            {
                // Save the original image in the "photos" container
                CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
                CloudBlobClient client = account.CreateCloudBlobClient();
                CloudBlobContainer container = client.GetContainerReference("photos");
                CloudBlockBlob photo = container.GetBlockBlobReference(Path.GetFileName(file.FileName));
                await photo.UploadFromStreamAsync(file.InputStream);

                // Generate a thumbnail and save it in the "thumbnails" container
                using (var outputStream = new MemoryStream())
                {
                    file.InputStream.Seek(0L, SeekOrigin.Begin);
                    var settings = new ResizeSettings { MaxWidth = 192 };
                    ImageBuilder.Current.Build(file.InputStream, outputStream, settings);
                    outputStream.Seek(0L, SeekOrigin.Begin);
                    container = client.GetContainerReference("thumbnails");
                    CloudBlockBlob thumbnail = container.GetBlockBlobReference(Path.GetFileName(file.FileName));
                    await thumbnail.UploadFromStreamAsync(outputStream);
                }
            }
            catch (Exception ex)
            {
                // In case something goes wrong
                TempData["Message"] = ex.Message;
            }
        }
    }

    return RedirectToAction("Index");
}

Bu, bir fotoğrafı karşıya yüklerken çağrılan yöntemidir. Karşıya yüklenen her görüntüyü kapsayıcıda bir blob olarak depolar "photos" , paketi kullanarak orijinal görüntüden bir küçük resim oluşturur ImageResizer ve küçük resim görüntüsünü kapsayıcıda bir blob olarak depolar "thumbnails" .

Projenin Görünümler/giriş klasöründe Index. cshmtl açın ve içeriğini şu kod ve biçimlendirmeye göre değiştirin:

@{
    ViewBag.Title = "Intellipix Home Page";
}

@using Intellipix.Models

<div class="container" style="padding-top: 24px">
    <div class="row">
        <div class="col-sm-8">
            @using (Html.BeginForm("Upload", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                <input type="file" name="file" id="upload" style="display: none" onchange="$('#submit').click();" />
                <input type="button" value="Upload a Photo" class="btn btn-primary btn-lg" onclick="$('#upload').click();" />
                <input type="submit" id="submit" style="display: none" />
            }
        </div>
        <div class="col-sm-4 pull-right">
        </div>
    </div>

    <hr />

    <div class="row">
        <div class="col-sm-12">
            @foreach (BlobInfo blob in ViewBag.Blobs)
            {
                <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" />
            }
        </div>
    </div>
</div>

@section scripts
{
    <script type="text/javascript" language="javascript">
        if ("@TempData["Message"]" !== "") {
            alert("@TempData["Message"]");
        }
    </script>
}

Burada kullanılan dil Razor'dir ve bu, ÇALıŞTıRıLABILIR kodu HTML biçimlendirmesine eklemenizi sağlar. @foreachDosyanın ortasındaki ifade, ViewBag içindeki denetleyiciden geçirilen bloınfo nesnelerini numaralandırır ve <img> bunlardan HTML öğeleri oluşturur. srcHer öğenin özelliği, görüntü küçük resmini içeren Blobun URI 'si ile başlatılır.

photos.zip dosyasını GitHub örnek veri deposundanindirip sıkıştırmasını açın. Bu, uygulamayı test etmek için kullanabileceğiniz farklı fotoğraflar sınıflardır.
Değişikliklerinizi kaydedin ve uygulamayı tarayıcınızda başlatmak için CTRL + F5 tuşlarına basın. sonra fotoğraf Upload tıklayın ve indirdiğiniz görüntülerden birini karşıya yükleyin. Sayfada fotoğrafın küçük resim sürümünün göründüğünü onaylayın.
fotoğraflar klasörünüzdeki birkaç görüntünün daha Upload. Sayfada göründüğünden emin olun:
Tarayıcıya sağ tıklayın ve sayfanın kaynak kodunu görüntülemek için Sayfa kaynağını görüntüle ' yi seçin. <img>Görüntü küçük resimlerini temsil eden öğeleri bulun. Görüntülere atanan URL 'Lerin BLOB depolama alanındaki bloblara doğrudan başvuryacağını gözlemleyin. Bunun nedeni, kapsayıcıların genel erişim düzeyini BLOB olarak ayarlamanıza ve bu da Blobları herkese açık bir şekilde erişilebilir hale getirir.
Azure Depolama Gezgini döndürün (veya çalışır durumda değilse yeniden başlatın) ve "photos" depolama hesabınızın altındaki kapsayıcıyı seçin. Kapsayıcıdaki Blobların sayısı karşıya yüklediğiniz fotoğrafların sayısına eşit olmalıdır. Bloblarından birine çift tıklayarak dosyayı indirin ve bloba depolanan görüntüyü görüntüleyin.
"thumbnails"kapsayıcıyı Depolama Gezgini açın. Görüntü karşıya yüklemelerinden oluşturulan küçük resim görüntülerini görüntülemek için bloblardan birini açın.

Uygulama henüz karşıya yüklediğiniz orijinal görüntüleri görüntülemek için bir yol sunmaz. İdeal olarak, bir görüntü küçük resminin tıklanması orijinal görüntüyü görüntülemelidir. Daha sonra bu özelliği ekleyeceksiniz.

Bu bölümde, kullanıcıların karşıya yüklediği orijinal görüntüleri (yalnızca görüntü küçük resimleri yerine) görmesini sağlayan bir açık kaynaklı JavaScript kitaplığı eklemek için ücretsiz ve açık kaynaklı bir JavaScript kitaplığı kullanacaksınız. Dosyalar sizin için sağlanır. Yapmanız gerekirse, bunları proje ile tümleştirmeniz ve Index. cshtml için küçük bir değişiklik yapmanız gerekir.

GitHub kod deposundaki lightbox. css ve lightbox.js dosyalarını indirin.
Çözüm Gezgini, projenizin betikleri klasörüne sağ tıklayın ve Add-> New Item... komutunu kullanarak bir lightbox.js dosyası oluşturun. GitHub kod deposundakiörnek dosyadaki içeriği yapıştırın.
Projenin "Içerik" klasörüne sağ tıklayın ve Add-> New Item... komutunu kullanın. bir lightbox. css dosyası oluşturun. GitHub kod deposundakiörnek dosyadaki içeriği yapıştırın.
buttons.zip dosyasını GitHub veri dosyaları deposundan indirip sıkıştırmasını açın: https://github.com/Azure-Samples/cognitive-services-sample-data-files/tree/master/ComputerVision/storage-lab-tutorial . Dört düğme görüntünüz olmalıdır.
Çözüm Gezgini ' de Intellipix projesine sağ tıklayın ve "görüntüler" adlı bir klasörü projeye eklemek için Add-> yeni klasör komutunu kullanın.
Görüntüler klasörüne sağ tıklayın ve indirdiğiniz dört görüntüyü içeri aktarmak için Add-> var olan Item... komutunu kullanın.
Projenin "App_Start" klasöründe paketleme Liconfig. cs dosyasını açın. Aşağıdaki ifadeyi, RegisterBundles paketleme liconfig. cs dosyasındaki yöntemine ekleyin:
```
bundles.Add(new ScriptBundle("~/bundles/lightbox").Include(
          "~/Scripts/lightbox.js"));
```
Aynı yöntemde, StyleBundle "~/Content/CSS" konumundan bir oluşturan ifadesini bulun ve paket içindeki stil sayfaları listesine lightbox. css ekleyin. Değiştirilen ifade aşağıda verilmiştir:
```
bundles.Add(new StyleBundle("~/Content/css").Include(
          "~/Content/bootstrap.css",
          "~/Content/site.css",
          "~/Content/lightbox.css"));
```
Projenin Görünümler/paylaşılan klasöründe _Layout. cshtml dosyasını açın ve @RenderSection alttaki deyimden hemen önce aşağıdaki ifadeyi ekleyin:
```
@Scripts.Render("~/bundles/lightbox")
```

Son görev, ışık kutusu görüntüleyicisinin giriş sayfasına dahil edilir. Bunu yapmak için Index. cshtml dosyasını açın (projenin Görünümler/giriş klasöründe olduğu) ve döngüyü bununla değiştirin @foreach :

@foreach (BlobInfo blob in ViewBag.Blobs)
{
    <a href="@blob.ImageUri" rel="lightbox" title="@blob.Caption">
        <img src="@blob.ThumbnailUri" width="192" title="@blob.Caption" style="padding-right: 16px; padding-bottom: 16px" />
    </a>
}

Değişikliklerinizi kaydedin ve uygulamayı tarayıcınızda başlatmak için CTRL + F5 tuşlarına basın. Daha önce karşıya yüklediğiniz görüntülerden birine tıklayın. Bir netleştirme görüntülendiğini ve görüntünün büyütülmüş bir görünümünü gösterir.
Kutuyu kapatmak için sağ alt köşedeki X simgesini tıklatın.

Şimdi karşıya yüklediğiniz görüntüleri görüntülemenin bir yolu vardır. Sonraki adım bu görüntülerle daha fazlasını yapmak için kullanılır.

Meta verileri oluşturmak için Görüntü İşleme kullanın

Görüntü İşleme kaynağı oluşturma

Azure hesabınız için bir Görüntü İşleme kaynağı oluşturmanız gerekir; Bu kaynak, Azure Görüntü İşleme hizmetine erişiminizi yönetir.

Bir Görüntü İşleme kaynağı oluşturmak için Azure bilişsel Hizmetler oluşturma bölümündeki yönergeleri izleyin.
Sonra kaynak grubunuzun menüsüne gidin ve oluşturduğunuz Görüntü İşleme API'si aboneliğine tıklayın. Uç nokta altındaki URL 'yi bir yere kopyalamak için bir süre içinde kolayca alabilirsiniz. Ardından erişim anahtarlarını göster' e tıklayın.

Not

1 Temmuz 2019 ' den sonra oluşturulan yeni kaynaklar özel alt etki alanı adları kullanır. Daha fazla bilgi ve bölgesel uç noktaların tamamen listesi için bkz. bilişsel Hizmetler Için özel alt etki alanı adları.
Sonraki pencerede, anahtar 1 değerini panoya kopyalayın.

Görüntü İşleme kimlik bilgileri ekle

Daha sonra, Görüntü İşleme kaynaklarına erişebilmesi için gerekli kimlik bilgilerini uygulamanıza eklersiniz.

Projenin kökündeki Web.config dosyasına gidin. Aşağıdaki deyimlerini <appSettings> dosyanın bölümüne ekleyin, VISION_KEY önceki adımda kopyaladığınız anahtarla ve önceki VISION_ENDPOINT adımda kaydettiğiniz URL ile değiştirin.

<add key="SubscriptionKey" value="VISION_KEY" />
<add key="VisionEndpoint" value="VISION_ENDPOINT" />

ardından Çözüm Gezgini, projeye sağ tıklayın ve Microsoft. Azure. biliveservices. Vision. computervision paketini yüklemek için NuGet paketlerini yönet komutunu kullanın. Bu paket, Görüntü İşleme API'si çağırmak için gereken türleri içerir.

Meta veri oluşturma kodu ekle

Daha sonra, görüntü için meta veriler oluşturmak üzere gerçekten Görüntü İşleme hizmetini kullanan kodu eklersiniz.

HomeController. cs dosyasını projenin denetleyiciler klasöründe açın ve using dosyanın en üstüne aşağıdaki deyimleri ekleyin:

using Microsoft.Azure.CognitiveServices.Vision.ComputerVision;
using Microsoft.Azure.CognitiveServices.Vision.ComputerVision.Models;

ardından Upload yöntemine gidin; Bu yöntem görüntüleri blob depolamaya dönüştürür ve yükler. // Generate a thumbnail(Veya görüntü blobu oluşturma işleminizin sonunda) ile başlayan bloğundan hemen sonra aşağıdaki kodu ekleyin. Bu kod, görüntüyü içeren blobu alır ( photo ) ve bu görüntü için bir açıklama oluşturmak üzere görüntü işleme kullanır. Görüntü İşleme API'si Ayrıca görüntüye uygulanan anahtar sözcüklerin bir listesini oluşturur. Oluşturulan açıklama ve anahtar sözcükler, daha sonra alınabilmesi için Blobun meta verilerinde depolanır.

// Submit the image to the Azure Computer Vision API
ComputerVisionClient vision = new ComputerVisionClient(
    new ApiKeyServiceClientCredentials(ConfigurationManager.AppSettings["SubscriptionKey"]),
    new System.Net.Http.DelegatingHandler[] { });
vision.Endpoint = ConfigurationManager.AppSettings["VisionEndpoint"];

List<VisualFeatureTypes?> features = new List<VisualFeatureTypes?>() { VisualFeatureTypes.Description };
var result = await vision.AnalyzeImageAsync(photo.Uri.ToString(), features);

// Record the image description and tags in blob metadata
photo.Metadata.Add("Caption", result.Description.Captions[0].Text);

for (int i = 0; i < result.Description.Tags.Count; i++)
{
    string key = String.Format("Tag{0}", i);
    photo.Metadata.Add(key, result.Description.Tags[i]);
}

await photo.SetMetadataAsync();

Ardından, aynı dosyadaki Dizin yöntemine gidin. Bu yöntem, hedeflenen blob kapsayıcısında depolanan görüntü bloblarını numaralandırır ( ıblobitem örnekleri olarak) ve bunları uygulama görünümüne geçirir. foreachBu yöntemin bloğunu aşağıdaki kodla değiştirin. Bu kod, her Blobun ekli meta verilerini almak için Cloudblockblob. FetchAttributes öğesini çağırır. Meta verilerden bilgisayar tarafından oluşturulan açıklamayı ( caption ) ayıklar ve görünüme geçirilen bloınfo nesnesine ekler.
```
foreach (IListBlobItem item in container.ListBlobs())
{
    var blob = item as CloudBlockBlob;

    if (blob != null)
    {
        blob.FetchAttributes(); // Get blob metadata
        var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name;

        blobs.Add(new BlobInfo()
        {
            ImageUri = blob.Uri.ToString(),
            ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"),
            Caption = caption
        });
    }
}
```

Uygulamayı test etme

değişikliklerinizi Visual Studio kaydedin ve uygulamayı tarayıcınızda başlatmak için Ctrl + F5 tuşlarına basın. İndirdiğiniz fotoğraf kümesinden veya kendi klasöründen daha fazla görüntü yüklemek için uygulamayı kullanın. İmleci görünümdeki yeni görüntülerden birinin üzerine getirdiğinizde, bir araç ipucu penceresi görünür ve görüntü için bilgisayar tarafından oluşturulan resim yazısını görüntülemelidir.

tüm ekli meta verileri görüntülemek için, görüntüler için kullanmakta olduğunuz depolama kapsayıcısını görüntülemek için Azure Depolama Gezgini kullanın. Kapsayıcıdaki bloblara sağ tıklayın ve Özellikler' i seçin. İletişim kutusunda, anahtar-değer çiftlerinin bir listesini görürsünüz. Bilgisayar tarafından oluşturulan görüntü açıklaması öğede depolanır Caption ve arama anahtar sözcükleri,, vb. içinde depolanır Tag0 Tag1 . İşiniz bittiğinde, iletişim kutusunu kapatmak için iptal ' e tıklayın.

Resim özellikleri iletişim penceresi, meta veri etiketleri listelendi

Uygulamaya arama ekleme

Bu bölümde, giriş sayfasına, kullanıcıların karşıya yüklediği görüntülerde anahtar sözcük araması yapma imkanı sağlayan bir arama kutusu ekleyeceksiniz. Anahtar sözcükler Görüntü İşleme API'si tarafından oluşturulup blob meta verilerinde depolanır.

Projenin Görünümler/giriş klasöründe Index. cshtml dosyasını açın ve aşağıdaki deyimlerini <div> özniteliğiyle birlikte boş öğeye ekleyin class="col-sm-4 pull-right" :

@using (Html.BeginForm("Search", "Home", FormMethod.Post, new { enctype = "multipart/form-data", @class = "navbar-form" }))
{
    <div class="input-group">
        <input type="text" class="form-control" placeholder="Search photos" name="term" value="@ViewBag.Search" style="max-width: 800px">
        <span class="input-group-btn">
            <button class="btn btn-primary" type="submit">
                <i class="glyphicon glyphicon-search"></i>
            </button>
        </span>
    </div>
}

Bu kod ve biçimlendirme, giriş sayfasına bir arama kutusu ve bir arama düğmesi ekler.

Projenin denetleyiciler klasöründe HomeController. cs ' i açın ve aşağıdaki yöntemi HomeController sınıfına ekleyin:
```
[HttpPost]
public ActionResult Search(string term)
{
    return RedirectToAction("Index", new { id = term });
}
```
Bu, Kullanıcı önceki adımda eklenen Ara düğmesine tıkladığında çağrılan yöntemidir. Sayfayı yeniler ve URL 'de bir arama parametresi içerir.

Index metodunu aşağıdaki uygulamayla değiştirin:

public ActionResult Index(string id)
{
    // Pass a list of blob URIs and captions in ViewBag
    CloudStorageAccount account = CloudStorageAccount.Parse(ConfigurationManager.AppSettings["StorageConnectionString"]);
    CloudBlobClient client = account.CreateCloudBlobClient();
    CloudBlobContainer container = client.GetContainerReference("photos");
    List<BlobInfo> blobs = new List<BlobInfo>();

    foreach (IListBlobItem item in container.ListBlobs())
    {
        var blob = item as CloudBlockBlob;

        if (blob != null)
        {
            blob.FetchAttributes(); // Get blob metadata

            if (String.IsNullOrEmpty(id) || HasMatchingMetadata(blob, id))
            {
                var caption = blob.Metadata.ContainsKey("Caption") ? blob.Metadata["Caption"] : blob.Name;

                blobs.Add(new BlobInfo()
                {
                    ImageUri = blob.Uri.ToString(),
                    ThumbnailUri = blob.Uri.ToString().Replace("/photos/", "/thumbnails/"),
                    Caption = caption
                });
            }
        }
    }

    ViewBag.Blobs = blobs.ToArray();
    ViewBag.Search = id; // Prevent search box from losing its content
    return View();
}

Dizin yönteminin artık kullanıcının arama kutusuna girdiği değeri içeren bir parametre kimliğini kabul ettiğini gözlemleyin. Boş veya eksik bir ID parametresi, tüm fotoğrafların gösterilmesi gerektiğini gösterir.

Aşağıdaki yardımcı yöntemi HomeController sınıfına ekleyin:

private bool HasMatchingMetadata(CloudBlockBlob blob, string term)
{
    foreach (var item in blob.Metadata)
    {
        if (item.Key.StartsWith("Tag") && item.Value.Equals(term, StringComparison.InvariantCultureIgnoreCase))
            return true;
    }

    return false;
}

Bu yöntem, belirli bir görüntü blobuna eklenen meta veri anahtar sözcüklerinin kullanıcının girdiği arama terimini içerip içermediğini anlamak için Dizin yöntemi tarafından çağrılır.

Uygulamayı yeniden başlatın ve birkaç fotoğrafı karşıya yükleyin. Yalnızca öğreticiyle sağlananları değil, kendi fotoğraflarınızı kullanabilirsiniz.
Arama kutusuna "River" gibi bir anahtar sözcük yazın. Ardından Ara düğmesine tıklayın.
Arama sonuçları, yazdığınıza ve karşıya yüklediğiniz görüntülere göre değişir. Ancak sonuç, yazdığınız anahtar sözcüğünün tamamını veya bir kısmını içeren meta veri anahtar kelimeleri içeren görüntülerin filtrelenmiş bir listesi olmalıdır.
Tüm görüntüleri yeniden göstermek için tarayıcının geri düğmesine tıklayın.

Programı tamamlamak üzeresiniz. Uygulamanın buluta dağıtılması zaman.

Uygulamayı Azure’da dağıtma

Bu bölümde, uygulamayı Visual Studio Azure 'a dağıtırsınız. Visual Studio, sizin için bir Azure Web uygulaması oluşturmasına izin verirsiniz, bu da Azure portal dönüp ayrı olarak oluşturmanız gerekir.

Çözüm Gezgini ' de projeye sağ tıklayın ve bağlam menüsünden Yayımla... ' yı seçin. Microsoft Azure App Service ve yeni oluştur ' un seçili olduğundan emin olun ve ardından yayımla düğmesine tıklayın.
Sonraki iletişim kutusunda kaynak grubu altında "ıntellipikselresources" kaynak grubunu seçin. "App Service planı" ' nın yanındaki yeni... düğmesine tıklayın ve depolama hesabı oluşturbölümünde depolama hesabı için seçtiğiniz konumda yeni bir App Service planı oluşturun ve varsayılan değerleri başka her yerde kabul edin. Oluştur düğmesine tıklayarak son ' a tıklayın.
Birkaç dakika sonra uygulama bir tarayıcı penceresinde görünür. Adres çubuğundaki URL 'YI aklınızda edin. Uygulama artık yerel olarak çalışmıyor; Bu, herkese açık olarak erişilebilen Web üzerinde.

Uygulamada değişiklik yaparsanız ve değişiklikleri Web 'e göndermek istiyorsanız Yayımla işlemini yeniden deneyin. Web 'de yayımlamadan önce değişikliklerinizi yerel olarak test edebilirsiniz.

Kaynakları temizleme

Web uygulamanızda çalışmaya devam etmek istiyorsanız, sonraki adımlar bölümüne bakın. Bu uygulamayı kullanmaya devam etmeyi planlamıyorsanız, uygulamaya özgü tüm kaynakları silmeniz gerekir. kaynakları silmek için Azure Depolama aboneliğinizi ve Görüntü İşleme kaynağını içeren kaynak grubunu silebilirsiniz. bu işlem, depolama hesabını, ona yüklenen blobları ve ASP.NET web uygulamasına bağlanmak için gereken App Service kaynağını kaldırır.

Kaynak grubunu silmek için, portalda kaynak grupları sekmesini açın, bu proje için kullandığınız kaynak grubuna gidin ve görünümün en üstündeki kaynak grubunu sil ' e tıklayın. Silmek istediğinizi onaylamak için kaynak grubunun adını yazmanız istenir. Bir kaynak grubu silindikten sonra kurtarılamaz.

Sonraki adımlar

Azure 'ı kullanmak ve daha da ıntellipıx uygulamanızı geliştirmek için yapabileceğiniz çok daha fazla şey vardır. Örneğin, kullanıcıların kimliğini doğrulama ve fotoğraf silme desteği ekleyebilir ve Kullanıcı bilişsel hizmetler 'in karşıya yüklemeyi izleyen bir fotoğrafı işlemesini beklemek yerine, blob depolamaya bir görüntü eklendiğinde Görüntü İşleme API'si zaman uyumsuz olarak çağırmak için Azure işlevleri 'ni kullanabilirsiniz. Görüntüde, genel bakışta özetlenen birçok farklı görüntü çözümleme işlemi de yapabilirsiniz.

Görüntü analizine genel bakış