Convert HTML page into image using Javascript

Question

Hi,

EDIT: I want to achieve it by with out using any third party software..My application is a SAP product and I cannot go to every customer and install that software in his system.
I have the following scenario..

    There is a button in my webiste(ofcourse,its a business applicaion) named "Save as image".so whenever user presses that button the content of the page has to be converted to image file and saved in his system.
    Can we achieve it by either javascript or jquery?
    If we cannot do it in javascript ,can we do it in SAP BSP,since my application is being developed in SAP BSP?

        I had already searched in this site and found one solution which only works in Firefox extesnion. But I need a cross-browser solution which must work for IE,Chromer,ect.

Solution 1

The way to do this would be render the HTML page in hidden <canvas> element and then saving the canvas content as an image.

It is possible, but you won't have perfect rendering output or a solution working on legacy browsers.

Please see

https://stackoverflow.com/a/12660867/315168

for more information.

Alternatively submit a stateless page URL to the server-side where a headless browser renders the page and takes a screenshot using Selenium automation. If the page is public some web services exist for this too.

Solution 2

One easy but partial IE solution, it uses ActiveX so not crosswbrowser and a general one that is a bit more cumbersome

The IE solution

function printScreen(){
  var oWordBasic;
  if (window.ActiveXObject){
    oWordBasic = new ActiveXObject("Word.Basic");
    oWordBasic.SendKeys('%{1068}'); 
    oWordBasic.SendKeys('%{PRTSC}'); //or if the above doesnt work..
    //save or transfer the clipboard contensts
  }
}

The general solution:

Use a screen capture utility like Gadwin PrintScreen http://www.gadwin.com/printscreen/, it's for windows but i'm sure there are the like for Linux and Mac. You can define a hotkey and let this save the image to a fixed location with autonumbering. The program doesn't need to be installed, it's portable so it can reside on a networkshare.

Comments

[Rama Rao M]

The problem is the canvas rendering part is not working in IE.....Coming to second option, Can you explain more? I never heard of Selenium autiomation.. OR can you provide a good example....Thanks

[Rama Rao M]

As I mentioned, It is SAP BSP applcation,so I cannot use any other languages like java,etc......Thanx for your reply....

[vwegert]

Rama, your assumption that you cannot include a Java applet in a BSP page is simply wrong.

[Misiakw]

you cannot install anything on you'r client devices, but all you can include on you'r site is not installed in you'r client's PC. Java applet is still Java applet and tour client didn't need to install anything, Java Virtual machine is so common, that we can say it's standard.

[Rama Rao M]

@MiSiakw I got your point and would like to follow.But I don't know java well.Can you please provide me a good example or a url that guides me towards that requirement...Thnx.

[Misiakw]

I've edited my answer. as i told, I've never seen any code of this, but provided links may be interesting. i found also library for html->image conversion in java, so it may be very interesting for you.

[flow]

no sane workplace environment these days should have java applets activated in the browser, it is a security nightmare. on second thought, there are probably millions of corporate windows workplaces running an old version of IE, so you might get lucky.