1

I'm trying to figure out of how to get a screenshot the whole web page. I'm working on a dashboard using 20 plus dc.js charts, cross filters all of them, and i'm using JSP. Client want to have a button where a user clicks and it will screen shot the whole web page. I'm running it through java because we have to use IE11 as our standard and all other js libraries such as HTML2canvas.js didnt work (it doesnt display the dc.js charts) though it sort of works on Chrome but we have to use IE11 (any suggestions would help).

So far when I click on a button, it will run a main method in JAVA to do a screen shot. So far I'm using java.awt.Robot but I researched and it says it only screen shot base on the screen of a primary monitor. I'm trying to have a screen shot of my web page. Is there a way to do that? if so how? Here is my Java code below. It screenshot base on the monitor...

 package com.customer_inquiry;

import java.net.URL;
import java.awt.*;
import java.awt.image.*;
import java.io.*;
import javax.imageio.*;

    public class screenshotAction {

        public static void main(String[] args) throws Exception {

    String outFileName = args[0];
    if (!outFileName.toLowerCase().endsWith(".png")) {
                System.err.println("Error: output file name must " + "end with \".png\".");
                System.exit(1);
            }
            // determine current screen size
            Toolkit toolkit = Toolkit.getDefaultToolkit();
            Dimension screenSize = toolkit.getScreenSize();
            Rectangle screenRect = new Rectangle(screenSize);
            // create screen shot
            Robot robot = new Robot();


            BufferedImage image = robot.createScreenCapture(screenRect);
            // save captured image to PNG file
            ImageIO.write(image, "png", new File(outFileName));
            // give feedback
            System.out.println("Saved screen shot (" + image.getWidth() + " x " + image.getHeight() + " pixels) to file \""
                    + outFileName + "\".");
            // use System.exit if the program hangs after writing the file;
            // that's an old bug which got fixed only recently
            // System.exit(0);
        }
    }
timJIN520
  • 299
  • 1
  • 3
  • 15

1 Answers1

1

There is html2canvas that might suit your needs: https://html2canvas.hertzen.com/

Apart from that, if you want to do it yourself, what comes to mind is to:

  • first create an svg
  • an a foreignObject tag
  • serialize the entire html using XMLSerializer and then set it to foreignObject via innerHTML. Alternatively use cloneNode.
  • draw the svg on the canvas
  • download the canvas
ibrahim tanyalcin
  • 5,643
  • 3
  • 16
  • 22
  • I did tried to use html2canvas but, somehow in IE11, it did not display dc.js charts after it develops the canvas. The way how my dashboard develops is that all the charts are created using a js library and it needs dc.js, dc.css, and our external application css. Do I have to set each of the charts in the canvas? – timJIN520 Apr 26 '18 at 18:37
  • ie11 will not play nice :) I wonder though, do just want to export the chart? – ibrahim tanyalcin Apr 26 '18 at 20:15
  • i just want to print screen the whole web page (dashboard) and it save a file as a jpeg or png. A user can share a picture of what they have filter in the charts. Sorry client want it lol Yea IE11 is kicking my butt. I tried researching similar libraries like html2canvas but it seems thats the only best. I'm trying to do this in the back end but I'm pretty new into GUI in Java related. Any suggestions? – timJIN520 Apr 26 '18 at 20:58
  • If your dashboard is composed of multiple svgs you can try snap shotting them maybe? I have heard about [jspdf](https://stackoverflow.com/questions/16858954/how-to-properly-use-jspdf-library?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa). If that doesn't work also, as a last resort, I have a [small library](https://github.com/IbrahimTanyalcin/SVG-TO-PIXELS) that exports svg as png. – ibrahim tanyalcin Apr 26 '18 at 21:03
  • I'll try to implement the jspdf. Though, I'm not using Node.js and I need to apply any libraries into our servers. Would it work just using the jspdf.min.js library? Or does it need to have all those libraries. – timJIN520 May 01 '18 at 14:10
  • As far as I know jspdf works out of the box client side. A server round trip might be needed in case of a non-evergreen browser. – ibrahim tanyalcin May 01 '18 at 16:51
  • Ok.. i tried using jspdf.js and it doesnt work.. It doesnt get svg elements when using from_html.js. DC.js charts contains bunch of svgs elements and I have like 20 plus charts in the dashboard. I found this https://github.com/MrRio/jsPDF/issues/1579 though, I can use pdf instead of jpeg or png. Longest I get a screenshot of the whole page. Any suggestions? – timJIN520 May 01 '18 at 17:36
  • Then your best bet would be to implement the workflow in my answer. IE11 might be difficult... – ibrahim tanyalcin May 01 '18 at 17:55