Export threat model to image/HTML/PDF

[Glavin001]

[Easy] The user may want to export an image of the threat model itself for presentation purposes. The user will be able to set the resolution or page size preferences upon export or print. With jsPlumb this should be fairly easy to add.

[Frozenfire92]

This would be useful for anyone wishing to print their diagrams, as it would be easier to share an exported file for online usage

[Glavin001]

I don't think printing is necessarily an issue and enabled by this. Could we not just use the web browser's printing of the webpage? We don't really need to do all the steps in: draw threat model --> generate image --> print image.

Also, we could use PhantomJS for rendering jsPlumb's drawing to an image.

[MatKallada]

We should be able to export jsPlumb drawings using CanVG as described through the following article: http://benfelda.blogspot.ca/2014/01/jsplumb-to-image-and-thumb.html

[MatKallada]

I could understand why someone would want to export a diagram to an image file, but why would anyone want to export a security report to an image file?

[Glavin001]

I agree. I suppose for the case of the report it really should be export to PDF or similar file formats. Unfortunately PDF.js only reads PDF files. We could render the report to an HTML webpage and then the web browser could handle the exporting to PDF -- I usually go to Print to File.

[MatKallada]

I'll throw a new issue for generating reports. #30

[Glavin001]

See https://github.com/niklasvh/html2canvas and https://github.com/blueimp/JavaScript-Canvas-to-Blob

[Glavin001]

Using html2canvas to render and Canvas-to-Blob to download:

Notice how it omits the connections/flows between the elements.

[Glavin001]

Using a combination of HTML2Canvas and CanVG I was able to get full support for rendering to a canvas and using CanvasToBlob we can download it!

SeaSponge UI

Exported Image

[Glavin001]

Currently some of the layers are rendered out of order.

• Render each layer on their own canvas
• merge canvas layers, see http://stackoverflow.com/questions/3750580/save-many-canvas-element-as-image/3797989#3797989

[Pana]

In my situation the color is a little different as the jsplumb chart and some css effect is not render normally such as the dotted border: 1px dotted gray , this may the issue of html2canvas

[Glavin001]

Thanks for letting us know, @Pana. I think we can migrate these into a separate bug Issue.

[Pana]

I have try canvg on IE11, but it didn't work on it