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.

Answer 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.

Answer 2

you may also try to create java applet or jar included into site that would capture some part of the screen or browser. i saw mechanism for real time screen sharing based on jar loaded files, but i didn't see the code.

here is some lib for java html into image conversion http://code.google.com/p/java-html2image/

heres simmilar topic How to capture selected screen of other application using java?

Answer 3

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.