so you can use it as default?

After loading the page by default how to enable draw mode instead of enableselector? i tried to trigger pencil() but not working.

I used this library in a React project. I am trying to implement zoom but it seems like that it is not possible through pdfjslib so I tried with zoom css but then annotation does not work properly. Any help will be appreciated. Thanks in advance.

Hi, I noticed when I save the pdf it looks squashed - text and images. Does anyone have this issue?

I need to store the image position also in the database, as per new version image adding feature is there but it will be added on 0,0 position. I don't want user to change its position so I want the image to be added in a fixed position and save that position in the db to load it later.

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.

it would be really great if this project have a zoomIn and zoomOut feature because pdf.js already have that functionality.
I tried to implement by increasing and decreasing scale value, but i just don't know how to receive the value in var PDFannotation >> option.
Rest the project is amazing

Thank you for your great package.
I have a problem with size after annotation.
Do you have a solution for optimizing after annotate?

@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.

Hi, is it possible to add undo feature? It will be a great add-on.

And also I noticed Add text doesn't work on iPad.

Thanks for your great tool

with the new release of PDFJS it does not work, can you hel me with the updated example using PDF JS lastest?

its posible add placerholder to itextboxs generated

Hi Team,

Is it possible to add buttons and on clicking insert text or signature or image? Any thoughts would be great. We are trying to make our own DocuSign style pdf generator. Basically, add a button place holder and allow users to click on the button and add signature/image.

Thank you

How to get json object of all the annotations done by me in the pdf file.

Hi,

Can we enhance this package so that we can drag/drop a text field or a date field on the pdf document?

Similar functionality exists on a platform called dotloop.

is it possible to get events while drawing with pencil on pdf canvas?

I have to restrict pencil if flag is enabled.

Hi,

Can we remove jQuery completely from this project and make it as a plugin/ npm package to use it inside other project?

Such as, npm install pdfjs-annotation

I am already trying to do something like this, by using this package in my vuejs project.

Let me known if it is possible.

is it possible to save drawed file to server side? maybe it's using ajax or else to store edited pdf to server?

I'm using your PDFJsAnnotations code for edit and save pdf... but i want to make responsive to display in any size... you are using full size but this code not working on responsive with other size... please let me know if any one have this solution...

Hello, can you help me to install it?, i think that is good tool.

I am trying to achieve something like this,

inst.fabricObjects.forEach(function(fabricObj, index) {
    fabricObj.set({
        lockMovementX: true,
        lockMovementY: true,
        lockScalingX: true,
        lockScalingY: true,
    });
});

to stop a user to change the position of iText object or anyother fabric object. In case of item like iText object user should be able to update the text value but not move or scale the object.

I also tried this but now object is still moving.

PDFAnnotate.prototype.loadFromJSON = function(jsonData) {
	var inst = this;
	inst.fabricObjects.forEach(function(fabricObj, index){
		if (jsonData.length > index) {
			fabricObj.loadFromJSON(jsonData[index], function () {
				let fabricObjsJSON = fabricObj.toJSON();
				fabricObjsJSON.objects.map(item => {
					item.lockMovementX = true;
					item.lockMovementY = true;
					item.lockScalingX = true;
					item.lockScalingY = true;
					return item;
				});
				console.log(fabricObjsJSON);

				inst.fabricObjectsData[index] = fabricObj.toJSON();
			})
		}
	});
}

Tried to load pdf.loadFromJSON(serializedJSON) but its not working. Any help please? Thanks

Hi Sir,

This is exactly what i need in my current project. !! Awesome.
I got a vue js and laravel stack, this is a great inspiration source to help to do what i need.

Thank you for this, i will take a look in the future if i can help you :)

@RavishaHesh I want to Serialize all canvas data into JSON and re-draw, how can I achieve it?

Steps (for elaboration):

1. add annotations to pdf file
2. get all annotations
3. now save pdf file with annotations and close the project
4. now open that pdf, I want back those annotations and also need to change it.

Is this possible in this package? if yes how can I achieve it?

It's great package!

How to save to server side from PDFJsAnnotations?

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.

Right now, rectangle can be drawn with static width and height. is it possible to freely draw rectangle with any height and width in current version?

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.

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.

Hi, thank you for this job.

For me it works great when using the trackpad of my laptop (chromebook Lenovo 500e). But using the touchscreen, free drawing and others don't work. When I draw a line with the touchscreen (finger or stylus) an object seems to be created since i can see it in the Annotation Data but it's "empty" (see above). When I switch to mobile emulation it doesn't work at all. If I reload the page (always in mobile emulation) it works. If I switch back to desktop, it works (!!!) and if I reload the page, always in desktop mode, it fails.

I tried the free drawing tool in the fabricjs official page and I can draw with the touchscreen and stylus.

Any Idea how to solve this ?

thx

Yannick
{ "type": "path", "originX": "left", "originY": "top", "left": -0.5, "top": -0.5, "width": 0, "height": 0, "fill": null, "stroke": "rgb(0, 0, 0)", "strokeWidth": 1, "strokeDashArray": null, "strokeLineCap": "round", "strokeLineJoin": "round", "strokeMiterLimit": 10, "scaleX": 1, "scaleY": 1, "angle": 0, "flipX": false, "flipY": false, "opacity": 1, "shadow": null, "visible": true, "clipTo": null, "backgroundColor": "", "fillRule": "nonzero", "globalCompositeOperation": "source-over", "transformMatrix": null, "skewX": 0, "skewY": 0, "pathOffset": { "x": 0, "y": 0 }, "path": [ [ "M" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "Q" ], [ "a" ], [ "a" ], [ "a" ], [ "a" ], [ "L" ], [ "a" ], [ "a" ] ] }

Is it possible to select pdf text and change color ?
Thanks

I would liek to add an image in the pdf load rather than selecting from the add image button. Is this possible and if yes, how can i do this?

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

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.

Hi,

I am trying to implement this package with Vuejs, I am successfully integrated it and all features are working as expected. Now only thing I'm struggling with is when, I try to load pdf document dynamically, it show blank space, because initially document load on mounted,

this.pdf = 
	new PDFAnnotate('pdf-container', this.url, {
				onPageUpdated: (page, oldData, newData) => {
					console.table(page, oldData, newData);
				},
				ready: function() {
					this.loadFromJSON(this.docAnnotation);
				}.bind(this)
			});

when I try to change the value of this.url dynamically, pdf document won't update. What could be the workaround?

I have used this repository and working that I was looking for.
But I am facing issues when trying to render fillable PDF it is not rendered correctly means controls(textbox, radio button, etc) are not able to fillable.

Can help me with how can I achieve this feature.

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

howto i can save and upload to server

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.

currently when we call savePdf, it calls doc.save(fileName). This eventually writes the files to the response. i.e, the file is downloaded. Which is cool. But what if I want to save the generated/edited file to some xyz location on server? I'm getting hard time in understanding if I could get hold of some stream that I can write somewhere, or to pass it to an API, etc.

there is a method doc.output that returns some complex string, which seems to be PDF metadata or something. Is this something that I'll have to use? if so, how?

Summary:
How can I get stream/file that I can use to create file on server or to send it to an API that will eventually create file out of it.
Currently it is downloading, and I want to override this behavior.

Any directions/guidelines would be appreciated.

Hey, I want to know that, Is it possible to get edited annotation while editing the same pdf again?
And how can I go for that?

Thank you for this amazing plugin.
How do I upload another pdf file from the toolbar interface?
Can you help me.
Thanks!

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

Hi Ravisha,

This is a great work, thank you.

Would it be difficult to add few more features that pdf.js already supports like:
-print support,
-zoo in, out buttons,
-adjusting to screen width
-full screen mode
-jumping to particular page
-thumbnails

Thank you,

-Glen

Sir your code is wonderful and thanks,just wanted a feature to highlight text can you help please

It's a great tool. Does any know how to insert a text from a drop-down list? Basically, in the toolbar, I would like to have a list of items and on click write the text in the cursor position or to the text box.

Any help or code snippet would be appreciated.

can make it orginal pdf file?

i tried the button 'Add text' on the phone(chrome browser) but it doesn't work. how to fix it

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