A mai digitális korban a képekből származó szöveg kivonatának képessége egyre fontosabbá válik. függetlenül attól, hogy szkennelt dokumentumokkal, üzleti kártyákkal vagy bármilyen más képalapú adatformával foglalkozik-e, ennek az információnak a keresése és manipulálása hatékonyan sok időt és erőfeszítést takaríthat meg. Ez az útmutató egy interaktív webes alkalmazás létrehozásán keresztül vezeti Önt az Aspose.OCR és ASP.NET Core segítségével, amely lehetővé teszi a felhasználók számára a fényképek feltöltését, a kivont szövegben meghatározott kulcsszavak keresését és a kiemelkedő mérkőzésekkel való valós idejű eredmények megtekintését.

** Igazság forrása:** Az alábbi kódok és áramlások összehangolódnak az e cikk végén (kontroll végpontok, AsposeOcr használata, és JSON válasz formája).

Teljes példa

előfeltételek

  • .NET 8 (vagy .Net 6+) SDK
  • Visual Studio / VS Kód
  • Hozzáférés a Aspose.OCR
  • (Opcionális) Az ASPOSE licencfájl, ha azt tervezi, hogy meghaladja az értékelési határértékeket

1. lépés: Az ASP.NET Core MVC projekt létrehozása

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Miért az MVC? A gél használja a vezérlőket (HomeController, nézetek, és egy klasszikus Startup- egy egyszerű, jól ismert mintát a fájlfelvételek + szerver oldalán OCR.

2. lépés: Készítsen statikus eszközöket és töltse fel a mappát

A vezérigazgató feltölti a wwwroot/uploadsHozza létre ezt a mappát, és győződjön meg róla, hogy az alkalmazás írhat rá.

mkdir -p wwwroot/uploads

A statisztikai fájlokat a middleware-ben is engedélyezzük Startup (a későbbiekben megjelent) így a wwwroot A fát helyesen szolgálják.

3. lépés: Add the Controller (Töltse fel + OCR + Keresés)

Hozzon létre Controllers/HomeController.cs és hajtson végre Index + SearchText Ez az akció mentse a feltöltött képet, végrehajtja az OCR-t, keres egy kulcsszót (ügy-érzékeny), és visszatér JSON.

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 });
            }
        }
    }
}

Megjegyzések

  • Hozzáadtuk egy kis fájl méret korlátozását és a katalógus létrehozását a rugalmasság érdekében.
  • A fájl típusainak érvényesítése (.png/.jpg/.jpeg/.tifVegyük figyelembe a vírus szkennelését.

4. lépés: Wire Up Startup és program

Hozzon létre Startup.cs és **Programban található programokat, hogy lehetővé tegye az MVC, a statikus fájlok, az útmutató és a HTTPS átirányítását.

Kezdőlap » CS

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?}");
            });
        }
    }
}

Az MSZP programja*

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>();
                });
    }
}

5. lépés: Építsd fel a feltöltést + Keresési UI (Razor View)

Hozzon létre Views/Home/Index.cshtml egyszerű letöltés formanyomtatványt és keresési mezőt.A JavaScript a fájlt + kulcsszavát a /Home/SearchText, nyomtatja az OCR szöveget, és hangsúlyozza a böngészőben szereplő mérkőzéseket (a szerver módosítása nem szükséges).

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

Ez megvalósítja ** valós idejű hangsúlyt a kivont szöveg** blokkban.A kiemelkedő jelek a képen önmagában OCR kötődobozokat és rajzfelületeket igényelnek (nem fedik le a tálcát).

6. lépés: futtatja az alkalmazást

dotnet run

Nyissa meg a konzolban megjelenő URL-t (például https://localhost:5001).Töltse fel a képet, adja meg a kulcsszavát, és kattintson a Töltés és keresés gombra.

  • Keyword found! vagy Keyword not found. (Szerver által generált)
  • A kivonatú szöveg az ügyfél oldalával <mark> Fokozás

7. lépés: Termelési készenléti megfontolások (opcionális)

  • Fájl validáció: Ellenőrizze a MIME típusokat / kiterjesztéseket, és fontolja meg a víruskeresést.
  • ** Méret korlátozása**: Használat RequestSizeLimit (Show) és fordított proxy/web.config korlátozások szükség szerint.
  • Cleanup: Időről időre törli a régi fájlokat wwwroot/uploads.
  • Lokalizáció: Ha több nyelvre van szüksége, állítsa be az OCR nyelvi opciókat a szerver oldalán.
  • Error UX: Változtassa ki a figyelmeztetéseket toastokkal; adja hozzá a töltőpályákat és a haladási csomópontokat.

Troubleshooting

  • ** Üres OCR eredmény**: Próbálja ki a magasabb minőségű bevitelt, a helyes orientációt vagy a különböző formátumot (PNG/TIFF).
  • CORS: Ha a front-end elválasztva van, engedélyezze a CORS-t, és használja a teljes API URL-jét.
  • HTTPS: Garancia dev cert bizalom (dotnet dev-certs https --trust) ha a böngésző blokkolja a vegyes tartalmat.

More in this category