Günümüzün dijital çağında, resimlerden metin çıkarma yeteneği giderek önemlidir. tarama belgeleri, iş kartları veya görüntü tabanlı verilerin herhangi bir biçimi ile uğraşıyorsanız, bu bilgileri etkili bir şekilde arama ve manipüle edebilirsiniz, çok zaman ve çaba tasarrufu yapabilirsiniz. Bu öğretici size Aspose.OCR ve ASP.NET Core kullanılarak etkileşimli bir web uygulaması oluşturarak rehberlik edecektir. kullanıcıların resimleri yükleyebilmeleri, çıkarılan metinde belirli anahtar kelimeleri aramak ve vurgulanmış maçlarla gerçek zamanlı sonuçları görüntülemek için izin verir.

Gerçeğin kaynağı: Aşağıdaki kod ve akış, bu makalenin sonunda (kontroler son noktaları, AsposeOcr kullanımı ve JSON yanıt şekli).

Tam örnek

Ön koşullar

  • NET 8 (veya .NET 6+) SDK
  • Visual Studio / VS Kodu
  • Girişimcilik için Aspose.OCR
  • (Seçmeli) Değerlendirme sınırlarını aşmayı planlıyorsanız bir Aspose lisans dosyası

Adım 1: ASP.NET Core MVC Projesi oluşturun

dotnet new mvc -n ImageTextSearchApp -f net8.0
cd ImageTextSearchApp

# Add Aspose.OCR
dotnet add package Aspose.OCR

Neden MVC? Gemi kontrolörleri kullanır (HomeControllerbakış açısı ve klasik Startup- Dosya yükleme + sunucu tarafında OCR için kolay ve iyi bilinen bir desen.

Adım 2: Statik varlıkları ve yükleme klasörünü hazırlayın

Yönetici aşağıdaki yazıları yazıyor wwwroot/uploadsBu klasörü oluşturun ve uygulamanın buna yazabileceğinden emin olun.

mkdir -p wwwroot/uploads

Ayrıca, statik dosyaları middleware’da etkinleştiririz. Startup Sonraki YazıÖnceki Yorumlar wwwroot Ağaçlar doğru şekilde servis edilir.

Adım 3: Kontrolü ekleyin (Upload + OCR + Search)

Controllers/HomeController.cs oluşturun ve uygulayın Index + SearchText Bu eylem yüklenen görüntüyü kaydeder, OCR’yi gerçekleştirir, anahtar kelimeyi arar (case-insensitive) ve JSON’u geri getirir.

using System;
using System.IO;
using System.Threading.Tasks;
using Aspose.Ocr;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;

namespace ImageTextSearchApp
{
    public class HomeController : Controller
    {
        private readonly IWebHostEnvironment _environment;

        public HomeController(IWebHostEnvironment environment)
        {
            _environment = environment;
        }

        [HttpGet]
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        [RequestSizeLimit(20_000_000)] // ~20MB max, adjust as needed
        public async Task<IActionResult> SearchText(IFormFile imageFile, string searchKeyword)
        {
            if (imageFile == null || imageFile.Length == 0)
                return BadRequest("Image file is required.");
            if (string.IsNullOrWhiteSpace(searchKeyword))
                return BadRequest("Search keyword is required.");

            // Ensure uploads directory exists
            var uploadsDir = Path.Combine(_environment.WebRootPath, "uploads");
            Directory.CreateDirectory(uploadsDir);

            // Sanitize filename and save
            var safeName = Path.GetFileName(imageFile.FileName);
            var filePath = Path.Combine(uploadsDir, safeName);
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await imageFile.CopyToAsync(stream);
            }

            // Perform OCR on the uploaded image
            using (var ocrEngine = new AsposeOcr())
            {
                var extractedText = await ocrEngine.RecognizeImageAsync(filePath);

                // Case-insensitive keyword check
                var found = extractedText?.IndexOf(searchKeyword, StringComparison.OrdinalIgnoreCase) >= 0;
                var searchResult = found ? "Keyword found!" : "Keyword not found.";

                // Return minimal JSON (exact shape matches the gist)
                return Json(new { extractedText, searchResult });
            }
        }
    }
}

Notlar

  • Güç için küçük bir dosya boyutu sınırı ve dizin oluşturma ekledik.
  • Üretim için, dosya türlerini doğrulamak için (.png/.jpg/.jpeg/.tifVe virüs taraması düşünün.

Adım 4: Wire Up Startup ve Program

MVC, statik dosyaları, yönlendirmeleri ve HTTPS dönüşümünü etkinleştirmek için Startup.cs ve Program.CS oluşturun.

  • başlangıç noktası *
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;

namespace ImageTextSearchApp
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddControllersWithViews();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();         // serves wwwroot (including /uploads)

            app.UseRouting();

            app.UseAuthorization();

            app.UseEndpoints(endpoints =>
            {
                endpoints.MapControllerRoute(
                    name: "default",
                    pattern: "{controller=Home}/{action=Index}/{id?}");
            });
        }
    }
}
  • Program.c için *
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;

namespace ImageTextSearchApp
{
    public class Program
    {
        public static void Main(string[] args)
        {
            CreateHostBuilder(args).Build().Run();
        }

        public static IHostBuilder CreateHostBuilder(string[] args) =>
            Host.CreateDefaultBuilder(args)
                .ConfigureWebHostDefaults(webBuilder =>
                {
                    webBuilder.UseStartup<Startup>();
                });
    }
}

Adım 5: Upload + Search UI oluştur (Razor Görüntüleme)

Basit bir yükleme formu ve bir arama kutusu ile Views/Home/Index.cshtml oluşturun. JavaScript dosyayı + anahtar kelimeyi gönderir /Home/SearchText, OCR metni yazdırır ve tarayıcıdaki eşleşmeleri vurgular (sunucu değişiklikleri gerektirmez).

@{
    ViewData["Title"] = "Image Text Search";
}

<h1 class="mb-3">Image Text Search (Aspose.OCR + ASP.NET Core)</h1>

<form id="ocrForm" enctype="multipart/form-data" class="mb-4">
    <div class="form-group mb-2">
        <label for="imageFile">Select image</label>
        <input type="file" id="imageFile" name="imageFile" accept=".png,.jpg,.jpeg,.tif,.tiff,.bmp" class="form-control" required />
    </div>

    <div class="form-group mb-2">
        <label for="searchKeyword">Keyword</label>
        <input type="text" id="searchKeyword" name="searchKeyword" class="form-control" placeholder="Enter a word to find..." required />
    </div>

    <button type="submit" class="btn btn-primary">Upload & Search</button>
</form>

<div id="result" class="mt-3">
    <h3>Result</h3>
    <p id="searchStatus" class="fw-bold"></p>
    <pre id="extractedText" style="white-space: pre-wrap"></pre>
</div>

@section Scripts {
<script>
(function () {
    const form = document.getElementById('ocrForm');
    const statusEl = document.getElementById('searchStatus');
    const textEl = document.getElementById('extractedText');

    function escapeHtml(s) {
        return s.replace(/[&<>"']/g, c => ({
            '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;'
        }[c]));
    }

    function highlight(text, keyword) {
        if (!keyword) return escapeHtml(text);
        const pattern = new RegExp(`(${keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
        return escapeHtml(text).replace(pattern, '<mark>$1</mark>');
    }

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        statusEl.textContent = 'Processing...';
        textEl.textContent = '';

        const formData = new FormData(form);
        try {
            const res = await fetch('/Home/SearchText', {
                method: 'POST',
                body: formData
            });
            if (!res.ok) {
                const msg = await res.text();
                statusEl.textContent = `Error: ${msg}`;
                return;
            }
            const data = await res.json();
            statusEl.textContent = data.searchResult || '';
            const kw = document.getElementById('searchKeyword').value;
            textEl.innerHTML = highlight(data.extractedText || '', kw);
        } catch (err) {
            statusEl.textContent = 'Unexpected error. See console.';
            console.error(err);
        }
    });
})();
</script>
}

Bu gerçek zamanlı vurgulama çekilmiş metin blok uygulanır.Görüntünün kendisinde **yüksek noktaları çekmek, OCR’nin bağ kutularını ve çizim yüzeyleri gerektirir (gümüş tarafından kaplanmamıştır).

Adım 6: App’i çalıştırın

dotnet run

Konsolda gösterilen URL’yi açın (örneğin, https://localhost:5001).Bir resim yükleyin, bir anahtar kelime girin ve Upload & Search tıklayın.

  • Keyword found! veya Keyword not found. (Server tarafından oluşturulmuş )
  • Kullanıcı tarafı ile alınan metin <mark> Yükseltme

Adım 7: Üretim Hazırlıkları (Seçmeli)

  • ** Dosya doğrulama**: MIME türlerini / uzantılarını kontrol edin ve antivirüs taramalarını düşünün.
  • ** Boyut sınırları**: Kullanım RequestSizeLimit Proxy/web.config sınırları gereklidir.
  • Cleanup: Eski dosyaları düzenli olarak silin wwwroot/uploads.
  • Lokasyon: Birden fazla dil ihtiyacınız varsa, OCR dil seçenekleri sunucu tarafını ayarlayın.
  • Error UX: Uyarıları toastlarla değiştirin; yükleme anahtarları ve ilerleme çubuğu ekleyin.

Troubleshooting

  • ** Boş OCR sonucu**: Daha yüksek kaliteli giriş, doğru yönlendirme veya farklı biçimde (PNG/TIFF) deneyin.
  • CORS: Front-end ayrı ise, CORS’i etkinleştirin ve tam API URL’sini kullanın.
  • HTTPS: Garanti dev cert güven (dotnet dev-certs https --trust) Eğer tarayıcı karışık içeriği engeller.

More in this category