Take screenshots og your app!

I’m happy to announce the Html2Canvas add-on which allows you to take an actual screenshot of your application and receive the image on your server for doing with as you please. A good use case is for support where your users can trigger a screenshot of the app to show you what they are seeing. The add-on can be downloaded from https://vaadin.com/directory#!addon/html2canvas-screenshot

Hello , I congratulate you for excellent plug -in

I get error in implementing its basic example in vaadin 7.5.8 error org/apache/commons/codec/binary/Base64 in (Screenshot.java:94), (Screenshot.java:78) (Screenshot.java:26) and (Screenshot.java:37).
using java 8
thanks

please provide your code and the stack trace. thanks.

// Initialize our new UI component
final Screenshot component = new Screenshot();
component.addScreenshotListener(new ScreenshotListener() {
public void screenshotComplete(ScreenshotImage image) {
showImageInWindow(image);
}
});

    // Show it in the middle of the screen
    final VerticalLayout layout = new VerticalLayout();
    //layout.setStyleName("demoContentLayout");
    layout.setSizeFull();
    layout.addComponent(component);

    final Button button = new Button("Take Screenshot", new Button.ClickListener() {
        public void buttonClick(Button.ClickEvent event) {
            component.takeScreenshot();
        }
    });
    layout.addComponent(button);
    layout.setComponentAlignment(button, Alignment.TOP_CENTER);

    final Button button2 = new Button("A screenshot of me!");
    final Screenshot targetScreenshot = new Screenshot();
    targetScreenshot.addScreenshotListener(new ScreenshotListener() {
        public void screenshotComplete(ScreenshotImage image) {
            
            showImageInWindow(image);
        }
    });
    targetScreenshot.setTargetComponent(button2);
    button2.addClickListener(new Button.ClickListener() {
        @Override
        public void buttonClick(ClickEvent event) {
            targetScreenshot.takeScreenshot();
        }
    });
    layout.addComponent(targetScreenshot);

    layout.addComponent(button2);
    layout.setComponentAlignment(button2, Alignment.TOP_CENTER);
    setContent(layout);

By clicking on the button , the error

feb 16, 2016 3:01:02 PM com.vaadin.server.DefaultErrorHandler doDefault
GRAVE:
java.lang.NoClassDefFoundError: org/apache/commons/codec/binary/Base64
at org.vaadin.addons.screenshot.Screenshot.parse(Screenshot.java:94)
at org.vaadin.addons.screenshot.Screenshot.parseAndNotify(Screenshot.java:78)
at org.vaadin.addons.screenshot.Screenshot.access$000(Screenshot.java:26)
at org.vaadin.addons.screenshot.Screenshot$1.screenshotResult(Screenshot.java:37)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(Unknown Source)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(Unknown Source)
at java.lang.reflect.Method.invoke(Unknown Source)
at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:158)
at com.vaadin.server.ServerRpcManager.applyInvocation(ServerRpcManager.java:118)
at com.vaadin.server.communication.ServerRpcHandler.handleInvocations(ServerRpcHandler.java:313)
at com.vaadin.server.communication.ServerRpcHandler.handleRpc(ServerRpcHandler.java:202)
at com.vaadin.server.communication.UidlRequestHandler.synchronizedHandleRequest(UidlRequestHandler.java:95)
at com.vaadin.server.SynchronizedRequestHandler.handleRequest(SynchronizedRequestHandler.java:41)
at com.vaadin.server.VaadinService.handleRequest(VaadinService.java:1408)
at com.vaadin.server.VaadinServlet.service(VaadinServlet.java:351)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:725)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:291)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:219)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:106)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:501)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:142)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:79)
at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:610)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:88)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:516)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1086)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:659)
at org.apache.coyote.http11.Http11NioProtocol$Http11ConnectionHandler.process(Http11NioProtocol.java:223)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1558)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.run(NioEndpoint.java:1515)
at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Unknown Source)

you are missing commons-codec from your classpath. maven should have pulled it in for you. if you’re not using maven you need to add commons-codec to classpath yourself. i tested version 1.6 with the add-on

excellent , now I click on the button and does nothing.
the action does not run when I click
sorry for my English

and I worked, had commented lines , thank you

Hi!
I was very excited to find your add-on and am really looking forward to taking my first screenshots. I don’t know why, but somehow I can’t get your add-on to work. After failing within my complex project, I tried to get it to run with this simple dummy-project:

    @Override
    protected void init(VaadinRequest request) {
        final VerticalLayout layout = new VerticalLayout();
        layout.setMargin(true);
        setContent(layout);

        
        final Screenshot screenshot = new Screenshot();
        screenshot.addScreenshotListener(new ScreenshotListener() {
            public void screenshotComplete(ScreenshotImage image) {
                Window window = new Window("Here's your screenshot", new Image(null, new ExternalResource(image.getDataURL())));
                window.setWidth("80%");
                window.setHeight("80%");
                addWindow(window);
            }
        });

        Button button = new Button("Click Me");
        button.addClickListener(new Button.ClickListener() {
            public void buttonClick(ClickEvent event) {
                screenshot.takeScreenshot();
            }
        });
        layout.addComponent(button);
    }

The compiler does not have any errors, but the method screenshotComplete is never invoked.

Could you give me any pointers in how to use your add-on or what I’m doing wrong? The complete dummy project is attached, if that helps.

Thank you!

23414.zip (13.6 KB)

You have not added the screenshot component to your layout.

thank you for the fast reply. Now I am getting the following error message on the screen:
“Widgetset ‘com.vaadin.DefaultWidgetSet’ does not contain implementation for org.vaadin.addons.screenshot.Screenshot. Check its component connector’s @Connect mapping, widgetsets GWT module description file and re-compile your widgetset. In case you have downloaded a vaadin add-on package, you might want to refer to add-on instructions”.

I have rebuilt the whole project and nothing has changed. I only added the add-on dependency to my ivy.xml. Do I need to do something else? Sorry, I am not that experienced with including add-ons.

Yes, you must compile a custom widgetset and include . See the demo project in GitHub.

works like a charm :slight_smile:

Thank you, your fast help made my day!

you’re very welcome!

Hello Mark A Thomas ! Good job for you add on. Your add on works perfectly, except when I want to make a screenshot of my map (openLayer). I have an error :

SecurityError: The operation is insecure window.html2canvas/options.complete start setImageLoadHandlers/img.onload I am using OpenLayer and Geoserver to display my map. When I remove the map, your add works well. What must I do ? thanks !

PS : this error is only occuring on Firefox and Chrome. On IE, I have no problem ! I need use those 3 browsers.

I’m afraid I do not have an answer for you to this SecurityError. I have never seen that before.

This is an error about CORS (Cross origin). The map that I display comes from another domain, so when I press screenshot, my method “ScreenshotComplete” is never invoked, and the error above show up ! except on IE. Someone has an idea ? thanks :slight_smile: !

sorry, i can’t read russian

Hello!
I have a very large component, when I make a screenshot, then captured the width equal to the width of the screen, the remaining space is white.
What could be the problem?

I’m afraid I don’t understand the problem.

I am able to use your plugin to capture a screenshot. However, it does not capture my svg components which were created using Google Charts. The other components of the page are captured correctly. Any suggestions?