ಬ್ರೌಸರ್ ಡಾಕ್ಯುಮೆಂಟ್ ಅ𝗻𝗻ೋ𝘁ೇಶನ್ ಸ್ಟುಡಿಯೋವನ್ನು (Browser Document Annotation Studio) ನಿರ್ಮಿಸುವುದು ಹೇಗೆ
ಒಪ್ಪಂದಗಳು (contracts), ಇನ್ವಾಯ್ಸ್ಗಳು (invoices) ಅಥವಾ ಸಾಕ್ಷ್ಯಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವ ತಂಡಗಳಿಗೆ ಕೇವಲ ಒಂದು ಸಾಮಾನ್ಯ ವೀಕ್ಷಕನ (viewer) ಅಗತ್ಯವಿರುವುದಿಲ್ಲ. ಸಂವೇದನಾಶೀಲ ಫೈಲ್ಗಳನ್ನು ಸರ್ವರ್ಗೆ ಅಪ್ಲೋಡ್ ಮಾಡದೆ, ವಿವಿಧ ಮೂಲಗಳಿಂದ ಪುಟಗಳನ್ನು ಒಟ್ಟುಗೂಡಿಸಲು ಅವರಿಗೆ ಒಂದು ಮಾರ್ಗ ಬೇಕಾಗುತ್ತದೆ.
ನೀವು TypeScript, Vite ಮತ್ತು Dynamsoft ಪರಿಕರಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಕ್ಲೈಂಟ್-ಸೈಡ್ (client-side) ಡಾಕ್ಯುಮೆಂಟ್ ಅ𝗻𝗻ೋ𝘁ೇಶನ್ ಸ್ಟುಡಿಯೋವನ್ನು ನಿರ್ಮಿಸಬಹುದು.
ಈ ಅಪ್ಲಿಕೇಶನ್ ನಿಮಗೆ ಇವುಗಳನ್ನು ಮಾಡಲು ಅನುಮತಿಸುತ್ತದೆ:
- PDF ಮತ್ತು ಚಿತ್ರಗಳನ್ನು (images) ತೆರೆಯಲು.
- ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಬದಲು ಅದಕ್ಕೆ ಹೊಸ ಫೈಲ್ಗಳನ್ನು ಸೇರಿಸಲು (append).
- ಸ್ಕ್ಯಾನರ್ನಿಂದ ನೇರವಾಗಿ ಪುಟಗಳನ್ನು ಕ್ಯಾಪ್ಚರ್ ಮಾಡಲು.
- ಚಲಿಸಬಹುದಾದ ರೆಡಾಕ್ಷನ್ ಮಾರ್ಕ್ಗಳು (redaction marks) ಮತ್ತು ಅಪ್ರೂವಲ್ ಸ್ಟ್ಯಾಂಪ್ಗಳನ್ನು ಸೇರಿಸಲು.
- ಅನಗತ್ಯ ಪುಟಗಳನ್ನು ಅಳಿಸಲು.
- ಪೂರ್ಣಗೊಂಡ ಡಾಕ್ಯುಮೆಂಟ್ಗಳನ್ನು PDF, PNG, JPEG ಅಥವಾ TIFF ರೂಪದಲ್ಲಿ ಎಕ್ಸ್ಪೋರ್ಟ್ ಮಾಡಲು.
ತಾಂತ್ರಿಕ ಸ್ಟ್ಯಾಕ್ (Technical Stack):
- Node.js 18+
- Dynamsoft Document Viewer (DDV) v4
- Dynamic Web TWAIN (DWT)
- Vite and TypeScript
ಪ್ರಮುಖ ತರ್ಕ (Key Logic):
ಪ್ರಸ್ತುತ ಫೈಲ್ ಅನ್ನು ಬದಲಾಯಿಸುವ ಬದಲು, ಪುಟಗಳನ್ನು ಸೇರಿಸಲು doc.loadSource(source, index) ಬಳಸಿ. ಇದು ವಿವಿಧ ಚಿತ್ರಗಳು ಮತ್ತು PDFಗಳಿಂದ ಒಂದೇ ಡಾಕ್ಯುಮೆಂಟ್ ಅನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
ಸ್ಕ್ಯಾನರ್ಗಳಿಗಾಗಿ, Dynamic Web TWAIN ಬ್ರಿಡ್ಜ್ ಬಳಸಿ. ಬ್ರೌಸರ್ಗಳಲ್ಲಿ ಪ್ರಮಾಣಿತ ಸ್ಕ್ಯಾನರ್ API ಇಲ್ಲದ ಕಾರಣ, DWT ಹಾರ್ಡ್ವೇರ್ಗೆ ಸಂಪರ್ಕವನ್ನು ಒದಗಿಸುತ್ತದೆ. ನೀವು ಸ್ಕ್ಯಾನ್ ಮಾಡಿದ ಚಿತ್ರಗಳನ್ನು PDF blob ಆಗಿ ಪರಿವರ್ತಿಸಬಹುದು ಮತ್ತು ಅವುಗಳನ್ನು ತಕ್ಷಣವೇ ನಿಮ್ಮ ವೀಕ್ಷಕರಿಗೆ (viewer) ಸೇರಿಸಬಹುದು.
ಸುರಕ್ಷತೆಗಾಗಿ, ರೆಡಾಕ್ಷನ್ ಅ𝗻𝗻ೋ𝘁ೇಶನ್ಗಳನ್ನು (redaction annotations) ಬಳಸಿ. ನೀವು ಸಂವೇದನಾಶೀಲ ಪಠ್ಯದ ಮೇಲೆ ಕಪ್ಪು ಆಯತವನ್ನು (black rectangle) ರಚಿಸಬಹುದು. ಬಳಕೆದಾರರು ಇದನ್ನು ಡಾಕ್ಯುಮೆಂಟ್ಗೆ ಶಾಶ್ವತವಾಗಿ ಅನ್ವಯಿಸುವ ಮೊದಲು ಈ ಮಾರ್ಕ್ ಅನ್ನು ಚಲಿಸಬಹುದು ಅಥವಾ ಅದರ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಬಹುದು.
ಎಕ್ಸ್ಪೋರ್ಟ್ ಮಾಡುವುದು ನಮ್ಯತೆಯನ್ನು ಹೊಂದಿದೆ (flexible). ನೀವು ವಿವಿಧ PDF ಮೋಡ್ಗಳನ್ನು ಆಯ್ಕೆ ಮಾಡಬಹುದು:
- ಅ𝗻𝗻ೋ𝘁ೇಶನ್ ಮೋಡ್ (Annotation mode): ಮಾರ್ಕ್ಗಳನ್ನು ಎಡಿಟ್ ಮಾಡಬಹುದಾದಂತೆ ಇರಿಸುತ್ತದೆ.
- ಫ್ಲಾಟನ್ ಮೋಡ್ (Flatten mode): ಮಾರ್ಕ್ಗಳನ್ನು ಪುಟದಲ್ಲಿಯೇ ಶಾಶ್ವತವಾಗಿ ಅಳಿಸುತ್ತದೆ (burns).
- ಇಮೇಜ್ ಮೋಡ್ (Image mode): ಪುಟಗಳನ್ನು ಚಿತ್ರಗಳಾಗಿ ಪರಿವರ್ತಿಸುತ್ತದೆ.
ಈ ವಿಧಾನವು ಎಲ್ಲಾ ಪ್ರೊಸೆಸಿಂಗ್ ಅನ್ನು ಕ್ಲೈಂಟ್ ಸೈಡ್ನಲ್ಲಿಯೇ ಇರಿಸುತ್ತದೆ. ನಿಮ್ಮ ಡೇಟಾ ಗೌಪ್ಯವಾಗಿ ಮತ್ತು ಸುರಕ್ಷಿತವಾಗಿರುತ್ತದೆ.
ಮೂಲ (Source): https://dev.to/yushulx/how-to-build-a-browser-document-annotation-studio-with-pdf-image-and-scanner-capture-in-typescript-5e5c