Enable image exporting from the flash chart

[GoogleCodeExporter]

What steps will reproduce the problem?
1. Create a chart
2. Right click "Save Image Locally"
3. Nothing happens

What is the expected output? What do you see instead?
Ideally:
1. User makes their chart in flash.
2. Click "Export"
3. Prompt for an image download.  However, a new window with the image in
it would be fine, too.

What version of the product are you using? On what operating system?
Version 1.2.5 on Vista Business

Please provide any additional information below.
Here is the thread with all relevant information:
http://groups.google.com/group/ofcgwt/browse_thread/thread/4b46101836ddc7b5

=============================================
Are there any status updates regarding "Save Image Locally"? (http://
groups.google.com/group/ofcgwt/browse_thread/thread/5890b91a52532e79/)

Getting from flash to an image in a div like this:
http://teethgrinder.co.uk/open-flash-chart-2/save-image-js.php is all
I would need.

Thanks

_____________________________________________________

As per that post you linked to, can you answer this question for
me...

Ok, it turns out that Save Image locally doesn't actually "save" the
image at all... all it does is take an image of the current graph and
allow you to place it as a DIV or content on the page... essentially a
locally created image url... so you aren't actually saving it locally
(I guess you could then ask the user to right-click and save the image
to disk, but this won't happen automagically by the browser).

As such, I cannot see how this would be really that helpful - I'm also
not sure what to target for the call in OFCGWT - can you explain why
you need this? and also what you'd like GWT to do for you... meaning
do you want me to create a "ofc-snapshot" widget for GWT, that when
you call saveImage, the current graph image is placed into the widget
like an image??

_____________________________________________________

Grant,
Thanks for your reply.

Flash is great for coming up with the graph, but then the user will
want to print it, place it in their Powerpoint or PDF, etc.  I need to
provide a way for the user to export.  If that's right clicking and
opening the snapshot in a div, then so be it.

The goal would be getting the chart so that the user can save the
image.

In the code example from php/javascript, it appears that the image
bytes are embedded into the IMG tag.  A listener for
onSaveImageLocally that gives you the image bytes would be great.

Would this be possible?  Is there already a listener for that right
click menu that I haven't found?

On Feb 5, 4:45 pm, gslender <gslen...@gmail.com> wrote:

_____________________________________________________

The only thing I can do is target an element for the image to be
written/inserted into - this is not saving the image. Essentially, you
are replacing one dynamic image of the chart (flash) with a static
image of the chart (a jpeg) - in both cases no actual permanent file
exists that contains the chart image. There is no writing of the image
to disk etc. You can only create the image in memory which is lost
once the browser is closed.

So ,yes you could probably print the browser page, but you can do that
now with flash as it stands - so I don't see the point of what save
image gives you.

I'm not against doing the work to code this, but I want to fully
understand the use case before I start.

Cheers,
Grant

_____________________________________________________

Sure thing.  Maybe I can help with the ideal use case.

1. User makes their chart in flash.
2. Click "Export"
3. Prompt for an image download.  Now the user can put it into their
slideshow, print it standalone (as opposed to printing from browser
with flash where everything in the page would get printed)

However, I can work with whatever is given as long as the image is
somewhere.

--Target a div: User saves image through browser
--Target a new window: User can save image through browser
--Target a session variable with bytes: I can generate a save dialog
from the bytes (content-type of image/attachment)

_____________________________________________________

Ok, the first two are fine, and require the end user to know that they
have to right-click the image and select save as - sounds pretty crap
to me, but if you honestly think users will do this, then they are
smarter than the users I deal with ;-)

On the last one, can you explain more about this "session variable
with bytes: I can generate a save dialog
from the bytes (content-type of image/attachment)" ???

How does that work?

Cheers,
Grant

_____________________________________________________

Regarding the session variable, I ran into this when trying to store
images in a database rather than saving them to the web server.

1. The user uploads the image via a form input

2. Bytes are stored in a session variable

3. A RPC Service displays the image
           imageBytes = (byte[]) request.getSession().getAttribute
(SESSIONVARIABLE);
           bufferedoutput.write(imageBytes);

So, #3 is how I display the bytes as an image with GWT, but once you
have the image bytes you can do whatever with them.  In this case I'd
have the content-type of the HTTP Response header be an image/png
attachment.
        response.setContentType("image/png");
        response.setHeader("Content-Disposition", "attachment;
filename="mychart.png");

I did a view source on this page after creating an image:
http://teethgrinder.co.uk/open-flash-chart-2/save-image-js.php

And the img location wasn't an http address. It was the following:
img src="data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAAiYAAAD6CAYAAACVrYw7AAA1JUlEQVR42u2dWXMbWZbf9
R2me579
Beah3qyxPT1+8b...
with the entire base64 encoded image right there in-line.  It came
from the line of code: $('#'+src)[0].get_img_binary()
I'm guessing those are the encoded bytes of the image.  If I could get
my hands on the bytes, then I can send them down to the server and
create a response with the image as a download prompt.

I'm not at all familiar with the inner-workings of the code that gives
you get_img_binary().  What are your thoughts?

_____________________________________________________

I'll take a look at this - can you please open an issue with this
information (this email) in it... that way I can track the outstanding
development task for OFCGWT.

Also, think about if you can send me some test code in GWT you'd like me to
test against - something that you can use to ensure I'm grabbing the bytes
you need, the way you need them etc...

Cheers,
Grant
_____________________________________________________

Sounds great!  Thank you for looking at this.  I will put the issue in
now and send you some sample code soon.

Original issue reported on code.google.com by Andiga...@gmail.com on 6 Feb 2009 at 2:41

[GoogleCodeExporter]

Pls provide an example test case where I can use this code to ensure I'm doing 
what
you need re the save/image bytes and/or tasks to insert to a div etc... 

Original comment by gslen...@gmail.com on 10 Feb 2009 at 9:44

• Changed state: Accepted

[GoogleCodeExporter]

Alrighty, here is code that takes a base64 string of a png (what OFC uses) and 
turns
it into a download prompt for the user to click save or open.  See line 131 of
Test.java for the sample client side code.   Feel free to ask me any questions! 

Thanks

Original comment by Andiga...@gmail.com on 18 Feb 2009 at 2:26

Attachments:

• ofcgwt_ImageSample.zip

[GoogleCodeExporter]

Any status updates on this issue?

Original comment by Andiga...@gmail.com on 12 Mar 2009 at 7:19

[GoogleCodeExporter]

The Attached example by Andigator was very helpful for me, Thank you. But the 
way how
to get image "binary" data is missing. Here is approach how to do that.

public class ExtendedChartWidget extends ChartWidget {

    public String getImageData() {
        return getImageData(getSwfId());
    }

    private native String getImageData(String id)
    /*-{                
        var swf = $doc.getElementById(id);
        var data = swf.get_img_binary();
        return data;
    }-*/;

}

Original comment by momeg...@gmail.com on 20 Mar 2009 at 1:20

[GoogleCodeExporter]

I am currently evaluating charting frameworks for my company and OFCGWT is a
promising candidate. However, export of charts is a major requirement for us. 
At this
point I am not exactly sure whether the issue as it is currently defined 
exactly fits
our needs, but I will try to follow the progress and maybe give some input as 
well.

In any case, keep up the good work!

Original comment by ralf.gautschi on 24 Apr 2009 at 6:54

[GoogleCodeExporter]

The latest SVN and demo pages now show a image export option (with backend 
code).

Please test/review and provide comments. I will be closing this issue soon as I
believe the feature/function has been solved.

Original comment by gslen...@gmail.com on 24 Apr 2009 at 11:22

[GoogleCodeExporter]

Original comment by gslen...@gmail.com on 26 Apr 2009 at 10:21

• Changed state: Fixed

[GoogleCodeExporter]

I will be testing the image export this week. By the way, is the current beta 
release
compatible with GWT 1.6?

Original comment by ralf.gautschi on 11 May 2009 at 6:47

[GoogleCodeExporter]

Hi momega23, I tried the code snippet shared by u for one of the ofcgwt charts. 
The
value for '$doc.getElementById(id)' is always null for me. Can you help me onto 
this?
I want to save the chart as an image and so far didn't find a satisfactory 
solution
anywhere.

Original comment by ramandee...@gmail.com on 19 Jan 2010 at 11:13

[GoogleCodeExporter]

gslender wrote:

"The latest SVN and demo pages now show a image export option (with backend 
code)."

On which demo page can I find this export button?

Original comment by csillag....@gmail.com on 14 May 2010 at 4:29