Dans l’ère numérique d’aujourd’hui, la capacité à extraire du texte des images devient de plus en plus importante. Que vous traitez avec des documents scannés, des cartes commerciales, ou toute autre forme de données basées sur les images, être en mesure de rechercher et de manipuler ces informations efficacement peut économiser beaucoup de temps et d’efforts. Ce tutoriel vous guidera par la construction d ́une application web interactive en utilisant Aspose.OCR et ASP.NET Core qui permet aux utilisateurs de télécharger des photos, de chercher des mots-clés spécifiques dans le texte extrait, et voir les résultats en temps réel avec les matchs soulignés.

** Source de vérité:** Le code et le flux ci-dessous sont alignés avec le gêne à la fin de cet article (controller endpoints, AsposeOcr utilisation, et la forme de réponse JSON).

Exemple complet

Principaux

  • .NET 8 (ou .Net 6+) SDK
  • Vidéo / VS Code
  • Accès pour Aspose.OCR
  • (Optionnel) Un fichier de licence Aspose si vous prévoyez de dépasser les limites d’évaluation

Étape 1 : Créer le projet ASP.NET Core MVC

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

# Add Aspose.OCR
dotnet add package Aspose.OCR

Pourquoi MVC? Le héroïne utilise des contrôleurs (HomeControllerLes vues, et un classique Startup- un modèle facile et bien connu pour les téléchargements de fichiers + OCR du côté du serveur.

Étape 2: Préparez les actifs statiques et le dossier de téléchargement

Le contrôleur enregistre des téléchargements sous wwwroot/uploadsCréez ce dossier et assurez-vous que l’application peut y écrire.

mkdir -p wwwroot/uploads

Nous autorisons également les fichiers statiques middleware dans Startup Puis il y a plus tard, le wwwroot L’arbre est bien servi.

Étape 3 : Ajouter le contrôleur (Upload + OCR + Search)

Créer Controllers/HomeController.cs et mettre en œuvre Index + SearchText Cette action sauve l’image téléchargée, exécute OCR, recherche un mot clé (insensible au cas) et retourne 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 });
            }
        }
    }
}

Notes

  • Nous avons ajouté une petite limite de taille de fichier et la création de directory pour la robustesse.
  • Pour la production, valider les types de fichiers (.png/.jpg/.jpeg/.tifConsidérez le scan des virus.

Étape 4: Wire Up Startup et Programme

Créez Startup.cs et Program.CS comme dans le gêne pour permettre la redirection MVC, des fichiers statiques, de l’itinéraire et HTTPS.

  • Démarrage.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?}");
            });
        }
    }
}

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

Étape 5: Construisez l’Upload + Search UI (Razor View)

Créer Views/Home/Index.cshtml avec un simple formulaire de téléchargement et une boîte de recherche.Le JavaScript publie le fichier + mot clé à /Home/SearchText, imprimez le texte OCR, et souligne les matchs dans le navigateur (pas de changements de serveur nécessaires).

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

Ceci implémentera l’accent en temps réel ** dans le bloc de texte extrait**.Render les points forts ** sur l’image** lui-même nécessiterait des boîtes de bord OCR et des dessins (non couverts par le gêne).

Étape 6 : Exécuter l’application

dotnet run

Ouvrez l’URL affichée dans la console (par exemple, https://localhost:5001).Envoyez une image, entrez un mot-clé et cliquez sur Upload & Search. Vous verrez :

  • Keyword found! ou Keyword not found. (Générée par le serveur)
  • Le ** texte extrait** avec client-side <mark> Les hauteurs

Étape 7 : Considérations prêtes à la production (optionnelle)

  • Validation des fichiers: Vérifiez les types / extensions MIME et considérez le scan antivirus.
    • Limites de taille * : Utilisation RequestSizeLimit (affiché) et inverser les limites proxy/web.config si nécessaire.
  • Cleanup: supprimer périodiquement les anciens fichiers wwwroot/uploads.
  • Localisation: Si vous avez besoin de plusieurs langues, configurez les options de langue OCR sur le côté du serveur.
  • Error UX: remplacez les alertes par des toasts; ajoutez des revers de chargement et des barres de progrès.

Troubleshooting

  • Résultat OCR vide: Essayez une entrée de qualité supérieure, une orientation correcte ou un format différent (PNG/TIFF).
  • CORS: Si le front-end est séparé, activez CORS et utilisez l’URL API complet.
  • HTTPS : Assure dev cert trust (dotnet dev-certs https --trustSi le navigateur bloque le contenu mixte.

More in this category