בעידן הדיגיטלי של היום, היכולת לחלץ טקסט מהתמונות הופכת חשובה יותר ויותר.לא משנה אם אתה מתמודד עם מסמכים שנבדקו, כרטיסי עסקים, או כל צורה אחרת של נתונים מבוססי תמונה, להיות מסוגל לחפש ולתקן את המידע הזה ביעילות יכול לחסוך הרבה זמן ומאמץ.המדריך הזה ידריך אותך על ידי בניית יישום אינטראקטיבי באינטרנט באמצעות Aspose.OCR ו ASP.NET Core אשר מאפשר למשתמשים להעלות תמונות, חיפוש מילות מפתח ספציפיות בתוך הטקסט שנלקח, ולצפות בתוצאות בזמן אמת עם משחקים מדגישים.

מקור האמת: הקוד והזרימה למטה מתואמים עם הדבק בסוף מאמר זה (נקודות הסוף של המפקח, AsposeOcr שימוש, וצורה התגובה JSON).

דוגמה מלאה

דרישות

  • תגית: .NET 6+ SDK
  • ויזואלי סטודיו VS קוד
  • גישה ל- Aspose.OCR
  • (אופציונלי) קובץ רישיון Aspose אם אתה מתכנן לעבור את גבולות ההערכה

שלב 1: יצירת ASP.NET Core MVC Project

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

# Add Aspose.OCR
dotnet add package Aspose.OCR
  • מדוע ה-MVC משתמשת בשילוב (HomeControllerצפייה ישירה, וקלאסיקה Startup—תבנית פשוטה ומוכרת להעלאת קבצים + OCR בצד השרת.

שלב 2: להכין נכסים סטטיים ולעלות קובץ

המפקח כותב הורדות מתחת wwwroot/uploadsיצירת תיקיה זו ולהבטיח כי האפליקציה יכולה לכתוב עליה.

mkdir -p wwwroot/uploads

אנו גם מאפשרים קבצים סטטיים middleware Startup (נראה מאוחר יותר) כך wwwroot העץ משרת כראוי.

שלב 3: הוסף את המנהל (העלאת + OCR + חיפוש)

יצירת Controllers/HomeController.cs ויישום Index + SearchText פעולה זו שומרת את התמונה שהועלה, מבצעת OCR, מחפשת מילת מפתח (לא רגישה למקרה) ומחזירה 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 });
            }
        }
    }
}

הערות

  • הוספנו גבול גודל קובץ קטן ויצירת תיקיות עבור עוצמה.
  • על מנת להבטיח את איכות הקובץ (.png/.jpg/.jpeg/.tifלחשוב על סריקת וירוס.

שלב 4: Wire Up Startup and Program

יצירת Startup.cs ו Program.CS כפי שנמצא בתבנית כדי לאפשר MVC, קבצים סטטיים, מסלול, ו- HTTPS הפניה מחדש.

תגית: 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?}");
            });
        }
    }
}

תגית: 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>();
                });
    }
}

שלב 5: לבנות את Upload + Search UI (Razor View)

יצירת Views/Home/Index.cshtml עם טופס העלאה פשוט ואת תיבת החיפוש. /Home/SearchText, להדפיס את הטקסט OCR, ולהדגיש את המפגשים בדפדפן (אין שינויים שרתים נדרשים).

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

זה מיישם הדגש בזמן אמת בלוק הטקסט המופץ.לגרד את התצוגות על התמונה עצמה יידרש OCR גבולות וציור עלים (לא מכוסה על ידי הג’ינג).

שלב 6: הפעל את האפליקציה

dotnet run

פתח את כתובת ה-URL המוצגת בקונסולה (לדוגמה, https://localhost:5001).להעלות תמונה, להזין מילת מפתח ולחץ על העלאה וחיפוש.

  • Keyword found! או Keyword not found. (הופנה מהדף שרת)
  • הטקסט המופץ עם צד הלקוח <mark> להדגיש

שלב 7: שיקולים מוכנים לייצור (אופציונלי)

  • קובץ אימות: בדוק סוגים / הרחבות של MIME ולחשוב על סריקת אנטי וירוס.
    • הגבלת גודל *: שימוש RequestSizeLimit (מוצג) ולהפוך את הגבולות של proxy/web.config לפי הצורך.
  • Cleanup: הסרת קבצים ישנים באופן קבוע wwwroot/uploads.
  • מיקום: אם אתה זקוק למספר שפות, הגדר את אפשרויות השפה OCR בצד השרת.
  • Error UX: להחליף אזהרות עם טוסטים; להוסיף סוללות טעינה וסרטי התקדמות.

Troubleshooting

  • תוצאה OCR ריקה: נסה כניסה באיכות גבוהה יותר, כיוון נכון, או פורמט שונה (PNG/TIFF).
  • CORS: אם הקדמה נפרדת, הפעל את CORS ולהשתמש בכתובת URL המלאה של ה-API.
  • תגיות קשורות ה-HTTPS: Ensure dev cert trust (dotnet dev-certs https --trustאם הדפדפן מחסום תוכן מעורבב.

More in this category