În epoca digitală de astăzi, capacitatea de a extrage text din imagini devine din ce în ce mai importantă. Indiferent dacă vă ocupați cu documente scanate, carduri de afaceri sau orice altă formă a datelor bazate pe imagine, a fi capabil să căutați și să manipulați aceste informații eficient poate economisi o mulțime de timp și efort. Acest tutorial vă va ghida prin construirea unei aplicații web interactive folosind Aspose.OCR și ASP.NET Core care permite utilizatorilor să încărcească imaginile, să caute cuvinte cheie specifice în textul extras, și pentru a vizualiza rezultatele în timp real cu meciuri evidențiate.

Sursa adevărului: Codul și fluxul de mai jos sunt aliniate cu ghidul la sfârșitul acestui articol (punctele de control, AsposeOcr utilizare, și forma de răspuns JSON).

Exemplu complet

Prevederile

  • Cuvânt cheie: .NET 8 (sau .Net 6+)
  • Cuvânt cheie: Visual Studio vs Code
  • Accesul la Aspose.OCR
  • (Opțional) Un fișier de licență Aspose dacă intenționați să depășiți limitele de evaluare

Pasul 1: Crearea proiectului ASP.NET Core MVC

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

De ce MVC? Ghelul utilizează controlori (HomeControllerVizualizare şi un clasic Startup—un model ușor și bine cunoscut pentru upload-urile de fișiere + server-side OCR.

Pasul 2: Pregătiți activele statice și folderul de încărcare

Controlorul scrie încărcăturile sub wwwroot/uploadsCreați acest folder și asigurați-vă că aplicația poate scrie pentru el.

mkdir -p wwwroot/uploads

De asemenea, permiteți fișierele statice middleware în Startup (a apărut mai târziu) astfel încât wwwroot Copacul este servit corect.

Pasul 3: Adăugați Controlorul (Upload + OCR + Căutare)

Creați Controllers/HomeController.cs și implementați Index + SearchText Această acțiune salvează imaginea încărcată, execută OCR, caută un cuvânt cheie (incredibil la caz) și returnează 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 });
            }
        }
    }
}

Notă

  • Am adăugat o mică limită de dimensiune a fișierului și crearea directoriei pentru robustitate.
  • Pentru producție, validarea tipurilor de fișiere (.png/.jpg/.jpeg/.tifSă luăm în considerare scanarea virală.

Pasul 4: Wire Up Startup și program

Creați Startup.cs și Program.CS ca în gât pentru a permite MVC, fișiere statice, routing și HTTPS redirecționare.

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

• Programul CS*

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

Pasul 5: Construiți UI-ul de încărcare + Căutare (Razor View)

Creați Views/Home/Index.cshtml cu un formular de încărcare simplu și o casetă de căutare. /Home/SearchText, imprimă textul OCR și evidențiază meciurile din browser (nu sunt necesare modificări serverului).

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

Acest lucru implementează o evidență ** în timp real în blocul textului extras**.Rendering highlights ** pe imagine** în sine ar necesita OCR boxe de legătură și desene de desen (nu acoperite de geam).

Pasul 6: Răspundeți aplicația

dotnet run

Deschideți URL-ul afișat în consola (de exemplu, https://localhost:5001).Încărcați o imagine, introduceți un cuvânt cheie și faceți clic pe Upload & Search.

  • Keyword found! sau Keyword not found. (Generat pe server)
    • Textul extras** cu client-side <mark> Înălţime

Pasul 7: Considerații pregătite pentru producție (opțional)

  • Validarea fișierului: Verificați tipurile / extinderile MIME și luați în considerare scanarea antivirus.
  • ** Limite de dimensiune**: Utilizare RequestSizeLimit (a se vedea) și limitele proxy/web.config invers, după cum este necesar.
  • Cleanup: Îndepărtează periodic fișierele vechi de la wwwroot/uploads.
  • Localizare: Dacă aveți nevoie de mai multe limbi, configurați opțiunile de limbă OCR pe server-side.
  • Error UX: înlocuiește avertismentele cu toasturi; adaugă spin-uri de încărcare și benzi de progres.

Troubleshooting

  • Rezultat OCR gol: Încercați intrarea de înaltă calitate, orientarea corectă sau un format diferit (PNG/TIFF).
  • CORS: În cazul în care front-end este separat, activați CORS și utilizați URL-ul API complet.
  • Cuvânt cheie: Asigurați-vă că aveți încredere (dotnet dev-certs https --trustdacă browserul blocă conținutul mixt.

More in this category