ഒരു ബ്രൗസർ ഡോക്യുമെന്റ് അനോട്ടേഷൻ സ്റ്റുഡിയോ എങ്ങനെ നിർമ്മിക്കാം

കരാറുകൾ (contracts), ഇൻവോയ്‌സുകൾ (invoices), അല്ലെങ്കിൽ തെളിവുകൾ (evidence) എന്നിവയുമായി പ്രവർത്തിക്കുന്ന ടീമുകൾക്ക് ഒരു സാധാരണ വ്യൂവർ (viewer) മാത്രം പോരാ. സെൻസിറ്റീവ് ആയ ഫയലുകൾ ഒരു സെർവറിലേക്ക് അപ്‌ലോഡ് ചെയ്യാതെ തന്നെ വിവിധ സ്രോതസ്സുകളിൽ നിന്നുള്ള പേജുകൾ ഒരുമിച്ച് ചേർക്കാൻ അവർക്ക് ഒരു മാർഗ്ഗം ആവശ്യമാണ്.

TypeScript, Vite, Dynamsoft ടൂളുകൾ എന്നിവ ഉപയോഗിച്ച് നിങ്ങൾക്ക് ഒരു ക്ലയന്റ് സൈഡ് (client-side) ഡോക്യുമെന്റ് അനോട്ടേഷൻ സ്റ്റുഡിയോ നിർമ്മിക്കാം.

ഈ ആപ്പ് നിങ്ങൾക്ക് ഇവ ചെയ്യാൻ അനുവദിക്കുന്നു:

Technical Stack:

Key Logic:

നിലവിലുള്ള ഫയൽ മാറ്റിസ്ഥാപിക്കുന്നതിന് പകരം, പേജുകൾ ചേർക്കാൻ doc.loadSource(source, index) ഉപയോഗിക്കുക. ഇത് വിവിധ ഇമേജുകളിൽ നിന്നും PDF-കളിൽ നിന്നും ഒരൊറ്റ ഡോക്യുമെന്റ് നിർമ്മിക്കാൻ നിങ്ങളെ സഹായിക്കുന്നു.

സ്കാനറുകൾക്കായി Dynamic Web TWAIN ബ്രിഡ്ജ് ഉപയോഗിക്കുക. ബ്രൗസറുകളിൽ ഒരു സ്റ്റാൻഡേർഡ് സ്കാനർ API ഇല്ലാത്തതിനാൽ, ഹാർഡ്‌വെയറുമായുള്ള കണക്ഷൻ DWT നൽകുന്നു. സ്കാൻ ചെയ്ത ചിത്രങ്ങളെ ഒരു PDF blob ആയി മാറ്റാനും അവ ഉടൻ തന്നെ നിങ്ങളുടെ വ്യൂവറിലേക്ക് ചേർക്കാനും നിങ്ങൾക്ക് കഴിയും.

സുരക്ഷയ്ക്കായി റെഡാക്ഷൻ അനോട്ടേഷനുകൾ (redaction annotations) ഉപയോഗിക്കുക. സെൻസിറ്റീവ് ആയ ടെക്സ്റ്റുകൾക്ക് മുകളിൽ നിങ്ങൾക്ക് ഒരു കറുത്ത ചതുരം (black rectangle) നിർമ്മിക്കാം. ഡോക്യുമെന്റിൽ ഇത് സ്ഥിരമായി പ്രയോഗിക്കുന്നതിന് മുമ്പ് ഉപയോക്താക്കൾക്ക് ഈ മാർക്ക് നീക്കാനോ വലുപ്പം മാറ്റാനോ കഴിയും.

എക്‌സ്‌പോർട്ട് ചെയ്യുന്നത് വളരെ ലളിതമാണ്. നിങ്ങൾക്ക് വിവിധ PDF മോഡുകൾ തിരഞ്ഞെടുക്കാം:

ഈ രീതി എല്ലാ പ്രോസസ്സിംഗും ക്ലയന്റ് സൈഡിൽ തന്നെ നിർത്തുന്നു. നിങ്ങളുടെ ഡാറ്റ സ്വകാര്യവും സുരക്ഷിതവുമായിരിക്കും.

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