كيف تبني أداة علامات مائية لملفات PDF تعمل في المتصفح باستخدام JavaScript

تُستخدم العلامات المائية في ملفات PDF بشكل شائع للعلامات التجارية، وحماية المستندات، والموافقات، والملفات السرية، وتتبع المستندات الداخلية. سواء كان الأمر يتعلق بإضافة شعار شركة، أو ملصق “CONFIDENTIAL“، أو علامة مائية لمسودة، غالبًا ما يحتاج المستخدمون إلى طريقة سريعة لتعديل ملفات PDF دون رفع الملفات إلى خوادم خارجية.

لقد جعلت المتصفحات الحديثة هذا الأمر أسهل بكثير من ذي قبل. فبدلاً من إرسال المستندات إلى خادم خلفي (backend)، يمكننا معالجة ملفات PDF مباشرة داخل المتصفح باستخدام JavaScript. هذا يحافظ على خصوصية المستندات مع جعل الأداة سريعة وسهلة الاستخدام.

في هذا الدليل، ستقوم ببناء أداة علامات مائية لملفات PDF تعمل في المتصفح باستخدام JavaScript. ستدعم الأداة كلاً من العلامات المائية النصية والصورية، مع إمكانية تعديل الشفافية (opacity)، والدوران (rotation)، واختيار الصفحات، وضوابط تحديد الموضع، وإخراج ملف PDF قابل للتنزيل مباشرة من المتصفح. كل شيء يعمل بالكامل من جانب العميل (client-side) دون أي خادم خلفي.

كيف تعمل العلامات المائية في ملفات PDF

العلامة المائية في ملف PDF هي ببساطة نص إضافي أو صورة يتم وضعها كطبقة فوق صفحة PDF موجودة. في المتصفح، يمكن لمكتبات JavaScript تحميل صفحات PDF، وتعديلها بصريًا، وتصدير نسخة جديدة قابلة للتنزيل. تبدأ العملية عندما يقوم المستخدم برفع ملف PDF إلى الأداة. ثم يقرأ JavaScript المستند، ويحمّل كل صفحة، ويطبق عناصر العلامة المائية مثل النصوص أو الشعارات فوق المحتوى الحالي. بعد تطبيق إعدادات الموضع والشفافية، يتم إنشاء ملف PDF المحدّث وتنزيله مباشرة من المتصفح. كل شيء يحدث محليًا داخل المتصفح، مما يعني أن المستندات المرفوعة لا تغادر جهاز المستخدم أبدًا، وهو ما يعزز الخصوصية والأمان.

إعداد المشروع

هذا المشروع بسيط بطبيعته. كل شيء يعمل مباشرة داخل المتصفح باستخدام JavaScript، لذلك لا يلزم وجود خادم خلفي (backend server). كل ما تحتاجه هو:

• ملف HTML
• ملف JavaScript
• مكتبة لمعالجة ملفات PDF

المكتبة التي سنستخدمها

سنستخدم مكتبة PDF-lib لتعديل مستندات PDF الموجودة داخل المتصفح. أضفها باستخدام شبكة توصيل المحتوى (CDN):

<script src="https://unpkg.com/pdf-lib/dist/pdf-lib.min.js"></script>

تسمح لنا هذه المكتبة بتحميل ملفات PDF مباشرة في المتصفح، وتعديل الصفحات الموجودة، وإدراج نصوص أو صور علامات مائية مخصصة، وأخيرًا تصدير المستند المحدّث كملف PDF جديد قابل للتنزيل. ولأن كل شيء يعمل من جانب العميل (client-side) باستخدام JavaScript، يمكن للمستخدمين تعديل ملفات PDF دون رفع الملفات إلى خادم.

إنشاء واجهة الرفع

ابدأ بإدخال رفع أساسي (upload input):

<input type="file" id="pdfUpload" accept="application/pdf">
<button onclick="addWatermark()"> Apply Watermark </button>

يتيح هذا للمستخدمين رفع ملفات PDF مباشرة من المتصفح. تتضمن الأداة أيضًا إعدادات العلامة المائية مثل إدخال النص، ورفع الصورة، وضوابط الشفافية (opacity controls)، وتحديد الموضع (positioning)، واختيار الصفحات. إليك كيف تبدو لوحة إعدادات العلامة المائية داخل الأداة:

إضافة علامات مائية نصية

تُستخدم العلامات المائية النصية بشكل شائع للملصقات مثل “CONFIDENTIAL“، “DRAFT“، أو “APPROVED“. على سبيل المثال:

page.drawText("CONFIDENTIAL", { x: 200, y: 300, size: 48, opacity: 0.5 });

يقوم هذا بإدراج نص العلامة المائية مباشرة على صفحة PDF. يمكن للمستخدمين أيضًا تخصيص مظهر العلامة المائية مباشرة داخل الأداة. بالنسبة للعلامات المائية النصية، يمكن للمستخدمين تعديل حجم الخط، وتغيير لون النص، وتطبيق أنماط غامقة أو مائلة (bold or italic styling)، والتحكم في مستويات الشفافية (opacity levels)، وتدوير العلامة المائية بزوايا مختلفة لتحسين الرؤية والحماية. إليك مثال على عناصر التحكم في العلامة المائية النصية داخل الأداة:

إضافة علامات مائية صورية

قد يرغب بعض المستخدمين في تطبيق شعارات أو رسومات ذات علامة تجارية بدلاً من النص العادي. على سبيل المثال:

const image = await pdfDoc.embedPng(imageBytes);
page.drawImage(image, { x: 180, y: 250, width: 120, height: 120, opacity: 0.5 });

يقوم هذا بإدراج علامة مائية صورية على صفحة PDF. تدعم الأداة أيضًا ضوابط تحجيم الصور (image scaling controls) حتى يتمكن المستخدمون من تغيير حجم الشعارات المرفوعة قبل تطبيقها. إليك مثال على إعدادات العلامة المائية الصورية داخل الأداة:

ضوابط تحديد الموضع والشفافية

يعد تحديد موضع العلامة المائية مهمًا للقراءة ومظهر المستند. قد يرغب المستخدمون في علامات مائية مركزية، أو تحديد موضع في الزاوية، أو تراكبات قطرية (diagonal overlays) حسب نوع المستند. على سبيل المثال:

page.drawText("CONFIDENTIAL", { x: 220, y: 250, rotate: degrees(45), opacity: 0.5 });

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

اختيار الصفحات لتطبيق العلامة المائية

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

const selectedPages = [1, 3, 5];

تسمح الأداة للمستخدمين بالتحكم بدقة في المكان الذي يجب أن تظهر فيه العلامة المائية. على سبيل المثال، يمكن تطبيق علامة مائية على كل صفحة في المستند، أو على الصفحات ذات الأرقام الزوجية فقط، أو الصفحات ذات الأرقام الفردية فقط، أو نطاقات صفحات مخصصة محددة مثل 1-3,5. هذا يجعل الأداة أكثر مرونة لحالات الاستخدام الواقعية مثل العقود والفواتير والتقارير والشهادات والمستندات ذات العلامات التجارية.

توليد وتنزيل ملف PDF النهائي

بمجرد تهيئة إعدادات العلامة المائية، يقوم المتصفح بإنشاء ملف PDF المحدّث مباشرة داخله. على سبيل المثال:

const pdfBytes = await pdfDoc.save();

ثم يصبح الملف المحدّث قابلاً للتنزيل:

download(pdfBytes, "watermarked.pdf");

تحدث هذه العملية محليًا دون رفع الملفات إلى خوادم خارجية.

عرض توضيحي: كيف تعمل أداة العلامة المائية لملفات PDF

لهذا المثال، سنقوم بتطبيق علامة مائية مخصصة مباشرة داخل المتصفح.

الخطوة 1: رفع ملف PDF

يقوم المستخدمون برفع مستند PDF إلى أداة العلامة المائية.

الخطوة 2: معاينة ملف PDF المرفوع

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

الخطوة 3: تهيئة إعدادات العلامة المائية

يمكن للمستخدمين الاختيار بين وضع العلامة المائية النصية أو الصورية. بالنسبة للعلامات المائية النصية، يمكن للمستخدمين تخصيص حجم الخط، واللون، والشفافية، والدوران.

بالنسبة للعلامات المائية الصورية، يمكن للمستخدمين رفع شعار وتعديل حجم الصورة قبل تطبيقها.

الخطوة 4: تحديد موضع العلامة المائية وتطبيقها

يمكن للمستخدمين إعادة وضع العلامة المائية بصريًا قبل إنشاء الملف النهائي.

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

تساعد ضوابط الشفافية والدوران على تحسين الرؤية دون حجب محتوى المستند المهم. يمنح هذا المستخدمين مزيدًا من المرونة عند وضع العلامات المائية على العقود أو الفواتير أو التقارير أو الشهادات أو ملفات PDF ذات العلامات التجارية.

الخطوة 5: توليد ملف PDF بالعلامة المائية

بمجرد تهيئة إعدادات العلامة المائية، يمكن للمستخدمين النقر فوق زر التوليد لمعالجة المستند مباشرة داخل المتصفح. تطبق الأداة العلامة المائية على الصفحات المختارة وتعد ملف PDF المحدّث على الفور. إليك كيف يبدو زر توليد PDF داخل الأداة:

الخطوة 6: معاينة وتنزيل ملف PDF المحدّث

بعد اكتمال المعالجة، تعرض الأداة معاينة حية لملف PDF النهائي الذي تم وضع العلامة المائية عليه. يمكن للمستخدمين مراجعة المستند المحدّث قبل تنزيله. تعرض الواجهة أيضًا تفاصيل مفيدة للملف مثل إجمالي الصفحات وحجم الملف النهائي. يتوفر خيار إعادة التسمية قبل تنزيل ملف PDF الذي تم إنشاؤه. إليك مثال على قسم معاينة الإخراج النهائي:

ملاحظات هامة من الاستخدام العملي

عند العمل مع مستندات PDF الكبيرة، تصبح سرعة الأداء والعرض مهمة. عادةً ما يكون تطبيق العلامات المائية صفحة بصفحة أكثر استقرارًا من تعديل كل شيء في وقت واحد. على سبيل المثال:

for (const page of pdfDoc.getPages()) {
  // apply watermark
}

تحسين آخر مفيد هو تقليل حجم الصورة للعلامات المائية قبل تضمين الشعارات الكبيرة. هذا يقلل من حجم ملف الإخراج ويحسن سرعة المعالجة. الشفافية (Opacity) مهمة أيضًا. العلامات المائية الداكنة جدًا يمكن أن تجعل المستندات صعبة القراءة، خاصة على الصفحات المطبوعة. عادةً ما يعمل الحفاظ على شفافية العلامة المائية بين 0.3 و 0.5 بشكل جيد في المواقف الواقعية. نظرًا لأن كل شيء يعمل محليًا داخل المتصفح، تظل المستندات المرفوعة خاصة ولا تغادر جهاز المستخدم أبدًا.

أخطاء شائعة يجب تجنبها

أحد الأخطاء الشائعة هو تطبيق العلامات المائية بشفافية كاملة. هذا يمكن أن يجعل المستند صعب القراءة. على سبيل المثال:

opacity: 1

بدلاً من ذلك، استخدم قيم شفافية أقل:

opacity: 0.4

مشكلة أخرى هي تحديد موضع العلامة المائية بشكل غير صحيح. إذا تم ترميز الإحداثيات (coordinates) بشكل خاطئ، فقد تظهر العلامة المائية خارج منطقة الصفحة المرئية. عادةً ما يعمل تحديد الموضع الديناميكي بشكل أفضل عبر أحجام الصفحات المختلفة. يمكن أن تزيد العلامات المائية الصورية الكبيرة أيضًا من حجم ملف PDF بشكل كبير. يساعد تغيير حجم الصور قبل تضمينها على تحسين الأداء. خطأ شائع آخر هو نسيان التحقق من صحة الملفات المرفوعة:

if (!file || file.type !== "application/pdf") {
  alert("Please upload a valid PDF file.");
  return;
}

يمنع هذا الملفات غير المدعومة من تعطيل الأداة.

الخاتمة

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

بمجرد فهم سير العمل هذا، يمكنك توسيعه بشكل أكبر بميزات مثل التوقيعات الرقمية، والتعليقات التوضيحية لملفات PDF، وأدوات الختم، وحماية كلمة المرور، أو تحرير المستندات المتقدم. وهذا هو المكان الذي تبدأ فيه الأمور في أن تصبح مثيرة للاهتمام حقًا.