در عصر دیجیتال امروز، توانایی استخراج متن از تصاویر به طور فزاینده ای مهم می شود.اگر شما با اسناد اسکن شده، کارت های کسب و کار، و یا هر نوع دیگر از داده های مبتنی بر تصویر، قادر به جستجو و دستکاری این اطلاعات به درستی می تواند زمان و تلاش زیادی را صرفه جویی کند.این راهنمای شما را از طریق ساخت یک برنامه وب تعاملی با استفاده از Aspose.OCR و ASP.NET Core که به کاربران اجازه می دهد تا تصاویر را بارگذاری، جستجو برای کلمات کلیدی خاص در متن گرفته شده و مشاهده نتایج در زمان واقعی با بازی های برجسته.
منبع حقیقت: کد و جریان زیر در پایان این مقاله (نقطه نهایی کنترلر، AsposeOcr
استفاده، و فرم پاسخ JSON).
نمونه کامل
پیش شرط
- نرم افزار .NET 8 (یا .Net 6+)
- نرم افزار Visual Studio VS Code
- برای دسترسی به
Aspose.OCR
- (اختیاری) یک فایل مجوز Aspose اگر قصد عبور از محدودیت های ارزیابی را دارید
مرحله 1: ایجاد پروژه ASP.NET Core MVC
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: اضافه کردن کنترلر (Upload + OCR + Search)
ایجاد 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 و برنامه
ایجاد Startup.cs و Programs همانطور که در هارد برای امکان MVC، فایل های استاتیک، روتینگ و HTTPS هدایت مجدد.
- استارتاپ .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: ایجاد UI آپلود + جستجو (Razor View)
ایجاد Views/Home/Index.cshtml با یک فرم بارگذاری ساده و یک جعبه جستجو.JavaScript فایل + کلمه کلیدی را به /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 بسته بندی جعبه ها و نقاشی برش (غیر پوشش داده شده توسط گندم).
مرحله ششم: برنامه را اجرا کنید
dotnet run
باز کردن URL نشان داده شده در کنسول (به عنوان مثال، https://localhost:5001
).یک تصویر را بارگذاری کنید، یک کلمه کلیدی را وارد کنید و روی Upload & Search کلیک کنید.
Keyword found!
یاKeyword not found.
(تولید شده توسط سرور)- تصویر استخراج شده با طرف مشتری
<mark>
برجسته
مرحله 7: بررسی های آماده تولید (اختیاری)
- تولید فایل: بررسی انواع MIME / افزونه ها و در نظر گرفتن اسکن آنتی ویروس.
- محدودیت اندازه: استفاده از
RequestSizeLimit
(به نظر می رسد) و محدودیت های proxy/web.config در صورت لزوم برعکس. - Cleanup: به طور منظم حذف فایل های قدیمی از
wwwroot/uploads
. - موقعیت: اگر به چندین زبان نیاز دارید، گزینه های زبان OCR را در سمت سرور تنظیم کنید.
- خطای UX: هشدارها را با توست ها جایگزین کنید؛ سوئیچ های بارگذاری و نوار پیشرفت اضافه کنید.
Troubleshooting
- ** نتایج OCR خالی**: سعی کنید ورودی با کیفیت بالا، جهت گیری صحیح یا فرمت های مختلف (PNG/TIFF) را امتحان کنید.
- CORS: اگر قسمت جلویی جدا باشد، CORS را فعال کنید و از URL API کامل استفاده کنید.
- HTTPS: اطمینان از اعتماد به نفس (
dotnet dev-certs https --trust
اگر مرورگر محتوای مخلوط را مسدود کند.