إنشاء صفحة تحويل الصور إلى نص عبر الإنترنت لمدونة بلوجر

HTML CSS JS

نظرة عامة

يُنشئ الكود أداة OCR تعتمد على الويب بالميزات التالية:

واجهة مستخدم لاختيار ملف صورة ولغة للتعرف على النص.
زر لبدء معالجة OCR وآخر لمسح الواجهة.
ردود فعل بصرية أثناء المعالجة (مؤشر التقدم، عرض اسم الملف، وإخراج النتائج).
تصميم متجاوب للأجهزة المحمولة وسطح المكتب.
معالجة الأخطاء وتأمين النصوص ضد هجمات XSS.
التكامل مع مكتبة Tesseract.js لأداء OCR على جانب العميل.

يدعم التطبيق اللغات الفيتنامية والإنجليزية والعربية، ويستخدم Tesseract.js للتعرف على النصوص في الصور المرفوعة.

CSS (التنسيق)

يحدد قسم CSS المظهر البصري وتخطيط التطبيق. يستخدم تصميمًا نظيفًا وعصريًا مع عناصر متجاوبة لضمان سهولة الاستخدام عبر الأجهزة.

القواعد الرئيسية لـ CSS

#read-container


#read-container {
    font-family: 'Arial', sans-serif;
    margin: 20px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

الغرض: تنسيق الحاوية الرئيسية للتطبيق.

التفاصيل:

font-family: 'Arial', sans-serif: يحدد الخط إلى Arial مع بديل sans-serif.
margin: 20px: يضيف تباعدًا حول الحاوية.
text-align: center: يوسّط كل المحتوى داخل الحاوية.
max-width: 800px: يحدد عرض الحاوية الأقصى بـ 800 بكسل لسهولة القراءة.
margin-left: auto; margin-right: auto: يوسّط الحاوية أفقيًا.

.custom-file-input


#read-container .custom-file-input {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid #3498db;
    color: #3498db;
    border-radius: 5px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

الغرض: تنسيق عنصر إدخال الملف ليبدو كزر.

التفاصيل:

display: inline-block: يسمح للعنصر بالظهور في نفس السطر مع عناصر أخرى.
padding: 12px 20px: يضيف تباعدًا داخليًا لمظهر الزر.
font-size: 16px; font-weight: bold: يجعل النص أكبر وسميكًا للتأكيد.
white-space: nowrap: يمنع التفاف النص.
cursor: pointer: يظهر مؤشر الفأرة للدلالة على التفاعل.
border: 2px solid #3498db; color: #3498db: يطبق حدودًا زرقاء ونصًا أزرق.
border-radius: 5px: يُدور الزوايا لمظهر عصري.
background-color: #fff: يحدد خلفية بيضاء.
transition: all 0.3s ease-in-out: يُنشئ انتقالًا سلسًا للتغييرات (مثل تأثيرات التمرير).

حالات التمرير والنقر لإدخال الملف


.custom-file-input:hover {
    background-color: #3498db;
    color: #fff;
}
.custom-file-input:active {
    background-color: #2980b9;
}

الغرض: توفير رد فعل بصري عند تمرير المؤشر أو النقر على إدخال الملف.

التفاصيل:

:hover: يغير الخلفية إلى الأزرق (#3498db) والنص إلى الأبيض عند التمرير.
:active: يُغمق الخلفية (#2980b9) عند النقر.

.file-name


#read-container .file-name {
    display: inline-block;
    margin: 0 10px;
    font-style: italic;
    color: #666;
}

الغرض: تنسيق النص الذي يعرض اسم الملف المختار.

التفاصيل:

margin: 0 10px: يضيف تباعدًا أفقيًا.
font-style: italic: يجعل النص مائلًا للتأكيد.
color: #666: يستخدم لونًا رماديًا لمظهر خفيف.

.button-group


#read-container .button-group {
    margin: 15px 0;
}

الغرض: إضافة تباعد حول مجموعة الأزرار (OCR ومسح).

التفاصيل:

margin: 15px 0: يضيف تباعدًا رأسيًا.

تنسيق الأزرار


#read-container button {
    padding: 12px 20px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

الغرض: تحديد النمط الأساسي لجميع الأزرار.

التفاصيل:

padding: 12px 20px: يضيف تباعدًا داخليًا.
margin: 5px: يضيف تباعدًا بين الأزرار.
border: none: يزيل الحدود الافتراضية.
border-radius: 5px: يُدور الزوايا.
cursor: pointer: يشير إلى التفاعل.
transition: يُنشئ انتقالًا سلسًا للتغييرات.

أنماط الأزرار المحددة


#read-container .ocr-button {
    background-color: #2ecc71;
    color: #fff;
}
#read-container .clear-button {
    background-color: #e74c3c;
    color: #fff;
}

الغرض: تنسيق زر "استخراج النص" (OCR) وزر "مسح" بألوان مميزة.

التفاصيل:

.ocr-button: خلفية خضراء (#2ecc71) لزر OCR.
.clear-button: خلفية حمراء (#e74c3c) لزر المسح.
كلاهما له نص أبيض (color: #fff).

حالة الزر المعطل


#read-container button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

الغرض: تنسيق الأزرار عند تعطيلها (مثل أثناء معالجة OCR).

التفاصيل:

background-color: #ccc: خلفية رمادية للدلالة على عدم النشاط.
cursor: not-allowed: يظهر مؤشر "غير مسموح".

#result


#read-container #result {
    margin-top: 20px;
    text-align: left;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

الغرض: تنسيق حاوية نتائج OCR.

التفاصيل:

margin-top: 20px: يضيف تباعدًا أعلى النتائج.
text-align: left: يصطف النص إلى اليسار لسهولة القراءة.
background-color: #f9f9f9: خلفية رمادية فاتحة للتباين.
padding: 15px: يضيف تباعدًا داخليًا.
border-radius: 5px: يُدور الزوايا.

pre


#read-container pre {
    white-space: pre-wrap;
    margin: 0;
}

الغرض: تنسيق عنصر <pre> المستخدم لعرض النص المستخرج.

التفاصيل:

white-space: pre-wrap: يحافظ على الفراغات ويلف النص لسهولة القراءة.
margin: 0: يزيل الهوامش الافتراضية.

.progress


#read-container .progress {
    margin: 10px 0;
    color: #3498db;
    font-style: italic;
}

الغرض: تنسيق نص مؤشر التقدم.

التفاصيل:

margin: 10px 0: يضيف تباعدًا رأسيًا.
color: #3498db: نص أزرق للرؤية.
font-style: italic: يجعل النص مائلًا للتأكيد.

.language-select


.language-select {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #3498db;
    font-size: 16px;
}

الغرض: تنسيق قائمة اختيار اللغة المنسدلة.

التفاصيل:

padding: 10px: يضيف تباعدًا داخليًا.
margin: 10px: يضيف تباعدًا خارجيًا.
border: 1px solid #3498db: حدود زرقاء.
border-radius: 5px: يُدور الزوايا.
font-size: 16px: يطابق أحجام الإدخال الأخرى.

استعلام الوسائط للتجاوب


@media (max-width: 600px) {
    #read-container .custom-file-input,
    #read-container button {
        width: 100%;
        margin: 5px 0;
    }
}

الغرض: جعل الواجهة متجاوبة للشاشات الصغيرة (مثل الأجهزة المحمولة).

التفاصيل:

يُطبق عندما يكون عرض الشاشة 600 بكسل أو أقل.
width: 100%: يجعل إدخال الملف والأزرار بعرض كامل.
margin: 5px 0: يعدل الهوامش للتكديس الرأسي.

HTML (الهيكلية)

يحدد HTML هيكل التطبيق، بما في ذلك عناصر الإدخال، الأزرار، ومناطق العرض.

العناصر الرئيسية لـ HTML

سكربت Tesseract.js


<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.0.4/tesseract.min.js"></script>

الغرض: استيراد مكتبة Tesseract.js (الإصدار 5.0.4) من CDN.

التفاصيل: Tesseract.js هي مكتبة JavaScript لأداء OCR في المتصفح، تمكّن استخراج النصوص من الصور.

الحاوية الرئيسية


<div id='read-container'>

الغرض: الحاوية الرئيسية لجميع عناصر واجهة المستخدم، منسقة بواسطة قاعدة #read-container في CSS.

اختيار اللغة


<select class="language-select" id="languageSelect">
    <option value="vie">Vietnamese</option>
    <option value="eng">English</option>
    <option value="ara">Arabic</option>
</select>

الغرض: يسمح للمستخدم باختيار لغة OCR.

التفاصيل:

<select>: قائمة منسدلة.
class="language-select": يطبق التنسيق.
id="languageSelect": يستخدمه JavaScript للوصول إلى القيمة المختارة.
الخيارات تشمل الفيتنامية (vie)، الإنجليزية (eng)، والعربية (ara)، مطابقة لرموز لغات Tesseract.js.

إدخال الملف


<input type="file" id="imageInput" accept="image/*" class="custom-file-input">

الغرض: يسمح للمستخدم برفع ملف صورة.

التفاصيل:

type="file": يُنشئ إدخال ملف.
id="imageInput": يستخدمه JavaScript للوصول إلى الإدخال.
accept="image/*": يقصر الرفع على ملفات الصور (مثل PNG، JPEG).
class="custom-file-input": يطبق تنسيقًا يشبه الزر.

عرض اسم الملف


<span class="file-name">No file selected</span>

الغرض: يعرض اسم الملف المختار أو "لم يتم اختيار ملف" إذا لم يُختَر ملف.

التفاصيل:

class="file-name": يطبق التنسيق.
يتم تحديثه ديناميكيًا بواسطة JavaScript عند اختيار ملف.

مجموعة الأزرار


<div class="button-group">
    <button class="ocr-button" onclick="performOCR()" id="ocrButton">Extract Text</button>
    <button class="clear-button" onclick="clearAll()" id="clearButton">Clear</button>
</div>

الغرض: يحتوي على زري "استخراج النص" و"مسح".

التفاصيل:

class="button-group": يطبق التباعد.
زر OCR:
- class="ocr-button": تنسيق أخضر.
- onclick="performOCR()": يستدعي دالة performOCR عند النقر.
- id="ocrButton": يستخدمه JavaScript لتعطيل/تمكين الزر.
زر المسح:
- class="clear-button": تنسيق أحمر.
- onclick="clearAll()": يستدعي دالة clearAll عند النقر.
- id="clearButton": يستخدم للتعرف.

مؤشر التقدم


<div class="progress" id="progress">Ready</div>

الغرض: يعرض حالة المعالجة (مثل "جاهز"، "جارٍ المعالجة..."، "مكتمل").

التفاصيل:

class="progress": يطبق التنسيق.
id="progress": يستخدمه JavaScript لتحديث النص.

عرض النتائج


<div id="result"></div>

الغرض: يعرض النص المستخرج أو رسائل الخطأ.

التفاصيل:

id="result": يستخدمه JavaScript لإدراج المحتوى.
فارغ في البداية، يُملأ بعد معالجة OCR.

JavaScript (الوظائف)

يتعامل كود JavaScript مع منطق اختيار الملف، معالجة OCR، عرض النتائج، وإدارة الواجهة. يستخدم Tesseract.js لـ OCR ويتضمن مستمعات الأحداث، معالجة الأخطاء، وتأمين النصوص ضد XSS.

الدوال والمنطق الرئيسي لـ JavaScript

دالة performOCR


function performOCR() {
    const inputElement = document.getElementById('imageInput');
    const resultElement = document.getElementById('result');
    const progressElement = document.getElementById('progress');
    const ocrButton = document.getElementById('ocrButton');
    const languageSelect = document.getElementById('languageSelect');
    const file = inputElement.files[0];

    if (!file) {
        alert('Please select an image.');
        return;
    }

    ocrButton.disabled = true;
    progressElement.textContent = 'Processing...';
    resultElement.innerHTML = '';

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
        img.onload = function() {
            Tesseract.recognize(
                img,
                languageSelect.value,
                {
                    logger: info => {
                        if (info.status === 'recognizing text') {
                            progressElement.textContent = `Processing... ${Math.round(info.progress * 100)}%`;
                        }
                    },
                    psm: 3
                }
            ).then(({ data }) => {
                if (data && data.text) {
                    resultElement.innerHTML = '<p>Extracted Text:</p><pre>' + escapeHTML(data.text) + '</pre>';
                    progressElement.textContent = 'Completed';
                } else {
                    resultElement.innerHTML = '<p>No text found in the image.</p>';
                    progressElement.textContent = 'No text found';
                }
            }).catch(error => {
                console.error('OCR Error:', error);
                resultElement.innerHTML = '<p>Error processing image. Please try again.</p>';
                progressElement.textContent = 'Error';
            }).finally(() => {
                ocrButton.disabled = false;
            });
        };
    };
    reader.readAsDataURL(file);
}

الغرض: تنفيذ OCR على الصورة المختارة وعرض النص المستخرج.

التفاصيل:

المراجع للعناصر: يسترجع عناصر DOM (inputElement, resultElement, progressElement, ocrButton, languageSelect) باستخدام getElementById.
file = inputElement.files[0]: يحصل على الملف الأول المختار.
التحقق من الملف:
- يتحقق إذا تم اختيار ملف (if (!file)).
- يعرض تنبيهًا ويخرج إذا لم يُختَر ملف.
إعداد واجهة المستخدم:
- يعطل زر OCR (ocrButton.disabled = true) لمنع النقرات المتعددة.
- يحدد نص التقدم إلى "جارٍ المعالجة...".
- يمسح منطقة النتائج (resultElement.innerHTML = '').
قراءة الملف:
- يُنشئ FileReader لقراءة ملف الصورة كـ Data URL.
- عند reader.onload， يُنشئ كائن Image ويحدد src إلى Data URL.
معالجة الصورة:
- عند img.onload， يستدعي Tesseract.recognize مع:
  - الصورة (img).
  - اللغة المختارة (languageSelect.value， مثل vie， eng， ara).
  - الخيارات:
    - logger: يحدث نص التقدم بنسبة الإكمال (مثل "جارٍ المعالجة... 50%").
    - psm: 3: يحدد وضع تجزئة الصفحة في Tesseract إلى "تلقائي" لتحسين اكتشاف النص.
معالجة النتائج:
- عند النجاح (.then):
  - يتحقق إذا كان data.text موجودًا.
  - إذا وُجد نص، يعرضه في وسم <pre> مع تأمين HTML (escapeHTML(data.text)).
  - إذا لم يُوجد نص، يعرض "لم يتم العثور على نص في الصورة".
  - يحدث التقدم إلى "مكتمل" أو "لم يتم العثور على نص".
- عند الخطأ (.catch):
  - يسجل الخطأ في وحدة التحكم.
  - يعرض رسالة خطأ في منطقة النتائج.
  - يحدد التقدم إلى "خطأ".
- عند الاكتمال (.finally):
  - يُعيد تمكين زر OCR.
تشغيل قراءة الملف:
- reader.readAsDataURL(file): يبدأ قراءة الملف.

دالة clearAll


function clearAll() {
    const inputElement = document.getElementById('imageInput');
    const resultElement = document.getElementById('result');
    const progressElement = document.getElementById('progress');
    const fileNameElement = document.querySelector('.file-name');

    inputElement.value = '';
    resultElement.innerHTML = '';
    progressElement.textContent = 'Ready';
    fileNameElement.textContent = 'No file selected';
}

الغرض: إعادة تعيين الواجهة إلى حالتها الأولية.

التفاصيل:

يسترجع عناصر DOM.
يمسح إدخال الملف (inputElement.value = '').
يمسح منطقة النتائج (resultElement.innerHTML = '').
يعيد نص التقدم إلى "جاهز".
يعيد عرض اسم الملف إلى "لم يتم اختيار ملف".

دالة escapeHTML


function escapeHTML(str) {
    return str.replace(/&/g, '&amp;')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;')
             .replace(/'/g, '&#39;');
}

الغرض: تأمين الأحرف الخاصة بـ HTML لمنع هجمات XSS.

التفاصيل:

تأخذ سلسلة (str) وتستبدل:
- & بـ &
- < بـ <
- > بـ >
- " بـ "
- ' بـ '
تضمن عرض النص المستخرج كنص، وليس تفسيره كـ HTML.

مستمع حدث إدخال الملف


document.getElementById('imageInput').addEventListener('change', function() {
    const fileNameElement = document.querySelector('.file-name');
    fileNameElement.textContent = this.files[0]?.name || 'No file selected';
});

الغرض: تحديث عرض اسم الملف عند اختيار ملف.

التفاصيل:

يستمع لحدث change على إدخال الملف.
يستخدم المشغل الاختياري (?.) للوصول بأمان إلى اسم الملف الأول.
يحدد عرض اسم الملف إلى اسم الملف أو "لم يتم اختيار ملف" إذا لم يُختَر ملف.

كيفية العمل معًا

الحالة الأولية:

تُظهر الواجهة قائمة منسدلة للغة، إدخال ملف منسق كزر، عرض اسم الملف ("لم يتم اختيار ملف")، زرين ("استخراج النص" و"مسح")، مؤشر تقدم ("جاهز")، ومنطقة نتائج فارغة.
التخطيط مركزي ومتجاوب، بعرض أقصى 800 بكسل.

تفاعل المستخدم:

اختيار اللغة: يختار المستخدم لغة (مثل الفيتنامية) من القائمة المنسدلة.
رفع الصورة: ينقر المستخدم على إدخال الملف، يختار صورة، ويظهر اسم الملف بجانبه.
استخراج النص:
- النقر على "استخراج النص" يُشغل performOCR.
- إذا لم يُختَر ملف، يظهر تنبيه.
- يُعطل زر OCR، ويتغير نص التقدم إلى "جارٍ المعالجة...".
- تُقرأ الصورة، تُعالج بواسطة Tesseract.js، وتُحدث نسبة التقدم.
- يُعرض النص المستخرج (أو رسالة خطأ) في منطقة النتائج.
- يُعاد تمكين زر OCR، ويُحدث نص التقدم ("مكتمل"، "لم يتم العثور على نص"، أو "خطأ").
مسح:
- النقر على "مسح" يُشغل clearAll， معيدًا الواجهة إلى حالتها الأولية.

التصميم المتجاوب:

على الشاشات الأصغر من 600 بكسل، تُكدس إدخال الملف والأزرار رأسيًا وتأخذ العرض الكامل.

الأمان:

دالة escapeHTML تضمن عرض النص المستخرج بأمان، مانعة تنفيذ الشيفرات الخبيثة.

الميزات الرئيسية

OCR باستخدام Tesseract.js: يؤدي التعرف على النصوص على جانب العميل.
دعم متعدد اللغات: يدعم الفيتنامية، الإنجليزية، والعربية.
ردود فعل المستخدم: يعرض أسماء الملفات، نسب التقدم، والنتائج/الأخطاء بوضوح.
تصميم متجاوب: يعمل على أجهزة سطح المكتب والمحمول.
معالجة الأخطاء: يتعامل مع حالات مثل عدم اختيار ملف، عدم العثور على نص، أو أخطاء المعالجة.
الأمان: يؤمن HTML لمنع هجمات XSS.
إمكانية الوصول: إشارات بصرية واضحة (مثل حالة الزر المعطل، نص التقدم).

التحسينات المحتملة

إضافة المزيد من اللغات: توسيع القائمة المنسدلة لتشمل لغات إضافية مدعومة بواسطة Tesseract.js.
معاينة الصورة: عرض صورة مصغرة للصورة المرفوعة قبل المعالجة.
نسخ إلى الحافظة: إضافة زر لنسخ النص المستخرج.
شريط تقدم: استبدال نص النسبة بشريط تقدم بصري.
التحقق من حجم الملف: تحديد الحد الأقصى لحجم الملف لمنع مشكلات الأداء.
السحب والإفلات: دعم سحب وإفلات الصور على الواجهة.
التوطين: ترجمة نصوص الأزرار والرسائل بناءً على لغة المستخدم.

يغطي هذا الشرح هيكلية الكود، تنسيقه، ووظائفه بالتفصيل باللغة العربية. أخبرني إذا كنت بحاجة إلى توضيح إضافي أو مساعدة في تنفيذ التحسينات!

الكود كاملا


<div id='read-container'>
    <select class="language-select" id="languageSelect">
        <option value="vie">Vietnamese</option>
        <option value="eng">English</option>
        <option value="ara">Arabic</option>
    </select>
    <input type="file" id="imageInput" accept="image/*" class="custom-file-input">
    <span class="file-name">No file selected</span>
    <div class="button-group">
        <button class="ocr-button" onclick="performOCR()" id="ocrButton">Extract Text</button>
        <button class="clear-button" onclick="clearAll()" id="clearButton">Clear</button>
    </div>
    <div class="progress" id="progress">Ready</div>
    <div id="result"></div>
</div>


#read-container {
    font-family: 'Arial', sans-serif;
    margin: 20px;
    text-align: center;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#read-container .custom-file-input {
    display: inline-block;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    border: 2px solid #3498db;
    color: #3498db;
    border-radius: 5px;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

.custom-file-input:hover {
    background-color: #3498db;
    color: #fff;
}

.custom-file-input:active {
    background-color: #2980b9;
}

#read-container .file-name {
    display: inline-block;
    margin: 0 10px;
    font-style: italic;
    color: #666;
}

#read-container .button-group {
    margin: 15px 0;
}

#read-container button {
    padding: 12px 20px;
    margin: 5px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

#read-container .ocr-button {
    background-color: #2ecc71;
    color: #fff;
}

#read-container .clear-button {
    background-color: #e74c3c;
    color: #fff;
}

#read-container button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

#read-container #result {
    margin-top: 20px;
    text-align: left;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 5px;
}

#read-container pre {
    white-space: pre-wrap;
    margin: 0;
}

#read-container .progress {
    margin: 10px 0;
    color: #3498db;
    font-style: italic;
}

.language-select {
    padding: 10px;
    margin: 10px;
    border-radius: 5px;
    border: 1px solid #3498db;
    font-size: 16px;
}

@media (max-width: 600px) {
    #read-container .custom-file-input,
    #read-container button {
        width: 100%;
        margin: 5px 0;
    }
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/tesseract.js/5.0.4/tesseract.min.js"></script>



<script>
function performOCR() {
    const inputElement = document.getElementById('imageInput');
    const resultElement = document.getElementById('result');
    const progressElement = document.getElementById('progress');
    const ocrButton = document.getElementById('ocrButton');
    const languageSelect = document.getElementById('languageSelect');
    const file = inputElement.files[0];

    if (!file) {
        alert('Please select an image.');
        return;
    }

    ocrButton.disabled = true;
    progressElement.textContent = 'Processing...';
    resultElement.innerHTML = '';

    const reader = new FileReader();
    reader.onload = function(e) {
        const img = new Image();
        img.src = e.target.result;
        img.onload = function() {
            Tesseract.recognize(
                img,
                languageSelect.value,
                {
                    logger: info => {
                        if (info.status === 'recognizing text') {
                            progressElement.textContent = `Processing... ${Math.round(info.progress * 100)}%`;
                        }
                    },
                    psm: 3
                }
            ).then(({ data }) => {
                if (data && data.text) {
                    resultElement.innerHTML = '<p>Extracted Text:</p><pre>' + escapeHTML(data.text) + '</pre>';
                    progressElement.textContent = 'Completed';
                } else {
                    resultElement.innerHTML = '<p>No text found in the image.</p>';
                    progressElement.textContent = 'No text found';
                }
            }).catch(error => {
                console.error('OCR Error:', error);
                resultElement.innerHTML = '<p>Error processing image. Please try again.</p>';
                progressElement.textContent = 'Error';
            }).finally(() => {
                ocrButton.disabled = false;
            });
        };
    };
    reader.readAsDataURL(file);
}

function clearAll() {
    const inputElement = document.getElementById('imageInput');
    const resultElement = document.getElementById('result');
    const progressElement = document.getElementById('progress');
    const fileNameElement = document.querySelector('.file-name');

    inputElement.value = '';
    resultElement.innerHTML = '';
    progressElement.textContent = 'Ready';
    fileNameElement.textContent = 'No file selected';
}

function escapeHTML(str) {
    return str.replace(/&/g, '&amp;')
             .replace(/</g, '&lt;')
             .replace(/>/g, '&gt;')
             .replace(/"/g, '&quot;')
             .replace(/'/g, '&#039;');
}

document.getElementById('imageInput').addEventListener('change', function() {
    const fileNameElement = document.querySelector('.file-name');
    fileNameElement.textContent = this.files[0]?.name || 'No file selected';
});
</script>

استكشف في مدونة أوعي وشك عالم الابتكار

إنشاء صفحة تحويل الصور إلى نص عبر الإنترنت لمدونة بلوجر

إنشاء صفحة تحويل الصور إلى نص عبر الإنترنت لمدونة بلوجر

نظرة عامة

CSS (التنسيق)

القواعد الرئيسية لـ CSS

#read-container

.custom-file-input

حالات التمرير والنقر لإدخال الملف

.file-name

.button-group

تنسيق الأزرار

أنماط الأزرار المحددة

حالة الزر المعطل

#result

pre

.progress

.language-select

استعلام الوسائط للتجاوب

HTML (الهيكلية)

العناصر الرئيسية لـ HTML

سكربت Tesseract.js

الحاوية الرئيسية

اختيار اللغة

إدخال الملف

عرض اسم الملف

مجموعة الأزرار

مؤشر التقدم

عرض النتائج

JavaScript (الوظائف)

الدوال والمنطق الرئيسي لـ JavaScript

دالة performOCR

دالة clearAll

دالة escapeHTML

مستمع حدث إدخال الملف

كيفية العمل معًا

الحالة الأولية:

تفاعل المستخدم:

التصميم المتجاوب:

الأمان:

الميزات الرئيسية

التحسينات المحتملة

الكود كاملا

معاينة

كيف كان المقال؟

إرسال تعليق