Wrapper for PDF JS to add annotations

Overview

FabricJS layer on top of Mozilla's PDFJS to add ANNOTATIONS

Alt text

Features

  • Supports PDFs with multiple pages

  • Free draw tool

  • Add text

  • Add arrows

  • Add rectangles

  • Add image

  • Change colors

  • Change Brush size

  • Change Font size

  • Every object can be resize

  • Serialize all canvas data into JSON and re-draw

  • Delete individual object

  • Clear page

  • Export PDF with annotations (using jsPDF)

Important: exported file will be a PDF with set of images. So you won't be able to use functions like text selections. trying my best to add the text layer. Due to lack of PDFJs documentation about this section progress is very slow. If anyone interested you can check the progress on dev branch.

Usage

var pdf = new PDFAnnotate('pdf-container-id', 'http://url-to.pdf');

pdf.enableSelector(); // Enable moviing tool

pdf.enablePencil(); // Enable pencil tool

pdf.enableAddText(); // Enable add text tool

pdf.enableAddArrow(); // Enable add arrow tool(Supports optional on draw success callback)

pdf.enableRectangle(); // Adds a rectangle

pdf.addImageToCanvas() // Add an image

pdf.deleteSelectedObject(); // Delete selected object

pdf.clearActivePage(); // Clear current page

pdf.savePdf(); // Save PDF with name sample.pdf

pdf.serializePdf(function (serializedString) {
    //
}); // returns JSON string with canvas data

pdf.loadFromJSON(serializedJSON) // continue edit with saved JSON. To do this on page load use `ready` option(scripts.js line 5)

pdf.setColor(color); // Set color for tools (Example: pdf.setColor(red) , pdf.setColor('#fff'), pdf.setColor('rgba(255,0,0,0.5)'))

pdf.setBorderColor(color); // Set border color for rectangle tool (Example: pdf.setBorderColor(red) , pdf.setBorderColor('#fff'))

pdf.setBrushSize(width); // Set brush size for pencil tool (Example: pdf.setBrushSize(5))

pdf.setFontSize(font_size); // Set font size for text tool (Example: pdf.setFontSize(18))

pdf.setBorderSize(border_size); // Set border size of rectangles (Example: pdf.setBorderSize(2))
Comments
  • freedraw event handlers

    freedraw event handlers

    Thanks for the script.

    We are working on collaborative PDF annotations. I mean users can join from multiple devices and opens same PDF on their end. any one can draw on same PDF and that should be sync on other user side also.

    for example two users opened one PDF and one user chosen pencil and doing free-draw on canvas. then on first user moving cursor we have to get those mouse points and will send those points to other user to add those points in their canvas.

    How to get these events? could you please help on this.

    opened by muralibobby35 22
  • Example of loading Json file

    Example of loading Json file

    Hi, although it has code for loading Json file but I have not seen how to use it. Example one shows loading pdf. I want to load canvas and objects from saved json data. Thank you.

    opened by ghost 10
  • Loading file from blob

    Loading file from blob

    Currently I pass the file's URL to PDFAnnotate method in order to load it for edit. After making some changes, we can hit save. We can get the updated file's blob by using something like following, on Save button:

    var doc = new jspdf.jsPDF();
     ...
     ...
     var myPDF = doc.output('blob');
    

    My question is, how can I initialize this file again in order to add some more changes? Remember, I did not post/write it on server as yet. I just did: doc.output('blob')

    My Usecase I want to give user ability to select between two files for editing. When user hits 1st file (button) I'll load it using URL. But problem is when user moves to 2nd file and then wants to come back to 1st file again, because he wanted to add one more change in file which he forgot to make earlier while editing first file. I will post both files at the end to the server finally when user is sure he doesn't have to make any further changes. Meanwhile I'll keep edited files in blob. Or you have better suggestion? Any help/guidelines will be appreciated

    @chanafdo @RavishaHesh

    opened by zeecorleone 10
  • Get real PDF coordinates

    Get real PDF coordinates

    I think this solution is great nice work.

    The main problem I am currently facing is translating the annotation coordinates to actual PDF coordinates. Do you know the solution to this?

    I have something like this viewport.convertToPdfPoint(fabricObjectItem.top, fabricObjectItem.left)

    But I think this is not correct.

    opened by Goddard 9
  • Problem with view pdf file

    Problem with view pdf file

    Hi sir! Thank you so much for this package. I'm a starter in a web developer (Laravel). I have 1 problem with view pdf. I got a popup to download instead of preview pdf in dev. My code in script: var pdf = new PDFAnnotate('pdf-container', '{{asset('pdf/test.pdf')}}');

    How can I implement this? Thank you for image

    opened by vavicheth 9
  • Question about workflow

    Question about workflow

    So, I got to this project because we need an inhouse "DocuSign" alternative. Let me see if I understood the workflow right:

    Signing the document is a 2 steps process, a user will be defining where the signature will be shown, and a 2nd user will be loading their signature in the document. For this, the process would be:

    Step 1, define the signature placeholder:

    • load the PDF via new PDFAnnotate(htmlNodeId, pathToPdfDocument...
    • load a rectangle to define where the signature will be injected via pdf.enableRectangle()
    • serialize the PDF via pdf.serializePdf() to get where the rectangle was placed inside the PDF
    • save that serialization in the backend

    Step 2, request the signature:

    • load the PDF via new PDFAnnotate(htmlNodeId, pathToPdfDocument...
    • load the serialized rectangle via pdf.loadFromJSON(), this will draw the rectangle in step 1, BUT it will also allow the user to modify where the rectangle is shown, right? Another way to do this would be to draw the rectangle in the PDF in the backend
    • the signature image could be created via Signature Pad (see demo at http://szimek.github.io/signature_pad/) but then how do I inject the signature in the PDF? Another way to do this would be to inject the generated signature instead of the rectangle in the backend.

    Am I understanding this right?

    Thank you for your great work.

    opened by str 8
  • Background is removed if image is added on canvas object (fabricObj.add(img))

    Background is removed if image is added on canvas object (fabricObj.add(img))

    @RavishaHesh

    Whenever try to add image (even static one), the pdf background removed and image will be added on a white background on that canvas.

    At first I thought it was an issue in fabric js, that we can not add an Image over a canvas having background image or it will remove the background, but now I have an jsfiddle https://jsfiddle.net/abhimanusharma/2hektx49/24/ where a image is added over an background image. I also tried to create a jsfiddle for PDFJsAnnotations project but it was impossible for me. Here is my failed attempt https://jsfiddle.net/abhimanusharma/5b4o0zqj/ My Stackoverflow question: https://stackoverflow.com/questions/65074701/add-multiple-images-on-lower-canvas-using-fabric-js

    Can you please check why this is happening in your plugin? Here is how I tried to add the image and external element over the pdf canvas. See line 123, 238 and 314 to see how I tried to add the Image. https://github.com/abhimanusharma/PDFJsAnnotations/blob/master/pdfannotate.js

    Update: Here is the working codesendbox: https://codesandbox.io/s/hardcore-shape-gt8do

    Background is removing for some canvas when add image by clicking on image icon than on canvas.

    opened by abhimanusharma 8
  • Is it possible to Add Draw Rectangle with border alone feature to annotate?

    Is it possible to Add Draw Rectangle with border alone feature to annotate?

    Is it possible to Add Draw Rectangle with border alone feature to annotate?

    So User can click Rectangle icon and select the text or image to marked inside rectangle to annotate.

    opened by jinuem 8
  • Using Pencil, causes the drawing to jump off the screen

    Using Pencil, causes the drawing to jump off the screen

    Reporting an issue regarding usage of pencil. If pencil is used with brush size 1, then it works perfectly fine. However, when the brush size is increased to 5 size, the drawing using pencil jumps of the screen. Seems like the layer which it uses proportionally gets increased by the brush size.

    This happens on some machines and not on all machines on browsers. Can be reproduced on

    MAC OS, Chrome latest version (15inch screen) Windows 10, Chrome latest version (15 inch screen)

    Adding a screen capture

    https://user-images.githubusercontent.com/1822689/137687230-23622238-f915-4f4f-a9b6-e8822a6e4473.mov

    bug 
    opened by dumparun 7
  • Question ? Usage of latest version of fabric and pdf

    Question ? Usage of latest version of fabric and pdf

    Hello, I have two points. I modified the codes to support latest libraries of pdfjs and fabric

    Fabric gives error : Error loading data:, fabric.min.js:1:871 and it doesn't show pdf. Do you have plan to use latest versions of js libraries?

    Second point is that : the pdf on the screen is not sharp and blur. How does resolution of pdf can be improved.

    var pdfjsLib = window['pdfjs-dist/build/pdf']; // The workerSrc property shall be specified. pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js';

    https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js

    Thanks Turgut

    opened by comcorba 7
  • Is it possible to load saved annotations?

    Is it possible to load saved annotations?

    Hi,

    I saw a loadFromJSON already exists but I tried to use it and it won't work. I am getting configurations from serializePdf function and tried to load it into the loadFromJson before inst.initFabric() call.

    I wanted to load prev state of of annotation last added by user, which can be editable and new annotation can be added as permission given to the user.

    opened by abhimanusharma 6
  • Add predefinited image to canvas

    Add predefinited image to canvas

    Hi, is it possible to add a "predefinite" image to canvas using a button like addImageToCanvas("http:///www.demo.com/image.jpg") instead selecting it from PC?

    opened by itajackass 0
  • add zoom in / zoom out buttons

    add zoom in / zoom out buttons

    Thank you for your nice project!

    I wish if you add zoom in / zoom out buttons on this project.

    I tried to implement panzoom project https://github.com/timmywil/panzoom to this project, but I couldn't.

    opened by nuriakman 0
  • get the coordinates of x,y ?

    get the coordinates of x,y ?

    hey, can you help me?, is it possible to get the coordinates of x,y, is it possible?, I have an electronic signature project, so this api sends the coordinates of x,y to send where the signature is

    opened by gagaltotal 0
  • Can't Save PDF

    Can't Save PDF

    I use code fo insert image from url but can't save to pdf

    PDFAnnotate.prototype.addImageToServer = function () { var inst = this; var canvas = inst.fabricObjects[inst.active_canvas]

    fabric.util.loadImage('https://d1hdtc0tbqeghx.cloudfront.net/sites/536207e0e52e306190000002/theme/images/sd-laravel-icon.png', function(img) { if(img == null) { alert("Error!"); }else { var image = new fabric.Image(img); canvas.add(image).setActiveObject(image); canvas.renderAll(); } }, { crossOrigin: 'anonymous' });

    }

    opened by hudeaki 1
  • Arrow | Pencil Tool Glitch

    Arrow | Pencil Tool Glitch

    once you click on Arrow tool but don't use it, then click on Pencil tool.... and then draw somthing on pdf. an arrow along with pencil will be drawn as well.

    opened by zakk616 0
Releases(1.0.1)
Owner
Ravisha Heshan
Software Engineer/PC Gamer
Ravisha Heshan
I'm trying to create simple program for adding the digital signature to a pdf file with self-signed certificate. I use node-signpdf and pdf-lib library.

pdf-digital-signature-with-node-signpdf-ejs I'm trying to create simple program for adding the digital signature to a pdf file with self-signed certif

null 5 Dec 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
PDF translation add-on for Zotero 6

Zotero PDF Translate This is an add-on for Zotero 6. It provides PDF translation for Zotero's built-in PDF reader. Quick Start Guide Install Download

null 2.1k Jan 8, 2023
PDF data extraction for Physiotherapy Board NZ APC's

physioboard-apc-reader Parses and extracts info from NZ Physio board issued certificates Install npm install physioboard-apc-reader Use import { physi

null 2 Jan 13, 2022
Better looking pdf for lovely rustacean <3

The Rust Programming Language (TRPL) PDF Better looking pdf in your finger tips. Please find the latest version of pdf in release tab. Contributing I

Shirshak 76 Dec 29, 2022
PDF.js compiled for node-less, serverless enviroments.

Pdf.mjs PDF.js custom-compiled for nodeless, serverless enviroments, like Deno Deploy and Cloudflare Workers. Rocking in under 700kb uncompressed. Usa

Brúnó Salomon 7 Apr 16, 2022
PDF Preview for Zotero.

Zotero PDF Preview Preview PDF attachments in the library view. Fast & easy. Do not require any third-party softwares. Quick Start Guide Install Downl

null 352 Jan 4, 2023
Plugin to enable PDF files as first class citizens within an Obsidian vault.

Obsidian-PDF Plugin to enable PDF files as first class citizens within an Obsidian vault. What does this plugin do for me? All PDF files in your vault

Noah Cabral 16 Nov 26, 2022
A Javascript library to export svg charts from the DOM and download them as an SVG file, PDF, or raster image (JPEG, PNG) format. Can be done all in client-side.

svg-exportJS An easy-to-use client-side Javascript library to export SVG graphics from web pages and download them as an SVG file, PDF, or raster imag

null 23 Oct 5, 2022
A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript Object or DOM element only from the frontend!

?? JavaScript Object to csv, xls, pdf, doc and DOM to html generator ?? A little JavaScript plugin to generate PDF, XLS, CSV and DOC from JavaScript O

null 61 Jan 7, 2023
Here I will add daily one problem with solution basic to advance level and try to add multiple solutions of a single problem.

#100-code-days ?? I am adding daily 1 JavaScript solution here ?? and you can fork the repo for add your solution for any specific probelm ⌛️ Day 01:

Amir Sohel 4 Jan 22, 2022
Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Twitter.

news.ycombinator1.com Lets you add a character to Hacker News links to add social media and OpenGraph previews for sharing on things like Slack or Dis

Ian Langworth ☠ 38 Sep 18, 2022
This is college project in which me and my team create a website that provide the tools for basic text modification and add todos also we add blog init.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Ayush 4 Jun 9, 2022
This project will be a basic website that allows users to add/remove books from a list. The main objective is to understand how to use JavaScript objects and arrays and dynamically modify the DOM and add basic events.

Awesome-books Awesome Books This project will be a basic website that allows users to add/remove books from a list. This project is part of the Microv

Aleksandra Ujvari 10 Oct 3, 2022
Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has threee different sections: 1. books list, 2. add new book, 3. contact.

awesomeBooks-modules Awesome Books is a basic website that allows users to add/remove books from a list (including the title and author). It has three

Juan Diaz 6 Aug 26, 2022
Emem Ekpo 7 Sep 9, 2022