#1674 HtmlUnit and canvas. Image as base64 string.

[Adrien Combecau]

Hello HtmlUnit team. I'm trying to get and image via base64 string but htmlUnit returns something diferent than browsers do.

I made a test case, a javascript that copy and image and append in other tag.

Aparently htmlunit is returning and empty canvas (default 300x150 pixels png image file);

@Test
public void TesteTJMG() throws FailingHttpStatusCodeException, MalformedURLException, IOException {
WebClient webClient = new WebClient(BrowserVersion.FIREFOX_24);
//init webClient
webClient.getOptions().setThrowExceptionOnFailingStatusCode(false);
webClient.getOptions().setThrowExceptionOnScriptError(false);
webClient.getOptions().setCssEnabled(false);
webClient.getOptions().setUseInsecureSSL(true);

    //start
    HtmlPage page = webClient.getPage(local);
    //execute script button
    page.executeJavaScript("copyPng()");        
    //in page.asXml() showing all resources img are in data:image/png;base64 and should be JPEG in 'convertedjpeg'
    //HmltUnit behavior strange copying. The canvas with default size 300x150 and converting to a tranparent png file.
    //saving the image file show coping failed. Only a default canvas 300x150 png image.
    //saving the page via htmlUnit to debug. 
    page.save(new File("canvasPageTest.html"));     
    try {
        HtmlImage img = (HtmlImage) page.getElementById("pngResult");
        InputStream is = img.getWebResponse(true).getContentAsStream();
        byte[] bytes = IOUtils.toByteArray(is);
        saveBytes("testCheetaResult.png", bytes);
        Assert.assertFalse(base64emptyPng.equals(img.getAttribute("src")));
        Assert.assertTrue(img.getAttribute("src").length() > 362);
    } catch (Exception e) {
        e.printStackTrace();
    }
}

[Ahmed Ashour]

This is because CanvasRenderingContext2D has empty implementation of drawImage(), and HTMLCanvasElement.toDataURL() returns hardcoded value.

[Ahmed Ashour]

The three major browsers behave differently. We need to know the logic for each.

Any help is appreciated.

https://sourceforge.net/p/htmlunit/code/10292/tree//trunk/htmlunit/src/test/java/com/gargoylesoftware/htmlunit/javascript/host/canvas/CanvasRenderingContext2DTest.java#l167

[Carsten]

HTMLCanvasElement.getWidth() and HTMLCanvasElement.getHeight() throw a NumberFormatException if the attribute contains a non-numeric character.

Firefox parses the attribute till it finds a non-numeric character or returns the default value if it does not start with one.

Examples with Firefox:
"31" : 31
"3.1" : 3
"3.9" : 3
"3e9" : 3
"ee" : default(150 or 300)

~~~~~~~~~~~~~~~~~~~

Caused by: java.lang.NumberFormatException: For input string: "86.39999999999999"
at java.lang.NumberFormatException.forInputString(NumberFormatException.java:65)
at java.lang.Integer.parseInt(Integer.java:580)
at java.lang.Integer.parseInt(Integer.java:615)
at com.gargoylesoftware.htmlunit.javascript.host.html.HTMLCanvasElement.getHeight(HTMLCanvasElement.java:87)
at com.gargoylesoftware.htmlunit.javascript.host.canvas.CanvasRenderingContext2D.<init>(CanvasRenderingContext2D.java:77)
at com.gargoylesoftware.htmlunit.javascript.host.html.HTMLCanvasElement.getContext(HTMLCanvasElement.java:108)
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:483)
at net.sourceforge.htmlunit.corejs.javascript.MemberBox.invoke(MemberBox.java:167)
... 25 more</init>

~~~~~~~~~~~~~~~~~~

[Ahmed Ashour]

Test cases added in HTMLCanvasElementTest

[Michael Anderson]

Is there any update on this?

[RBRi]

Yes, we made some updates here. The width and heigt parsing error is fixed. And if you use a CanvasRenderingContext2D the toDataURL() result is no loner hard coded.
So please give the latest version a try and please inform us about your results.

Will have a look at the details of the original error report later today.

[RBRi]

NumberFormatException is fixed, there are also test cases available

[RBRi]

Looks like there is still a problem. Will try to figure out what is wrong in your case.

[Michael Anderson]

In my case I'm trying to use html2canvas to render a screenshot to a BASE64 string, but we are getting the empty canvas. I'm currently using HTMLUnit 2.28 because bug 1897 is preventing me from using the latest version.

From what I can tell html2canvas uses a lot of draw functions that have an empty implementation in CanvasRenderingContext2D for version 2.28.

[RBRi]

From my point of view this is fixed now. Some things are already done as part of other workstreams and i finally have fixed the stupid initialization issue that recreates the context on every call. The attached sample no works.

html2canvas is a bit more complicated story. I like to handle this as part of issue 1922. Please try you sample with the latest snapshot build (will inform via twitter https://twitter.com/HtmlUnit if the next snapshot including this fix is available). But you have to have two points in mind

1. HtmlUnit is a headless browser. We are doing our best to implement rendering related method (without really rendering the content) and returning the correct results but there are still differences. So do not expect pixel correct screenshots. (For Wetator (www.wetator.org) i have choosen a different approch to make nice looking 'screenshots'. If you like, Wetator is opend soure and you can have a look).
2. html2canval is a complex javascript lib. There might be some more problems with this lib. If you have time it will be great to nail down problems to some broken javascript implementiation and report this as new issues. If possible if will try to fix it.

To sum it up: i will close this issue. Please open new issues if you are facing more problems or have a look (and comment) #1922.

Thanks for using HtmlUnit