1

I'm working on graphic editor using fabricjs. I want to download whole canvas or (if possible) given coordinates as pdf (but not embedded png or jpg). Downloaded file should be open by Adobe Illustrator or Corel and should be editable.

Thanks in advance.

beaver
  • 17,333
  • 2
  • 40
  • 66
yavona
  • 107
  • 1
  • 10
  • This is a pretty complicated thing do achieve. You can easely take a picture of the canvas and put it in a pdf file [LINK](https://stackoverflow.com/questions/23681325/convert-canvas-to-pdf). But to be able to later continue editing the peoject in Illustrator, you will have to go through ALOT of hard translating. – Gustav G Jan 04 '18 at 16:52
  • It seems that it's hard to do this with javascript. Any idea about server side coding? For example is there any php library or something like that around? – yavona Jan 05 '18 at 07:59

2 Answers2

1

The best bet is probably jsPDF, but HTML5 Canvas generates images not vector graphics, so it will require some work to translate.

Emil S. Jørgensen
  • 6,216
  • 1
  • 15
  • 28
  • I am using html2canvas & jsPdf it worked fine for html2canvas V0.5.0-beta4 & jspdf V1.3.0. After updating html2canvas V1.0.0-alpha.9 & jsPDF V1.3.5 it's Not working. – Vignesh Jan 08 '18 at 10:27
  • @Vignesh Any error message in the console? or perhaps the documention for any of the libraries can explain it? – Emil S. Jørgensen Jan 08 '18 at 10:38
  • It's not throwing any error in console. Try to change the version of html2canvas: 0.5.0-beta4 & jspdf 1.3.0 in Index.html it's working fine. – Vignesh Jan 08 '18 at 10:59
  • Do you need the new version? – Emil S. Jørgensen Jan 08 '18 at 11:39
  • That pluncker works for me. Maybe its a browser issue? I'm on Firefox Quantumm – Emil S. Jørgensen Jan 08 '18 at 12:07
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/162740/discussion-between-vignesh-and-emil-s-jorgensen). – Vignesh Jan 08 '18 at 12:34
  • Check that plunker sample in chrome browser. – Vignesh Jan 08 '18 at 12:35
  • I am using latest version of angular package 5.1.3 and html2canvas 1.0.0-alpha.9 & jsPDF 1.3.5 but its rendering the html form in body and it's not download the html form in pdf format. – Vignesh Jan 08 '18 at 12:45
  • Hi i have created a stackblitz sample. Refer this sample i can't able to download html in pdf format https://stackblitz.com/edit/angular-tphg4b?file=.angular-cli.json – Vignesh Jan 09 '18 at 12:05
1

There is no direct translation between canvas and pdf that is not image based in the browser. You can use http://pdfkit.org/ and create custom export method for each fabric subclass that takes in consideration the http://pdfkit.org/ methods for drawing.

You have to take in consideration that canvas and fabricjs offer a different degree of freedom than pdf/eps.

Some feature could be not translated if not using rasterization. The first i can think of is custom fonts with custom fabricjs style.

Is not a simple solution for which someone can give you a snippet of code to move on from.

PDFkit and pdf in general have a transform method for the canvas that is similar to HTML5Canvas and can draw paths exactly as HTML5Canvas.

The first thing to do is try to mimic fabric transform method and path commands to jsdpf code.

PDFkit offers doc.transform to which you can pass the result of fabric.Object.calcTransformMatrix().

I suggest you trying with paths and rect first, and moving to Text then when you got some familiarity with code.

Images should be straight forward.

To me it looks like jsPdf do not expose the necessary API to do this

AndreaBogazzi
  • 14,323
  • 3
  • 38
  • 63