Download HTML5 canvas as pdf

Question

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.

Answer 1

最好的选择可能是jsPDF ，但是HTML5 Canvas生成的图像不是矢量图形，因此需要进行一些翻译工作。

Answer 2

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