একটি ব্রাউজার ডকুমেন্ট অ্যানোটেশন স্টুডিও কীভাবে তৈরি করবেন

চুক্তিপত্র (contracts), ইনভয়েস বা প্রমাণের সাথে কাজ করা দলগুলোর জন্য কেবল একটি সাধারণ ভিউয়ারের চেয়ে বেশি কিছু প্রয়োজন। সার্ভারে সংবেদনশীল ফাইল আপলোড না করেই বিভিন্ন উৎস থেকে পৃষ্ঠাগুলো একত্রিত করার একটি উপায় তাদের প্রয়োজন।

আপনি TypeScript, Vite এবং Dynamsoft টুলস ব্যবহার করে একটি ক্লায়েন্ট-সাইড ডকুমেন্ট অ্যানোটেশন স্টুডিও তৈরি করতে পারেন।

এই অ্যাপটি আপনাকে যা যা করতে দেয়:

টেকনিক্যাল স্ট্যাক (Technical Stack):

মূল লজিক (Key Logic):

বর্তমান ফাইলটি প্রতিস্থাপন করার পরিবর্তে, পৃষ্ঠাগুলো যুক্ত করতে doc.loadSource(source, index) ব্যবহার করুন। এটি আপনাকে একাধিক ভিন্ন ইমেজ এবং PDF থেকে একটি একক ডকুমেন্ট তৈরি করতে সাহায্য করবে।

স্ক্যানারের জন্য Dynamic Web TWAIN ব্রিজ ব্যবহার করুন। যেহেতু ব্রাউজারে কোনো স্ট্যান্ডার্ড স্ক্যানার API নেই, তাই DWT হার্ডওয়্যারের সাথে সংযোগ প্রদান করে। আপনি স্ক্যান করা ইমেজগুলোকে একটি PDF blob-এ রূপান্তর করতে পারেন এবং তাৎক্ষণিকভাবে আপনার ভিউয়ারে যোগ করতে পারেন।

নিরাপত্তার জন্য রেডাকশন অ্যানোটেশন (redaction annotations) ব্যবহার করুন। আপনি সংবেদনশীল টেক্সটের ওপর একটি কালো আয়তক্ষেত্র তৈরি করতে পারেন। ব্যবহারকারীরা ডকুমেন্টে স্থায়ীভাবে প্রয়োগ করার আগে এই মার্কটি সরাতে বা এর আকার পরিবর্তন করতে পারেন।

এক্সপোর্ট করার ক্ষেত্রে অনেক নমনীয়তা রয়েছে। আপনি বিভিন্ন PDF মোড বেছে নিতে পারেন:

এই পদ্ধতিটি সমস্ত প্রসেসিং ক্লায়েন্ট সাইডেই রাখে। ফলে আপনার ডেটা ব্যক্তিগত এবং সুরক্ষিত থাকে।

উৎস: https://dev.to/yushulx/how-to-build-a-browser-document-annotation-studio-with-pdf-image-and-scanner-capture-in-typescript-5e5c