Link to home
Start Free TrialLog in
Avatar of loopstudio
loopstudio

asked on

How to take snapshot of HTML content for sharing as picture on Facebook

I have a HTML animation window which contains a mix of HTML, java & Flash.
I want the user to be able to share a snapshot of that content on Facebook.

I have found many solutions, like javascript, clientside/serverside, canvas, but it doesnt seem that they support snapshot of Flash and Java also.

But I am thinking something like the following should be possible:
1) if the user clicks a button in the browser window that calls some javascript which calls a .ASP program on the server, then
2) that .ASP program on the server creates a temporary window containing the same content, then it calls
3) a 3rd program taking a snapshot of the browser-window, and that calls a
4) 4th program that removes the window borders around the window content and saves the image on the server, so we have the core image, and then it calls
5) the next program which returns the finished status to the client, perhaps with a link to the image
6) then the browser gets the information and calls facebook sharer with a link to that image

Have anyone tried similar and can tell me what exactly to do or which programs to use?
Also how the clientside javascript should be to wait and retrive the finished image.

Or maybe has another working solution.

Thanx
Avatar of skullnobrains
skullnobrains

if the page is animated, you'll have a hard time to get a browser to display the page like it was at a specific point in time.

nevertheless, i can tell you i saw such a working setup using firefox, and a dummy xserver to take the screenshot, but they had no flash or java. there is no reason why it would not technically work with java and flash so it should be feasible. but it will be an awful resource hog and probably difficult to set up given the above problem

maybe it would be wiser to get actionscript to take a screenshot of the flash, and maybe something similar for the java, and build a dummy page layout to wrap it all ?
Avatar of loopstudio

ASKER

@skullnobrains. Ya, I have also been thinking of that, but then you need to have the source of the java and the flash, which I dont.

But what solution did you see work earlier?
How was it done technically and with what tools?
the browser was firefox. the screenshot was performed after a hard-coded sleep period of time by copying from the framebuffer. i'm sorry but i do not remember more

if i were to do it, i think i'd look into one of the extensions here
http://theheatweb.com/firefox-addons-screenshots-webpages/
you probably can programmatically add an event that triggers the screenshot when the page is loaded. it is likely to work with a dummy x server with no actual display

but again you will never be able to capture the flash or java as they are in the user's browser at the moment they ask for the screenshot.
I think it must be ok that its not exactly at the moment. But at least that it is the right animation.
Shouldnt it be possible in IE also?
This looks pretty cool, and can be called from IIS server and .ASP : http://www.guangmingsoft.net/htmlsnapshot/help.htm

But can anyone suggest what to do on the client in javascript to call this and wait for picture and then share?
you can't do it in pure javascript, but you most definitely can use one of the above extensions in order to trigger the screenshot and close the browser after the page is loaded. either build your own extension, or modify one of the above to achieve your goals.

there are various generic ways to take a screenshot programatically on windows and they will also work for IE but you'll have a hard time to trigger the screenshot after the page is loaded unless you just sleep long enough
http://social.msdn.microsoft.com/Forums/en-US/vssmartdevicesnative/thread/cdd260fc-f34d-4650-b529-8fc3d68b37b4
https://groups.google.com/forum/?fromgroups#!topic/win32-programming/VcAw7brq8CY
hi Skullnobrains,

Correct me if Im wrong.. your 2 links looks just like alternatives to Guangmingsoft I posted (which is allready ASP and IIS - which is what I use),  where your provided links use winapi.

So my question was more to how to integrate it with the client, so therefore.. its the javascript part I need to complete the task, as I see.
Its kind of... wait for / call back / json / something I guess.

Can anyone show an example of the javascript needed to call the ASP snapshot procedure and wait for the result and show the result image & status in the client?
the first links a sent you are FF extensions, because i assume they can be either modified or driven by another extension that will be aware of the pages status (ie know when it is loaded), and they seem to be the way to go in FF

the other ones are just generic ways to take a screenshot in windows

you cannot trigger an OS command through javascript for security reasons. it should be possible to do it in an activeX control but obviously that would not apply to FF. as far as i understood, this is what guangmingsoft does, except that their control loads the page itself instead of injecting it in another page. if it does work, and if you're ok it only works in IE, seems you found your own solution.

i'd be happy to get some feedback if you actually go this way.
I tried the guanmingsoft, but it doesnt seem to work and it wants me to disable all security and use admin users etc.

Instead I found ACA WebThumb ActiveX control and it seems to be much better and actually does take the snapshots and also without a lot of security disabling first.
So its seems good - and the way to do it.

But at the moment it didnt succeed me to get snapshots of java to work. Apparently a bug in IE8. But the ActiveX is made for IE. And it doesnt seem that there is a newer version of IE to Win 2003 webserver.
ASKER CERTIFIED SOLUTION
Avatar of skullnobrains
skullnobrains

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.