Take screenshots og your app!

You’re not the first person to mention this and although I have not looked into it I can conjecture that the charts may not be part of the main DOM. Additionally, If they’re SVG charts the the html2image library probably doesn’t know how to render them.

It looks like the next release willl support SVG rendering. It is currently in alpha status at https://github.com/niklasvh/html2canvas/releases

Thanks for the response. I did pull down the latest version of html2canvas and the SVG rendering still did not work. However, I was able to use the solution described
here
to use canvg.js to pre-render the SVG’s onto a canvas object. By doing this I am able to render my SVG objects in the final output image.

Also, I saw some comments requesting the ability to capture a single component rather than the entire screen. I was able to do this using the Screenshot’s Builder class.

Screenshot screenshot = Screenshot.newBuilder().ofTargetComponent(myComponent).build();

This successfully renders only the requested component, however the size of the image is equal to the size of the parent window. This might be the issue to which Evgeny was referring above.

Great product, thanks for making it available.

Hi,

I 'm trying to get your demo working, but it failed: [ERROR]
No plugin found for prefix ‘jetty’ in the current project and in the plugin groups [org.apache.maven.plugins, org.codehaus.mojo]
available from the repositories…

I have downloaded your project from github, Opened it in eclipse and choose Run as → Maven build using the Goals clean install jetty:run

Any idea’s?

My guess is the version of Jetty used in the project is too old. Are you testing the Vaadin 7 or Vaadin 8 version of the plug-in?

Hi mark,

I just figured out I must add the org.mortbay.jetty plugin group to C:\Users.….m2\settings.xml :

<settings xmlns="http://maven.apache.org/SETTINGS/1.0.0"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/SETTINGS/1.0.0
                      http://maven.apache.org/xsd/settings-1.0.0.xsd">
  <localRepository>${user.home}/.m2/repository</localRepository>
  <interactiveMode>true</interactiveMode>
  <usePluginRegistry>false</usePluginRegistry>
  <offline>false</offline>
  <pluginGroups>
    <pluginGroup>org.mortbay.jetty</pluginGroup>
  </pluginGroups>
</settings>

Now I don’t understand how to run it from eclipse.
I use the maven goals : clean install jetty:run

Jetty runs but it gives a 404 page using
http://localhost:8080/screenshot-demo/
or
http://localhost:8080

I also tried to run the maven goals: clean install cd demo jetty:run
But this gives the error: Unknown lifecycle phase “cd”. You must specify a valid lifecycle phase or a goal in the format.

You shouldn’t have to add anything to settings.xml. I just opened the project and replicated the issue. Even tried updating the Jetty plugin and it still fails. As for your error, you have run mvn clean install then run cd demo then run mvn jetty:run

Hi,

Got it working. it must be cd screenshot-demo.

Great! Glad to hear it!

I want to use it in a Vaadin 8 project. So I tried to change the vaadin version in the pom.xml files in your demo project.

I have changed <vaadin.version>8.5.0</vaadin.version> in screenshot-demo/pom.xml
and screenshot/pom.xml.
I also removed this.setImmediate(true); in Screenshot.java

Then run mvn clean install then run cd screenshot-demo then run mvn jetty:run

This results in the next error:

[WARNING]
 Problem processing jar entry com/vaadin/data/Result.class
java.lang.ArrayIndexOutOfBoundsException: 51966
    at org.objectweb.asm.ClassReader.readUTF8 (Unknown Source)
    at org.objectweb.asm.ClassReader.readClass (Unknown Source)
    at org.objectweb.asm.ClassReader.accept (Unknown Source)
    at org.objectweb.asm.ClassReader.accept (Unknown Source)
    at org.eclipse.jetty.annotations.AnnotationParser.scanClass (AnnotationParser.java:899)
    at org.eclipse.jetty.annotations.AnnotationParser$2.processEntry (AnnotationParser.java:857)
    at org.eclipse.jetty.webapp.JarScanner.matched (JarScanner.java:161)
    at org.eclipse.jetty.util.PatternMatcher.matchPatterns (PatternMatcher.java:100)
    at org.eclipse.jetty.util.PatternMatcher.match (PatternMatcher.java:82)
    at org.eclipse.jetty.webapp.JarScanner.scan (JarScanner.java:84)
    at org.eclipse.jetty.annotations.AnnotationParser.parse (AnnotationParser.java:869)
    at org.eclipse.jetty.annotations.AnnotationParser.parse (AnnotationParser.java:884)
    at org.eclipse.jetty.annotations.AnnotationConfiguration.parseWebInfLib (AnnotationConfiguration.java:422)
    at org.eclipse.jetty.annotations.AnnotationConfiguration.configure (AnnotationConfiguration.java:120)
    at org.eclipse.jetty.webapp.WebAppContext.configure (WebAppContext.java:468)
    at org.eclipse.jetty.webapp.WebAppContext.startContext (WebAppContext.java:1237)
    at org.eclipse.jetty.server.handler.ContextHandler.doStart (ContextHandler.java:717)
    at org.eclipse.jetty.webapp.WebAppContext.doStart (WebAppContext.java:494)
    at org.mortbay.jetty.plugin.JettyWebAppContext.doStart (JettyWebAppContext.java:298)
    at org.eclipse.jetty.util.component.AbstractLifeCycle.start (AbstractLifeCycle.java:64)
    at org.eclipse.jetty.server.handler.HandlerCollection.doStart (HandlerCollection.java:229)
    at org.eclipse.jetty.server.handler.ContextHandlerCollection.doStart (ContextHandlerCollection.java:172)
    at org.eclipse.jetty.util.component.AbstractLifeCycle.start (AbstractLifeCycle.java:64)
    at org.eclipse.jetty.server.handler.HandlerCollection.doStart (HandlerCollection.java:229)
    at org.eclipse.jetty.util.component.AbstractLifeCycle.start (AbstractLifeCycle.java:64)
    at org.eclipse.jetty.server.handler.HandlerWrapper.doStart (HandlerWrapper.java:95)
    at org.eclipse.jetty.server.Server.doStart (Server.java:282)
    at org.mortbay.jetty.plugin.JettyServer.doStart (JettyServer.java:65)
    at org.eclipse.jetty.util.component.AbstractLifeCycle.start (AbstractLifeCycle.java:64)
    at org.mortbay.jetty.plugin.AbstractJettyMojo.startJetty (AbstractJettyMojo.java:520)
    at org.mortbay.jetty.plugin.AbstractJettyMojo.execute (AbstractJettyMojo.java:365)
    at org.mortbay.jetty.plugin.JettyRunMojo.execute (JettyRunMojo.java:523)
    at org.apache.maven.plugin.DefaultBuildPluginManager.executeMojo (DefaultBuildPluginManager.java:137)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:208)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:154)
    at org.apache.maven.lifecycle.internal.MojoExecutor.execute (MojoExecutor.java:146)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:117)
    at org.apache.maven.lifecycle.internal.LifecycleModuleBuilder.buildProject (LifecycleModuleBuilder.java:81)
    at org.apache.maven.lifecycle.internal.builder.singlethreaded.SingleThreadedBuilder.build (SingleThreadedBuilder.java:56)
    at org.apache.maven.lifecycle.internal.LifecycleStarter.execute (LifecycleStarter.java:128)
    at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:305)
    at org.apache.maven.DefaultMaven.doExecute (DefaultMaven.java:192)
    at org.apache.maven.DefaultMaven.execute (DefaultMaven.java:105)
    at org.apache.maven.cli.MavenCli.execute (MavenCli.java:956)
    at org.apache.maven.cli.MavenCli.doMain (MavenCli.java:290)
    at org.apache.maven.cli.MavenCli.main (MavenCli.java:194)
    at sun.reflect.NativeMethodAccessorImpl.invoke0 (Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke (NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke (DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke (Method.java:498)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launchEnhanced (Launcher.java:289)
    at org.codehaus.plexus.classworlds.launcher.Launcher.launch (Launcher.java:229)
    at org.codehaus.plexus.classworlds.launcher.Launcher.mainWithExitCode (Launcher.java:415)
    at org.codehaus.plexus.classworlds.launcher.Launcher.main (Launcher.java:356)
[WARNING]
 Problem processing jar entry com/vaadin/data/TreeData.class
java.lang.ArrayIndexOutOfBoundsException: 21457
    at org.objectweb.asm.ClassReader.<init> (Unknown Source)
    at org.objectweb.asm.ClassReader.<init> (Unknown Source)
    at org.objectweb.asm.ClassReader.<init> (Unknown Source)

I think it is not compatible with Vaadin 8?

It is most definitely compatible with Vaadin 8. I use it in Vaadin 8 projects. The error you are getting is a Jetty error most likely caused via a version of ASM not compatible with Java 8

Hi Mark,

Before I tried to get your demo working I have added the screenshot add-on dependency and sample code to a button on my app. But there came no screenshot. perhaps you might notice also to add the screenshot component to the layout: ‘‘layout.addComponent( screenshot );’’

Now I got it working in our vaadin 8 app. It only shows no icons and it looks different than the original. See attachment.
Any idea’s?
17207613.png

Unfortunately not. Something might have changed with newer Vaadin versions.

Hi Mark,

I have used this add on to take a screenshot and saved it to a vaadin.ui.Image type.
Now, I want to convert this vaadin.ui.Image type to a java.io.File type for further usage. I researched a lot but could’nt find a solution that works for me. Please help!

Sorry, not sure how to do that. I imagine you can get a byte array from it.

Good morning, I am implementing the demo on vaadin 7.6.8 and it does not enter the screenshotComplete, I do not get any error.
my code is this:

screenshot = new Screenshot();
		screenshot.setTargetComponent(content);
		screenshot.addScreenshotListener(new ScreenshotListener() {
			
            public void screenshotComplete(ScreenshotImage image) {            	
    			System.out.println(image.getDataURL());
            	Window window = new Window("Here's your screenshot", new Image(null, new ExternalResource(image.getDataURL())));
                window.setWidth("80%");
                window.setHeight("80%");
                UI.getCurrent().addWindow(window);
                window.focus();    	 		
            }
        });

content is a VerticalLayout

the implementation of the button is this

ok = new Button("OK");
        ok.addStyleName(ValoTheme.BUTTON_PRIMARY);   
        ok.setIcon(FontAwesome.CLOUD_UPLOAD);  
        ok.addClickListener(event->{
        	screenshot.takeScreenshot();
        	        	
        });

when I click the OK button, it doesn’t fire the screenshotComplete event

thanks.

I don’t see you adding screenshot to the UI.

Mark Thomas:
I don’t see you adding screenshot to the UI.

is taken with screenshot.takeScreenshot() ?

which I have in the “ok” button?

That method only works once the screenshot widget is part of the UI

Perfect, thank you very much.
I took the screenshot and save the image,
Could you increase the resolution of the screenshot?
thanks