בעידן הדיגיטלי של היום, היכולת לחלץ טקסט מהתמונות הופכת חשובה יותר ויותר.לא משנה אם אתה מתמודד עם מסמכים שנבדקו, כרטיסי עסקים, או כל צורה אחרת של נתונים מבוססי תמונה, להיות מסוגל לחפש ולתקן את המידע הזה ביעילות יכול לחסוך הרבה זמן ומאמץ.המדריך הזה ידריך אותך על ידי בניית יישום אינטראקטיבי באינטרנט באמצעות 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 => ({
'&': '&', '<': '<', '>': '>', '"': '"', "'": '''
}[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
אם הדפדפן מחסום תוכן מעורבב.