0

I have a web page with a file swf and an HTML button: when I click the button I want to save (download to my disk) the current image my swf file is showing (it is a sort of image gallery).

It perfectly works when the button is inside my swf but it fails when -through ExternalInterface- I call from JavaScript the method that saves the image.

I verified the JS-AS communication (it's ok) and I know that FileReference.save() only works when triggered by a user event. Probably, the click on an HTML button is not considered a user event.

Aside from changing anything (eg, moving some code on the server side, sending the image to server, then downloading it...), is there any way to simulate a user event? Any other solution or tip is appreciated.

NB: I would use a Flash button but the HTML is required.

AsTheWormTurns
  • 1,318
  • 3
  • 13
  • 26
  • You'll be fighting against different security models, Flash would probably only consider a user event as something that has been triggered by the user inside the Flash window. Otherwise it is just a function call from outside, which would be blocked for secutiry reasons. The only option with your current setup would be to have the button from within flash imo. The other option would be to implement a javascript equivalent using something like this http://stackoverflow.com/questions/6796974/force-download-an-image-using-javascript (look for the saving an image by data url or server download) – Pebbl Aug 29 '12 at 11:22
  • @pebbl You reached my same conclusions, I posted the question as a final attempt to find a different solution... – AsTheWormTurns Aug 29 '12 at 11:28
  • sure thing, in order to give a more detailed response however more information would be needed as to exactly how your images are stored and exposed by the server/flash. And what you exactly expect of the image download. I'm assuming going via the FileRef.save() route you expect a dialog for the user to choose where to save? – Pebbl Aug 29 '12 at 11:46
  • @pebbl Yes, I've a dialog. The images have been incorporated by third parties inside the swf (one image per frame), I save the entire stage into a BitmapData object, compress it with JPEGEncoder, then I call FileReference. – AsTheWormTurns Aug 29 '12 at 12:09

1 Answers1

0

Solution (or not as the case may be)

Flash based

Currently I would say your best bet is to stick with your button operating from within Flash. If you need to dislocate the button from your main Flash runtime, you could try what you are doing using two embeds of Flash and communicate between them using LocalConnection. I wouldn't recommend this however as LocalConnection is a pain to get working well, and there is no guarantee that you wont come up against security sandbox problems working across two instances.

Server-side based

You could implement a save system that would involve sending the image data back to a server and forming an actual URL that your front end could request. This would allow you to specify whatever you wanted for the download. The downsides to this are that it requires a server (so wont work for offline apps), it also requires quite a lot of hassle of sending the image data one way only to pull it down later...

I've gone in to more detail about this here:

Canvas Image to an Image file

HTML5 based

Currently I wouldn't recommend the Data URL download as I suggested in my comment because it is not a complete solution yet. However, on the plus side I'd keep an eye out on what the top browsers are implementing though, because that answer could change shortly.

Workings

Basically I just tried to implement an image download via a data URI (thinking this would be the best solution for your poblem), which all works fine, plus you could quite happily derive the Base64 data you need from your BitmapData object. However, the problem is that there is no way to specify a filename along with the download. So you end up with rather ugly filenames that don't even have the correct extension.

<a href="data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC">Click to Download File</a>

After researching a bit it seems there isn no workable workaround for this, but there are specifications that are ready to be implemented that would help:

<a download="filename.png" href="data:image/octet-stream;...">Download File</a>

The download attribute is designed for precisely the problem I mention above, and would allow naming of the download. Unfortunately I can't find a browser that implements it yet...

References

Community
  • 1
  • 1
Pebbl
  • 34,937
  • 6
  • 62
  • 64