I've setup an openlayers instance on a webpage which can load static images. These images are actually the pages of a PDF you can upload. There is a pagination option on it so users can navigate between pages and draw ( using openlayers draw ) on each page individually.

So far so good. I save each page vector layer as GEOJson and send the data back to the back-end. Keep in mind at this point I have both the original PDF and an array of GEOJson (one json for each page ).

At the moment I'm merging the two in the UI by using

canvas.toDataURL("image/png", 1.0);

and posting the base64 string for all pages back to the server to be loaded into memory and saved as PDF. But this way has a lot of downsides like, losing original document quality, a lot of OutOfMemoryExeptions, and it's super slow.

How can i merge the PDF file with the corresponding vector layer in the back-end?

This is an example of what I'm talking about :

Pdf page with polygon drawings

  • The out of memory exceptions and the super-slowness sound, in part, like they may be server resource issues.
    – Emily
    Jan 24 '18 at 17:26
  • Even so, my project requires 'excluding' some of the features in the backend which will need to trigger a re-generation of the pdf with he new FeatureCollection and doing that right now means i need to reload the pdf pages into a canvas and save them again which is pretty much client side.
    – catman
    Jan 25 '18 at 13:20

I've actually figured out a way to make this happen in the back-end following these steps.

  1. The image loaded in the canvas must have the extent set to the exact size of the original image basically [0,0,width,height].
  2. Pdf needs to be re-created page by page using the original width/height of each page using xImage to load the entire page. Mediabox and Rect needs to be set to the correct width and height as well - same size as the original image. All of this is done to ensure drawing is accurately displayed on the page.
  3. Using AddPoly from ABCPdf, add each of your individual polygons from the submitted feature collection.


Drawings would be added as a layer on top of the existing ones so document quality will not be affected. It will not use a huge amount of memory or cpu and It's quite fast.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.