जब आप PDF पर लिख नहीं सकते, तो उन्हें पढ़ने का क्या फायदा?
सभी को नमस्कार! मैं अल्बर्ट हूँ, और मुझे टूल्स को अधिक सुविधाजनक बनाना पसंद है।
यदि आपने कभी स्व-अध्ययन (self-learning) करने का प्रयास किया है, प्रोग्रामिंग पाठ्यपुस्तकों का अध्ययन किया है, या अपने लैपटॉप या टैबलेट पर PDF से जटिल तकनीकी दस्तावेज़ पढ़े हैं, तो आप इस संघर्ष को अच्छी तरह जानते हैं। आप एक किताब खोलते हैं, एक महत्वपूर्ण कोड स्निपेट को हाइलाइट करना चाहते हैं, स्पष्टीकरण के बगल में एक त्वरित आरेख तीर (diagram arrow) बनाना चाहते हैं, या मार्जिन पर एक नोट छोड़ना चाहते हैं — और महसूस करते हैं कि मानक PDF व्यूअर या तो बहुत भारी हैं, पेड (paid) हैं, या यदि आप गलती से टैब को रीफ्रेश कर देते हैं तो आपके चित्र पूरी तरह से गायब हो जाते हैं।
मैं इसे ठीक करना चाहता था और PDF Ink बनाना चाहता था — सीधे ब्राउज़र में PDF पुस्तकों को पढ़ने और उन पर लिखने के लिए एक हल्का, तेज़ वेब एप्लिकेशन।
विचार और टेक स्टैक
मुख्य लक्ष्य एक ऐसा टूल बनाना था जो:
- किसी भी आधुनिक ब्राउज़र में एक क्लिक में लॉन्च हो सके।
- आपको किसी भी स्थानीय PDF पाठ्यपुस्तक को लोड करने की अनुमति दे।
- आपको माउस, स्टाइलस या स्पर्श का उपयोग करके पृष्ठों पर चित्र बनाने और टेक्स्ट नोट्स टाइप करने दे।
- सबसे महत्वपूर्ण: आपके वर्तमान पृष्ठ, ज़ूम स्तर, लाइब्रेरी सूची और सभी ड्राइंग नोट्स को स्थानीय रूप से सुरक्षित रूप से सहेजता है ताकि आप किसी भी समय अपनी पढ़ाई फिर से शुरू कर सकें।
कार्यान्वयन के लिए, मैंने आधुनिक स्टैक चुना: React + TypeScript + Vite + TailwindCSS।
PDF रेंडरिंग इंजन के लिए, मैंने मोज़िला के विश्वसनीय pdfjs-dist (PDF.js) को एकीकृत किया, जो दस्तावेज़ पृष्ठों को सीधे HTML5 <canvas> तत्वों पर रेंडर करता है।
डबल-लेयर कैनवास आर्किटेक्चर
माउस या टच इंटरेक्शन के दौरान एप्लिकेशन को अत्यधिक उत्तरदायी (responsive) रखने के लिए, मैंने कार्यक्षेत्र को दो स्वतंत्र परतों में विभाजित किया:
- PDF परत (PDF Layer): एक स्थिर पृष्ठभूमि
<canvas>जो सक्रिय पैमाने (ज़ूम) के संबंध में PDF पृष्ठ छवि को रेंडर करती है। - एनोटेशन परत (Annotation Layer): एक बिल्कुल पारदर्शी ओवरले
<canvas>जो उपयोगकर्ता के पॉइंटर इवेंट्स (PointerEvents) को रोकता है, वेक्टर स्ट्रोक खींचता है, और टेक्स्ट नोट्स को ऊपर रखता है।
यह डबल-लेयर दृष्टिकोण ड्राइंग को बेहद तेज़ बनाता है: जब कोई उपयोगकर्ता एक रेखा खींचता है, तो एप्लिकेशन केवल हल्के वेक्टर स्ट्रोक ओवरले को दोबारा पेंट करता है, जिससे भारी PDF कैनवास अप्रभावित रहता है।
टच-स्क्रीन उपकरणों के लिए, मैंने यह भी जोड़ा:
- मल्टी-टच पिंच-टू-ज़ूम स्केलिंग सपोर्ट।
- पेज पहलू अनुपात (aspect ratio) निर्देशांक के लिए मैप किए गए टच ड्रैग-एंड-ड्रॉप ऑफ़सेट के साथ टेक्स्ट नोट प्लेसमेंट।
डेटाबेस विकास: IndexedDB v2 में अपग्रेड करना
प्रोटोटाइप के प्रारंभिक संस्करण ने सक्रिय PDF फ़ाइल और सभी चित्रों को IndexedDB में last-opened कुंजी के तहत एकल ऑब्जेक्ट के रूप में सहेजा था।
हालाँकि, जैसे-जैसे पुस्तकें बड़ी होती गईं, हमें प्रदर्शन में बाधा (performance bottleneck) का सामना करना पड़ा:
समस्या: हर बार जब उपयोगकर्ता ने एक स्याही स्ट्रोक जोड़ा या एक टेक्स्ट नोट स्थानांतरित किया, तो एप्लिकेशन ने IndexedDB में एक ऑटोसेव किया। हर 250ms में कच्चे PDF फ़ाइल के 20MB ऐरे बफर को वापस डिस्क पर लिखने से इंटरफ़ेस धीमा हो गया और SSD भी घिस गया।
समाधान: फ़ाइलों को एनोटेशन से अलग करना
मैंने IndexedDB मैनेजर को फिर से लिखा और स्टोर स्कीमा को संस्करण 2 में अपग्रेड किया:
pdfsस्टोर: दस्तावेज़ UUID द्वारा कुंजीकृत कच्चे बाइनरी फ़ाइल बफ़र्स (ArrayBuffer) को संग्रहीत करता है। यह लाइब्रेरी में एक नई फ़ाइल अपलोड होने पर केवल एक बार लिखा जाता है।pdfs_metadataस्टोर: हल्के JSON मेटाडेटा को संग्रहीत करता है, जिसमें पृष्ठ संख्या, ज़ूम स्तर, ड्राइंग स्ट्रोक और टेक्स्ट निर्देशांक शामिल हैं।
अब, जैसे ही आप चित्र बनाते हैं, केवल हल्का मेटाडेटा ऑब्जेक्ट अपडेट होता है। इसे लिखने में एक मिलीसेकंड का एक अंश लगता है, जिससे लैग (lag) पूरी तरह से समाप्त हो जाता है!
मैंने एक स्वचालित माइग्रेशन स्क्रिप्ट भी जोड़ी है। यदि कोई उपयोगकर्ता पुराने संस्करण 1 डेटाबेस के साथ ऐप खोलता है, तो यह स्वचालित रूप से बाइनरी डेटा निकालता है, एक नया UUID उत्पन्न करता है, मेटाडेटा को अलग करता है, और उनके ड्राइंग सत्र को माइग्रेट करता है।
UX को चमकाना: लाइब्रेरी, भाषाएँ और ढहने योग्य नियंत्रण
PDF Ink को एक प्रीमियम वर्कस्पेस टूल की तरह महसूस कराने के लिए, मैंने तीन अतिरिक्त सुविधाओं को एकीकृत किया:
- रेस्पॉन्सिव PDF लाइब्रेरी: एक ढहने योग्य (collapsible) साइडबार पैनल जो अपलोड की गई PDF की सूची, पृष्ठ राज्यों और एनोटेशन आंकड़ों को इंटरैक्टिव कार्ड के साथ प्रदर्शित करता है।
- भाषा स्विचर: अंग्रेजी (डिफ़ॉल्ट, EN पहले) और रूसी (RU) का समर्थन करने वाली एक स्थानीयकरण प्रणाली का निर्माण किया, जिसमें सेटिंग्स को
localStorageमें सहेजा जाता है। - ढहने योग्य ब्रश सेटिंग्स: पेन कॉन्फ़िगरेशन रो (रंग, आकार स्लाइडर, अपारदर्शिता) को एक आइकन के माध्यम से टॉगल करने योग्य बनाया गया ताकि उपयोगकर्ता इसे छिपा सकें और छोटी स्क्रीन पर स्क्रीन वर्कस्पेस को अधिकतम कर सकें।
इसे आज़माएं!
आप यहाँ एप्लिकेशन का लाइव संस्करण आज़मा सकते हैं:
👉 PDF Ink लाइव ऐप
निष्कर्ष
सीखने के टूल्स को आपको ज्ञान प्राप्त करने पर ध्यान केंद्रित करने में मदद करनी चाहिए, न कि इंटरफ़ेस से लड़ने में। PDF Ink विकसित करने से मुझे पता चला कि कैसे आधुनिक ब्राउज़र API (IndexedDB, PointerEvents, HTML5 Canvas) डेवलपर्स को शक्तिशाली, ऑफलाइन-फर्स्ट टूल बनाने की अनुमति देते हैं जो उपयोगकर्ता डेटा गोपनीयता का सम्मान करते हैं।
खुशी से सीखें, और ऐसा कोड लिखें जो जीवन को आसान बनाता है!