PDF/PNG export feature for Web Editor

Question

Recently my company pass me a web-based graphic editor project to handle, where the content inside the editor can be moved, rotate, resize, masking, change font ... etc

So far, i was able to handle most of the client side feature. However, i stuck on those exporting PDF/PNG feature which give me a lot of headache. I have been research on plugin like JSPDF and HTML2Canvas and none of this can solve my problem (eg HTML2Canvas doesn't support clip-path css property).

I was wondering how these popular product like Canva or Piktochart were able to develop such amazing export feature. Therefore, i will like to seek some advice from developer who have experience on building web editor:

1. Is it possible to develop export feature by just using Front End technology ?
2. What knowledge is required to develop export feature. [Blob ? SVG ?]
3. Is there anything that Back-End side able to help regarding to this feature ?

PS: I only have 2 year of Front End development experience and a little bit of Back End Knowledge. (Yes, i am doing this project alone.)

Thanks a lot !

Answer 1

There are JavaScript libraries that you can use. You do not need a backend.

• html2canvas - You can create an HTML Canvas, for any HTML content. Then you can create an image PNG/JPG from the canvas.

• pdf.js - You can manually create a PDF by creating a new blank page, and start drawing on it. You also able to draw an image or a canvas on the PDF.

More info:

• Canvas Element toDataURL - https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
• Trigger a download from data URL - http://danml.com/download.html