Save to server side about pdfjsannotations HOT 8 CLOSED

that's because of the Retina scaling feature of Fabric.js. canvas is scaled by devicePixelRatio (it's 4 in my S9 for example) instead of 1 in the desktop. see here.

so, concerning your issue, you have just to disable "enableRetinaScaling" attribute in the creation of the fabrice object.

in pdfannotate.js, change the function initFabric:

this.initFabric = function () {
		var inst = this;
	    $('#' + inst.container_id + ' canvas').each(function (index, el) {
	        var background = el.toDataURL("image/png");
	        var fabricObj = new fabric.Canvas(el.id, {
	            freeDrawingBrush: {
	                width: 1,
	                color: inst.color
	            },
		enableRetinaScaling: false // <====== add this line
	        });
			inst.fabricObjects.push(fabricObj);
			if (typeof options.onPageUpdated == 'function') {
				fabricObj.on('object:added', function() {
					var oldValue = Object.assign({}, inst.fabricObjectsData[index]);
					inst.fabricObjectsData[index] = fabricObj.toJSON()
					options.onPageUpdated(index + 1, oldValue, inst.fabricObjectsData[index]) 
				})
			}
	        fabricObj.setBackgroundImage(background, fabricObj.renderAll.bind(fabricObj));
	        $(fabricObj.upperCanvasEl).click(function (event) {
	            inst.active_canvas = index;
	            inst.fabricClickHandler(event, fabricObj);
			});
			fabricObj.on('after:render', function () {
				inst.fabricObjectsData[index] = fabricObj.toJSON()
				fabricObj.off('after:render')
			})
		});
	}

hope that helps.

from pdfjsannotations.

You export and save the JSON

pdf.serializePdf(); // returns JSON string with canvas data

pdf.loadFromJSON(serializedJSON) // continue edit with saved JSON

from pdfjsannotations.

Sorry sir, I'm a student.
How to convert JSON to pdf file?

from pdfjsannotations.

When you open PDF file from this plugin, it converts PDF pages into images and render those images into FabricJS canvases. that's how you were able to draw things on top of the PDF. When you serialize those canvases it will convert those images to base64 format and outputs a JSON with all annotations. So when you want to open that file again you can pass that JSON into pdf.loadFromJSON function. The biggest drawback of this plugin is this process removes the ability to select text from PDF. I have started to fix this issue but it's still early dev stage.

from pdfjsannotations.

Thank you so much for detail information and guideline.

from pdfjsannotations.

I think that he want to upload the final pdf as a file on the server.
if it's what you want, you can do it with ajax after rendering with doc.output() instead of doc.save().

to do so, in script.js add the function:

function saveToServer(link) {
    pdf.saveToServer(link);
}

then, add in pdfannotate.js the function:

PDFAnnotate.prototype.saveToServer = function (link) {
	var inst = this;
	var doc = new jsPDF();
	$.each(inst.fabricObjects, function (index, fabricObj) {
	    if (index != 0) {
	        doc.addPage();
	        doc.setPage(index + 1);
	    }
	    doc.addImage(fabricObj.toDataURL(), 'png', 0, 0);
	});

        var file = new File([doc.output('blob')], 'file.pdf', { type: "application/pdf"});
	var formData = new FormData();
	formData.append('file', file);
	
	jQuery.ajax(link,
	{
		method: 'POST',
		data: formData,
		processData: false,
		contentType: false,
		success: function(data){console.log(data)},
		error: function(data){console.log(data)}
	});
}

finally, change the button in index.html to point to the new function:

<button class="btn btn-light btn-sm" onclick="savePDF()"><i class="fa fa-save"></i> Save</button>

to

<button class="btn btn-light btn-sm" onclick="saveToServer('link_to_backend_function')"><i class="fa fa-save"></i> Save</button>

the link_to_backend_function point to the method receiving and storing the pdf in the server with your back-end language.

hope that helps.

from pdfjsannotations.

@hichamhargal Thank you so much. It's working. But when I access from tablet (iPad), it crop my document and big file size. Do you have solution?

from pdfjsannotations.

@crackedurheart007 hope above answer fixed your issue. I'm gonna close this for now. Feel free to re-open if you need

from pdfjsannotations.