In der heutigen digitalen Ära wird die Fähigkeit, Text aus Bildern zu extrahieren, immer wichtiger. Ob Sie mit scannen Dokumente, Geschäftskarten oder irgendeine andere Form von Bildbasierten Daten umgehen, in der Lage, diese Informationen effizient zu suchen und zu manipulieren, kann eine Menge Zeit und Anstrengung sparen. Dieser Tutorial führt Sie durch die Erstellung einer interaktiven Web-Anwendung mit Aspose.OCR und ASP.NET Core, die Benutzern erlaubt, Bilder hochzuladen, spezielle Schlüsselwörter innerhalb des extrahierten Textes zu finden und Ergebnisse in Echtzeit mit hervorgehobenem Match zu sehen.

Quelle der Wahrheit: Der Code und der Fluss unten sind am Ende dieses Artikels mit dem Gehirn angepasst (Kontroller Endpunkte, AsposeOcr Verwendung und JSON-Reaktionsform).

Vollständiges Beispiel

Voraussetzung

  • .NET 8 (oder .Net 6+) SDK
  • Visual Studio / VS Code
  • Zugang zur Aspose.OCR
  • (Optional) Ein Aspose-Lizenzdatei, wenn Sie die Bewertungsgrenze überschreiten möchten

Schritt 1: Erstellen des ASP.NET Core MVC Project

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Warum MVC? Die Herde verwendet Controller (HomeControllerSehenswürdigkeiten und ein Klassiker Startup- ein einfaches, bekanntes Muster für Dateienübertragungen + OCR auf der Serverseite.

Schritt 2: Bereiten Sie statische Vermögenswerte und Upload Folder vor

Der Betreiber schreibt Updates unter wwwroot/uploadsErstellen Sie diese Folder und stellen Sie sicher, dass die App dazu schreiben kann.

mkdir -p wwwroot/uploads

Wir ermöglichen auch statische Dateien middleware in Startup (Siehe später) so die wwwroot Der Baum wird richtig serviert.

Schritt 3: Die Steuerung hinzufügen (Upload + OCR + Search)

Erstellen Controllers/HomeController.cs und implementieren Index + SearchText Diese Aktion speichert das hochgeladene Bild, führt OCR aus, sucht nach einem Schlüsselwort (Case-Insensitive) und kehrt JSON zurück.

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

Anmerkungen

  • Wir fügen eine kleine Dateigrenze und Katalog-Erstellung für Robustheit hinzu.
  • Für die Produktion validieren Sie die Dateitypen (.png/.jpg/.jpeg/.tifUnd überprüfen Sie die Virus-Scanning.

Schritt 4: Wire Up Startup und Programm

Erstellen Sie Startup.cs und Program.CS wie in der Schaltfläche, um MVC, statische Dateien, Routing und HTTPS-Redirection zu ermöglichen.

  • 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?}");
            });
        }
    }
}
  • Programm.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>();
                });
    }
}

Schritt 5: Build the Upload + Search UI (Razor View)

Erstellen Sie Views/Home/Index.cshtml mit einem einfachen Ladenformular und einem Suchfeld. Die JavaScript postet die Datei + Schlüsselwörter auf /Home/SearchText, Drucken Sie OCR-Text und betonen die Match in der Browser (keine Serveränderungen erforderlich).

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

Dies implementiert real-time Highlighting im extrahierten Text-Block.Rendering Highlights ** auf dem Bild** selbst erfordert OCR-Bundboxen und Zeichnungen (nicht von der Gier abgedeckt).

Schritt 6: Laden Sie die App

dotnet run

Öffnen Sie die URL, die in der Konsole angezeigt wird (z. B. https://localhost:5001).).Ein Bild hochladen, ein Schlüsselwort eingeben und klicken Sie auf Upload & Search. Sie werden sehen:

  • Keyword found! oder Keyword not found. (Generiert von Server)
  • Der ** extrahierte Text** mit Client-Seite <mark> Highlights

Schritt 7: Produktionsbereite Überlegungen (optional)

  • File Validation: Überprüfen Sie MIME-Typen/Erweiterungen und berücksichtigen Sie die Antivirus-Scanning.
    • Größenbegrenzungen *: Gebrauch RequestSizeLimit (Show) und reverse proxy/web.config Grenzen wie nötig.
  • Cleanup: regelmäßig alte Dateien löschen wwwroot/uploads.
  • Lokalisierung: Wenn Sie mehrere Sprachen benötigen, konfigurieren Sie OCR-Sprachoptionen auf der Serverseite.
  • Error UX: Ersetzen Sie die Warnungen mit Toasts; fügen Sie Laden- und Fortschrittsbäume hinzu.

Troubleshooting

  • Woll OCR Ergebnis: Versuchen Sie hochwertige Einträge, richtige Orientierung oder ein anderes Format (PNG/TIFF).
  • CORS: Wenn der Front-End getrennt ist, aktivieren Sie CORS und verwenden Sie die vollständige API-URL.
  • HTTPS: Versorgung dev cert Vertrauen (dotnet dev-certs https --trustwenn der Browser gemischte Inhalte blockiert.

More in this category