Pourquoi lire des PDF si vous ne pouvez pas écrire dessus ?
Bonjour à tous ! Je m’appelle Albert, et j’adore rendre les outils plus pratiques et faciles à utiliser.
Si vous avez déjà essayé l’auto-apprentissage, d’étudier des manuels de programmation ou de lire des documents techniques complexes depuis des fichiers PDF sur votre ordinateur, vous connaissez cette lutte. Vous ouvrez un livre, vous voulez surligner un code clé, dessiner une flèche ou laisser une note de marge — et vous réalisez que les lecteurs PDF classiques sont soit trop lourds, soit payants, soit qu’ils perdent tous vos dessins si vous actualisez la page.
C’est pourquoi j’ai créé PDF Ink — une application Web légère et rapide pour lire et annoter de manière interactive vos manuels PDF directement dans votre navigateur.
L’idée et la Stack technique
L’objectif principal était de construire un outil qui :
- Se lance en un clic sur n’importe quel navigateur moderne.
- Permet de charger n’importe quel livre PDF local.
- Permet de dessiner à la souris ou au stylet/tactile, et d’écrire des notes textuelles.
- Le plus important : Sauvegarde votre page actuelle, niveau de zoom, bibliothèque et dessins localement en toute sécurité pour reprendre l’étude à tout moment.
Pour l’implémentation, j’ai sélectionné : React + TypeScript + Vite + TailwindCSS.
Pour le moteur de rendu PDF, j’ai intégré pdfjs-dist (PDF.js) de Mozilla.
Architecture de Canvas à double couche
Pour garantir que l’application reste réactive lors des dessins, j’ai séparé l’espace de travail en deux couches indépendantes :
- Couche PDF : Un
<canvas>de fond statique qui restitue l’image de la page PDF selon le zoom. - Couche d’annotations : Un
<canvas>transparent superposé qui capture les événements tactiles/souris, dessine les traits vectoriels et superpose les notes de texte.
Grâce à cette double couche, le dessin est ultra-rapide car seule la couche vectorielle légère est redessinée lors du tracé, sans toucher au lourd canevas du PDF.
Évolution de la base de données : Passage à IndexedDB v2
La version initiale enregistrait le fichier PDF et tous les dessins comme un seul objet dans IndexedDB. Avec des manuels volumineux, sauvegarder 20 Mo de données toutes les 250 ms causait des saccades.
J’ai réécrit le gestionnaire IndexedDB pour séparer les fichiers des annotations :
- Magasin
pdfs: Stocke le fichier binaire brut (ArrayBuffer) de manière permanente lors du premier import. - Magasin
pdfs_metadata: Stocke les coordonnées légères des dessins, pages et textes en JSON.
Désormais, seul le fichier de métadonnées de quelques octets est mis à jour lors du dessin. L’écriture prend une fraction de milliseconde, éliminant tout ralentissement !
Testez l’application !
Vous pouvez essayer la version en direct de l’application ici :
👉 Practice Book PDF APP Live App
Bonne étude, et écrivez du code qui simplifie la vie !