Export plumbed surface to jpg

[Rostizh]

Hi,

I want to use the plumbed surface (divs, anchors, connections) to an
image, so I can use it in a report.

Is there some way to do that?

Thanks,

Roland

[Simon Porritt]

Programmatically there isn't a simple way to get a screenshot of a web
page. Do you want to do this as a one-time thing, or built into your
app? You can of course print to a PDF in your browser and grab the
content from there if you can deal with a bit of manual intervention.

[Simon Porritt]

Just wondering if this method will be sufficient for you or not - I am
starting to explore options for jsPlumb to support printing a little
more easily.

[Roland Guijt]

Hi Simon,

Thanks for your follow-up.

Unfortunately your solution was not sufficient. I'm looking for a way to use the plumbing visual to show in a report. I'm using DevExpress' Xtrareports for reporting, which makes things even more complicated, because reports are generated server side.

I chose the DevExpress solution because I need reports to be exported to PDF, Word, Excel etc.

I'm stuck with this. The only way I can think of is to show the data in the report in a different way, which is a shame because the visuals of jsPlumb are awesome and just what I need. Also, it's not what the user is going to expect.

Any ideas? Thanks for all your help.

Bye,

Roland
twitter: RolandGuijt
linkedIn: RolandGuijt

Op 28 februari 2012 01:19 schreef Simon Porritt <simon....@gmail.com> het volgende:

[Simon Porritt]

jsPlumb differs from other JS diagramming libraries in that the nodes
are themselves DOM elements - most of the other libraries you see
around the place either draw into a canvas or create SVG/VML nodes for
you. This gives jsPlumb the ability to support more interactive UIs
but causes it to fall down when it comes to exporting the UI
programmatically - there is no way to get a rendering of a DOM element
via Javascript.

I have seen projects where people are working on rendering the DOM
into a canvas:

http://html2canvas.hertzen.com/screenshots.html

(try the Google one - it's pretty impressive)

...and i wonder what would happen if you tried it on a jsPlumb page.
well, I tried it myself and got nothing, but that's because the UI is
initialised via JS. I mean if you tried it on an initialised page...i
think what would happen is that it would ignore the SVG elements but
possibly paint the DOM stuff.

It's possible that you could use that coupled with fabric.js:

https://github.com/kangax/fabric.js/

http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html

..er, somehow. You'd obviously want them both to use the same canvas
so there'd have to be some rewriting of the code by you.

Anyway that's just a thought. I havent tried either of these things
myself. I'd like to sit down with them and try but I haven't got the
time right now.

[cedric roussel]

I'm also looking for a way to save as image, or even better, to integrate sexy jsplumb chart into a server side generated pdf report.
Links above looks promising, but if I understood the principle correctly, because of html5 canvas requirement none of them have any chance to work on ie8 right ?

[Roland Guijt]

Cedric,

Correct, you'll need a latest browser.

Bye,

Roland
twitter: RolandGuijt
linkedIn: RolandGuijt

Op 5 maart 2012 20:39 schreef cedric roussel <cedricr...@gmail.com> het volgende:

[Simon Porritt]

Roland, did you try anything with those links I posted?

[Roland Guijt]

Simon,

I did take a look at them. But for my solution jsPlumb is much more fitting. I talked about it with my associates and they are so enthusiastic about jsplumb that they're willing to leave it out of the report.
So I'm integrating it right now. Thanks for your help.

 
Bye,

Roland
twitter: RolandGuijt
linkedIn: RolandGuijt

Op 6 maart 2012 00:08 schreef Simon Porritt <simon....@gmail.com> het volgende:

[bcrowley]

I would very much like a feature like this also to export the linking
diagram of the canvas, is this basic info contained in jsplumb Simon?
Would it be possible to extract connection and endpoint info to build
up a diagram of the elements on canvas?

On Mar 5, 11:12 pm, Roland Guijt <roland.gu...@gmail.com> wrote:
> Simon,
>
> I did take a look at them. But for my solution jsPlumb is much more
> fitting. I talked about it with my associates and they are so enthusiastic
> about jsplumb that they're willing to leave it out of the report.
> So I'm integrating it right now. Thanks for your help.
>
> Bye,
>
> Roland

> twitter: RolandGuijt <http://twitter.com/RolandGuijt>
> linkedIn: RolandGuijt <http://nl.linkedin.com/in/rolandguijt>
>
> Op 6 maart 2012 00:08 schreef Simon Porritt <simon.porr...@gmail.com> het

> volgende:
>
>
>
> > Roland, did you try anything with those links I posted?
>

> > On Tue, Mar 6, 2012 at 9:13 AM, Roland Guijt <roland.gu...@gmail.com>

> > wrote:
> > > Cedric,
>
> > > Correct, you'll need a latest browser.
>
> > > Bye,
>
> > > Roland
> > > twitter: RolandGuijt
> > > linkedIn: RolandGuijt
>

> > > Op 5 maart 2012 20:39 schreef cedric roussel <cedricrouss...@gmail.com>

[Jamshid HASHIMI]

Any updates regarding this problem?

I need to export my charts into PDF.

Thanks

[Roland Guijt]

Not possible right now. The way i do it is generate the report in another browser window and leave the exporting/printing to the user.

Op 1 jul. 2012 07:58 schreef "Jamshid HASHIMI" <jamshid...@gmail.com> het volgende:

[Jamshid HASHIMI]

Hello;

Good news. I can get my chart in PNG format with html2canvas library http://html2canvas.hertzen.com/

It was a great day ending after I successfully integrate this library to my link chart application.

So you can also try it.

[Roland Guijt]

Jamshid,

Thanks for the tip!

Bye,

Roland
twitter: RolandGuijt
linkedIn: RolandGuijt

2012/7/5 Jamshid HASHIMI <jamshid...@gmail.com>

[nebulaliang]

Hi Jamshid,

I also use the html2canvas library  to get PNG format.

I manage to get the image of the HTML DOM elements, but I can't get the image of the connectors because they are not HTML DOM elements.
I tried to use jquery selector to get the SVG elements but could not get them. How could you get them? Did you use any other library?

Thank you very much.

在 2012年7月5日星期四UTC-4上午7时41分55秒，Jamshid HASHIMI写道：

[Mery Gimenez]

Hi! I have the same problem, but I cant use html2canvas because my client use IE 8 and IE 8 not soport canvas property.. There are some another way??

Thank and Happy New Year!!!

Mery

[Wojciech Makowiecki]

Hi!

Would it be possible in the canvas rendering mode to combine all of canvas elements together into a single one ?

I'm only a bit worried about all of the overlaps and how to deal with them.

If one could get just a single canvas, then saving it to say png file is easy (even pure client side).

-- 

Wojciech

[Simon Porritt]

This is something that has been on the cards for a while but I'm kind of busy and it's not a priority.  

i'm not sure what you mean about being worried about overlaps and how to deal with them.  jsplumb does that for you.  but i can see the appeal of a single canvas since you can export it to base64 easily.  however, dont forget you dont get the nodes with that export. you'd still have to render a node representation into the canvas yourself.

also dont forget that not all browsers support canvas - ie8 still has a large user base - so relying purely on a client-side rendering solution is not necessarily an option for most people.

[Wojciech Makowiecki]

On Wednesday, February 6, 2013 12:27:53 AM UTC+1, simon....@gmail.com wrote:

This is something that has been on the cards for a while but I'm kind of busy and it's not a priority.  

Printing to pdf works great in chrome since it has a built in save to pdf option (when printing).

i'm not sure what you mean about being worried about overlaps and how to deal with them.  jsplumb does that for you.  but i can see the appeal of a single canvas since you can export it to base64 easily.  however, dont forget you dont get the nodes with that export. you'd still have to render a node representation into the canvas yourself.

I meant that each jsplumb element gets its own canvas (in the canvas rendering mode), and it seems that those might overlap ?

I thought of combining them somehow, but not sure how.

also dont forget that not all browsers support canvas - ie8 still has a large user base - so relying purely on a client-side rendering solution is not necessarily an option for most people.

Right, at the moment I optimize my application solely for chrome, since it has some other benefits, and I don't have many users yet so I can persuade them to use it :)