Take screenshots og your app!

Klenkovic · November 29, 2016, 3:09pm

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

Mark23 · November 29, 2016, 4:19pm

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

Klenkovic · November 30, 2016, 8:59am

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 !

Mark23 · December 15, 2016, 2:49pm

sorry, i can’t read russian

Evgeny32 · December 16, 2016, 5:11am

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?

Mark23 · December 16, 2016, 2:13pm

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

James241 · May 22, 2017, 7:09pm

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?

Mark23 · May 22, 2017, 10:15pm

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.

Mark23 · May 22, 2017, 10:18pm

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

James241 · May 24, 2017, 6:17pm

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.

Olaf29 · August 9, 2018, 9:43am

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?

Mark23 · August 9, 2018, 10:08am

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?

Olaf29 · August 9, 2018, 10:23am

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.

Mark23 · August 9, 2018, 10:26am

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

Olaf29 · August 9, 2018, 10:41am

Hi,

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

Mark23 · August 9, 2018, 10:42am

Great! Glad to hear it!

Olaf29 · August 9, 2018, 11:06am

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?

Mark23 · August 9, 2018, 11:52am

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

Olaf29 · August 9, 2018, 12:28pm

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?

Mark23 · August 9, 2018, 12:40pm

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