With Javascript - no chart png file from "download" attribute click, or by saving result from WebResponse

lrpowell commented 3 years ago

I have a chart that I am downloading with Javascript. I do not need to click a button from HtmlUnit because I am running through the Javascript that will do the download:

    var imgData2 = canvas.toDataURL('image/png');
    imgData2 = imgData2.replace('image/png', 'image/octet-stream');

    var link2 = document.createElement("a");
    link2.setAttribute("href", imgData2);

    link2.setAttribute("download", fName + ".png");
    link2.click();

When I launch to this directly, I can both view the live chart and I get a download of the static chart in my browser downloads file. URL:

http://a405bp3.rch.stglabs.ibm.com:2004/SystemiNavigator/com/ibm/as400/pt/dojoChart/DojoGraphScriptLauncher.html?packageId=IBM_CS&perspectiveId=P_WAITS_OVERVIEW&perspectiveName=Waits Overview&collectionName=Q035000004&collectionLib=QPFRDATA&collectionType=Collection Services File Based Collection&fileLevel=48&startTime=Feb 3, 2021 11:00:05 PM&endTime=Ongoing&systemName=A405BP3 &release=V7R3M0&collectionFormat=*CSFILE&basePerspId= Resulting png file:

I want to duplicate this with HtmlUnit, but may be missing something in how this should be done. The response header type is the image/png as expected (or image/octet-stream if I do the replace as above)

[content-type=image/png;charset=US-ASCII]

The content string looks like it is the png data: content string:�PNG ....

I am wondering 2 things: 1) why isn't the download created when running in HtmlUnit? Is this supposed to work (the above code where link2 is created and clicked)? _

link2.setAttribute("download", fName + ".png"); link2.click();

_

2) if it doesn't work to automatically do the download, how do I need to process the results from HtmlUnit to get the png image in a file? Right now I am getting a "blank screen" with this code:

try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX)) {
    java.util.logging.Logger.getLogger("com.gargoylesoftware").setLevel(java.util.logging.Level.OFF);

    webClient.getCache().clear();
    webClient.getOptions().setCssEnabled(true);
    webClient.getOptions().setJavaScriptEnabled(true);

    webClient.setAjaxController(new NicelyResynchronizingAjaxController());
    webClient.getOptions().setThrowExceptionOnScriptError(true);

    Page page = webClient.getPage(url); 
    webClient.waitForBackgroundJavaScriptStartingBefore(10_000);
            // Tried this with the same results:    
    //Page page2 = page.getEnclosingWindow().getEnclosedPage();             
    //WebResponse response = page2.getWebResponse();
    WebResponse response = page.getWebResponse();

     try {
         IOUtils.copy(response.getContentAsStream(), outStream);
     } catch (FileNotFoundException e) {
         e.printStackTrace();
    } catch (IOException e) {
        e.printStackTrace();
     }  finally {
         if (outStream != null) {
             try {
                outStream.close();
            }
    catch (IOException e) {
      } 
     } 
    } 
  webClient.close();
}

testFile2

rbri commented 3 years ago

Ok, i think i got your point, have to check something here. Please be a bit patient....

rbri commented 3 years ago

Hi Lora,

another nice catch. HtmlUnit is a bit strange about downloads - in general it works like this:

there is no download - every response is loaded into a window
in the case your browser offers a download dialog, HtmlUnit replaces the content of the current window or of a new window with an UnknownPage making the content available as stream.
like in real browsers there is only one response for one request, no chance to show a page and offer a download as result of the same action

In your case a clever web programmer has done a hack by returning the page including some javascript adding an anchor and clicking the anchor to directly start the download (be warned, next time these peoples trying to sell something :-)).

Ok, what can i do for you

I have to fix HtmlUnit to handle the 'download' attribute of the anchor tag in the same way as simulating a Ctrl+click to force the download going into a new window - will try to fix this before the weekend.

And what is your part? Because i can't change the whole download logic, you have to deal with the new window by checking the content and then closing the window or switching back to the last window

lrpowell commented 3 years ago

Well... what if that programmer was me? I was trying to circumvent stepping through the page to provide a commandline export utility for our graphing functions.
It sounds like if I change the javascript to not work that way it will work without a "fix"?

rbri commented 3 years ago

Download handling fix is committed, if the CI build is green, i will make a new snaphot and inform you.

rbri commented 3 years ago

Yes it will - at least if i got you right :-) Have a look at the added tests from my last commit.

rbri commented 3 years ago

If you like to play with it you can use target='_blank' instead of the download attribute. Should be the same result, the download is available as Unknown page from a new window.

rbri commented 3 years ago

Snapshot is updated

lrpowell commented 3 years ago

Back to it after being down with COVID for a week (and still experiencing brain fog). Found the 48 SNAPSHOT jar. Could you provide more detail on the added tests? I am looking for those added around Feb 10.

rbri commented 3 years ago

Great to have you back!

The fix was done in this commit 4772e64d - 2021-02-10 20:58 In general clicking the anchor with the download attribute set is now handled like Ctrl+click - means the result is opened in a new window (and in your case should end up in an UnknownPage inside this window).

lrpowell commented 3 years ago

I'm not sure how to pull out the data once it comes back as an UnknownPage.

            ```
Page page = webClient.getPage(url); 
webClient.waitForBackgroundJavaScriptStartingBefore(10_000);

WebWindow webWin = webClient.getCurrentWindow();            // new window
Page newPage =      webWin.getEnclosedPage();                // UnknownPage inside window
WebResponse newResponse = newPage.getWebResponse(); //** 
System.out.println("New header:"+newResponse.getResponseHeaders());
                try {

                         IOUtils.copy(newResponse.getContentAsStream(), outStream);

                } catch (FileNotFoundException e) {
                    e.printStackTrace();
                } catch (IOException e) {
                    e.printStackTrace();
                }  finally {
                        if (outStreamNew != null) {
                            try {
                                outStreamNew.close();
                            }
                            catch (IOException e) {

                            } 
                        } 
                    }

rbri commented 3 years ago

Sorry, the type is UnexpectedPage and there is a method com.gargoylesoftware.htmlunit.UnexpectedPage.getInputStream().

But your code should also work - do you get an exception?

lrpowell commented 3 years ago

No exception. I am updating with the latest results --

thisFile

I am seeing the result is an UnexpectedPage

    Page page = webClient.getPage(url); 
    webClient.waitForBackgroundJavaScriptStartingBefore(10_000);

    WebResponse response = page.getWebResponse();                                   
    WebWindow webWin = webClient.getCurrentWindow();
    Page newPage =      webWin.getEnclosedPage();

    if (newPage instanceof UnexpectedPage) {
        System.out.println("unexpectedpage returned");
    }
    WebResponse newResponse = newPage.getWebResponse();
    System.out.println("New header:"+newResponse.getResponseHeaders());
     try (InputStream inpStr = newResponse.getContentAsStream()){
                  ImageInputStream iis = ImageIO.createImageInputStream(inpStr);
         BufferedImage image_buf = ImageIO.read(iis);
         ImageIO.write(image_buf, "png", file2);

lrpowell commented 3 years ago

This is the output when I get the Responsee and WebRequest:

Responsee: OK WebRequest:WebRequest[<url="data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAABLgAAASmCAYAAAAteRK9AAAgiElEQVR42uzYQQ0AAAyEsPNvetNB0krgyQ4AAAAAwiYBAAAAAGUGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYXAAAAAGkGFwAAAABpBhcAAAAAaQYX344dkAAAAAAI+v+6HYHOEAAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAmuACAAAAYE1wAQAAALAmuAAAAABYE1wAAAAArAkuAAAAANYEFwAAAABrggsAAACANcEFAAAAwJrgAgAAAGBNcAEAAACwJrgAAAAAWBNcAAAAAKwJLgAAAADWBBcAAAAAa4ILAAAAgDXBBQAAAMCa4AIAAABgTXABAAAAsCa4AAAAAFgTXAAAAACsCS4AAAAA1gQXAAAAAGuCCwAAAIA1wQUAAADAWkN9ofc3s5WxAAAAAElFTkSuQmCC", GET, EncodingType[name=application/x-www-form-urlencoded], [], {Accept=/, Accept-Encoding=gzip, deflate}, null>]

lrpowell commented 3 years ago

I am trying to get a look at the actual bytes in the file to determine what is going amiss. I was hoping to just output as hex, but haven't gotten that yet. The downloaded image of the chart that I get when running on a browser starts with:

âPNG

as does the file I write the image stream to. Is there something somewhere that needs to indicate "this is an image file" or are some bytes getting corrupted along the way?

lrpowell commented 3 years ago

Looking at the two files, I see that the browser downloaded files is 225,051 bytes and is size 1504 x 698. The file written to from the image stream is 8,385 bytes and size 1208 x 1190

rbri commented 3 years ago

Sorry for being late at this....

Not sure that i got all your points :-) So let me try to to write down my current understanding...

you are retrieving a page that includes some chart and some javascript crating this anchor and clicking the anchor.

From my point of view this should

replace the content of the current window with the new page including the chart (maybe this page does some more http requests to fetch the chart data via json or maybe the chart image if rendered on the server side)
the javascript click should open a new window (check the size of com.gargoylesoftware.htmlunit.WebClient.getWebWindows()) containing the response for the anchor request

So to get the chart content you have to get the stream from the new window content.

Your browser response looks like a png file - i guess this is expected.

But i'm not really sure to understand the output you have shown from the HtmlUnit Request/Response.

url="data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAABLgAAASmCAYAAAAteRK9A....

If this is the request URL then i guess something gets wrong here. This look like the date URL you might get if you ask a canvas for the data (image) encoded as url (see https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toDataURL).

Maybe there is another problem that leads (in HtmlUNit) to a wrong url for your anchor.

rbri commented 3 years ago

var imgData2 = canvas.toDataURL('image/png');
imgData2 = imgData2.replace('image/png', 'image/octet-stream');

var link2 = document.createElement("a");
link2.setAttribute("href", imgData2);

link2.setAttribute("download", fName + ".png");
link2.click();

ah ok, i have to check the browser behaviour if you have a data url assigned with an anchor....

rbri commented 3 years ago

Ok, now we are getting closer :-)

Have done some tests - looks like the anchor dataUrl handling in HtmlUnit is correct (you can have a look at my last commit, it opens a new window and the image stream from the window still reproduces the image.

Data Url seems to be a valid image (whole white - 1208x1190).

Why do you this replacement: imgData2 = imgData2.replace('image/png', 'image/octet-stream');

Conclusion so far: i fear the canvas rendering does not work as expected. Is this done by the application or do you use some framework? Do you see any log output complaining about not yet implemented stuff?

lrpowell commented 3 years ago

The length of webClient.getWebWindows() is 2
The content-type change was existing code. We have had support for exporting the file using the web previously, and are now trying to allow exporting the file without going through the web. I did try removing it without any difference in results.

The canvas rendering for creating the download image from the chart uses dojox.gfx.utils.toSvg. Is there something with Cross-Domain considerations that needs to be handled?

_onExportAsImg: function (surf, type, _chartContainertId, _fileName) {
        var dataImage = "data:image/svg+xml,";
        console.log("onExportAsImg _fileName:"+_fileName+" type:"+type);

        dojox.gfx.utils.toSvg(surf).then(
            dojo.hitch(this, function (fileName, svg) {
                var img = new Image();
                img.onload = dojo.hitch(this, function (fName) {
                    var canvas = document.createElement('canvas');
                    canvas.width = dojo.byId(_chartContainertId).clientWidth;
                    canvas.height = dojo.byId(_chartContainertId).clientHeight;
                    var context = canvas.getContext('2d');
                    context.fillStyle = '#fff';
                    context.fillRect(0, 0, canvas.width, canvas.height);
                    context.drawImage(img, 0, 0);

                    if (type == 'jpeg') {
                        var imgData = canvas.toDataURL('image/jpeg'); // returns DOMString
                        var link = document.createElement("a");
                        link.setAttribute("href", imgData);

                        link.setAttribute("download", fName + ".jpg");
                        console.log("jpeg download "+fName+".jpg");
                        // attribute of the <a> element target='_blank'
                        //link.setAttribute("target", '_blank');
                        link.click();
                    } else { // png default
                        var imgData2 = canvas.toDataURL('image/png');
                    //  imgData2 = imgData2.replace('image/png', 'image/octet-stream');

                        var link2 = document.createElement("a");
                        link2.setAttribute("href", imgData2);

                        link2.setAttribute("download", fName + ".png");
                        link2.setAttribute("target", '_blank');
                        link2.click();
                    }
                }, fileName);
                **img.src = dataImage + svg;**
            }, _fileName)
        );
    },

rbri commented 3 years ago

The length of webClient.getWebWindows() is 2

Do you save the content of the new window as png file?

lrpowell commented 3 years ago

Yes, Of the 2 windows found with getWebWindows(), the first window returns null for ImageIO.createImageInputStream indicating it is not a suitable ImageInputStream. I use the current window, enclosed page.

                ```

            Page page = webClient.getPage(url); 
            webClient.waitForBackgroundJavaScriptStartingBefore(10_000);
            WebResponse response = page.getWebResponse();

                             WebWindow webWin = webClient.getCurrentWindow();
            List<WebWindow> wwList = webClient.getWebWindows();
            Page **newPage** =  webWin.**getEnclosedPage**();
            WebResponse newResponse = newPage.getWebResponse();

            try (InputStream inpStr = newResponse.getContentAsStream()){
                ImageInputStream iis = ImageIO.createImageInputStream(inpStr);
                BufferedImage image_buf = ImageIO.read(iis);
                ImageIO.write(image_buf, "png", file2);

rbri commented 3 years ago

Ok, if you save the image (from the second window to a file - can you open the file with an image viewer and does the viewer reports the file as valid png?

And second

dojo.hitch(this, function (fileName, svg) {
        var img = new Image();
        img.onload = dojo.hitch(this, function (fName) {
            var canvas = document.createElement('canvas');
            canvas.width = dojo.byId(_chartContainertId).clientWidth;
            canvas.height = dojo.byId(_chartContainertId).clientHeight;
            var context = canvas.getContext('2d');
            context.fillStyle = '#fff';
            context.fillRect(0, 0, canvas.width, canvas.height);
            context.drawImage(img, 0, 0);

This code looks like the svg is never used - for me a white image makes sense. Or is there any magic that transfers the svg into the image you are drawing onto the canvas?

lrpowell commented 3 years ago

The svg is used right before the end of the onload where img.src = dataImage + svg;

lrpowell commented 3 years ago

For the first question, no. The only valid image file is the 2nd, and that is blank as saved to a png. Is that what you mean? The code I have had is saving it using the second page, getting it by:


WebResponse response = page.getWebResponse();
                WebWindow webWin = webClient.getCurrentWindow();
                Page newPage =  webWin.getEnclosedPage();
                if (newPage instanceof UnexpectedPage) {
                    System.out.println("unexpectedpage returned");
                }
                WebResponse newResponse = newPage.getWebResponse();
                System.out.println("New header:"+newResponse.getResponseHeaders());
                try (InputStream inpStr = newResponse.getContentAsStream()){
                    ImageInputStream iis = ImageIO.createImageInputStream(inpStr);
                    BufferedImage image_buf = ImageIO.read(iis);
                    ImageIO.write(image_buf, "png", file2);

Attached is the output (white image file).png: thisFile

rbri commented 3 years ago

Ok, see it (sorry i guess you might think i'm a bit blind but please keep in mind i do all the work in my spare time).

Looks like i have an idea why the image is empty - i guess dataImage + svg points to an svg file on the server right? If not can you please provide the value of dataImage + svg.

lrpowell commented 3 years ago

No problem. I think it is amazing what you do! I understand trying to make sense of someone else's code without the full project has got to be difficult (I don't want to do it). But each time you have dug through it and figured it out! I don't mind answering a question twice or clarifying my mess of information!

dataImage: "data:image/svg+xml,"

img: img
accessKey: ""
align: ""
alt: ""
ariaAtomic: null
ariaAutoComplete: null
ariaBusy: null
ariaChecked: null
ariaColCount: null
ariaColIndex: null
ariaColSpan: null
ariaCurrent: null
ariaDescription: null
ariaDisabled: null
ariaExpanded: null
ariaHasPopup: null
ariaHidden: null
ariaKeyShortcuts: null
ariaLabel: null
ariaLevel: null
ariaLive: null
ariaModal: null
ariaMultiLine: null
ariaMultiSelectable: null
ariaOrientation: null
ariaPlaceholder: null
ariaPosInSet: null
ariaPressed: null
ariaReadOnly: null
ariaRelevant: null
ariaRequired: null
ariaRoleDescription: null
ariaRowCount: null
ariaRowIndex: null
ariaRowSpan: null
ariaSelected: null
ariaSetSize: null
ariaSort: null
ariaValueMax: null
ariaValueMin: null
ariaValueNow: null
ariaValueText: null
assignedSlot: null
attributeStyleMap: StylePropertyMap {size: 0}
attributes: NamedNodeMap {0: src, src: src, length: 1}
autocapitalize: ""
autofocus: false
baseURI: "http://a405bp3.rch.stglabs.ibm.com:2004/SystemiNavigator/com/ibm/as400/pt/dojoChart/DojoGraphScriptLauncher.html?packageId=IBM_CS&perspectiveId=P_WAITS_OVERVIEW&perspectiveName=Waits%20Overview&collectionName=Q035000004&collectionLib=QPFRDATA&collectionType=Collection%20Services%20File%20Based%20Collection&fileLevel=48&startTime=Feb%203,%202021%2011:00:05%20PM&endTime=Ongoing&systemName=A405BP3%20&release=V7R3M0&collectionFormat=*CSFILE&basePerspId="
border: ""
childElementCount: 0
childNodes: NodeList []
children: HTMLCollection []
classList: DOMTokenList [value: ""]
className: ""
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 0
complete: false
contentEditable: "inherit"
crossOrigin: null
currentSrc: ""
dataset: DOMStringMap {}
decoding: "auto"
dir: ""
draggable: true
elementTiming: ""
enterKeyHint: ""
firstChild: null
firstElementChild: null
height: 0
hidden: false
hspace: 0
id: ""
innerHTML: ""
innerText: ""
inputMode: ""
isConnected: false
isContentEditable: false
isMap: false
lang: ""
lastChild: null
lastElementChild: null
loading: "auto"
localName: "img"
longDesc: ""
lowsrc: ""
name: ""
namespaceURI: "http://www.w3.org/1999/xhtml"
naturalHeight: 0
naturalWidth: 0
nextElementSibling: null
nextSibling: null
nodeName: "IMG"
nodeType: 1
nodeValue: null
nonce: ""
offsetHeight: 0
offsetLeft: 0
offsetParent: null
offsetTop: 0
offsetWidth: 0
onabort: null
onanimationend: null
onanimationiteration: null
onanimationstart: null
onauxclick: null
onbeforecopy: null
onbeforecut: null
onbeforepaste: null
onbeforexrselect: null
onblur: null
oncancel: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
onclose: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
onformdata: null
onfullscreenchange: null
onfullscreenerror: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: ƒ ()
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerrawupdate: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onresize: null
onscroll: null
onsearch: null
onseeked: null
onseeking: null
onselect: null
onselectionchange: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
ontoggle: null
ontransitioncancel: null
ontransitionend: null
ontransitionrun: null
ontransitionstart: null
onvolumechange: null
onwaiting: null
onwebkitanimationend: null
onwebkitanimationiteration: null
onwebkitanimationstart: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwebkittransitionend: null
onwheel: null
outerHTML: "<img src="data:image/svg+xml,<svg xmlns:xlink=&quo"
outerText: ""
ownerDocument: document
parentElement: null
parentNode: null
part: DOMTokenList [value: ""]
prefix: null
previousElementSibling: null
previousSibling: null
referrerPolicy: ""
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 0
shadowRoot: null
sizes: ""
slot: ""
spellcheck: true
src: "data:image/svg+xml,<svg xmlns:xlink="http://www.w3"
srcset: ""
style: CSSStyleDeclaration {alignContent: "", alignItems: "", alignSelf: "", alignmentBaseline: "", all: "", …}
tabIndex: -1
tagName: "IMG"
textContent: ""
title: ""
translate: true
useMap: ""
vspace: 0
width: 0
x: 0
y: 0
__proto__: HTMLImageElement
svg: "<svg xmlns:xlink="http://www.w3.org/1999/xlink" xm"
this: Object

a file might be better. This is the svg portion: output.txt

rbri commented 3 years ago

OK, will try to write some tests and think about a fix - the current problem is the missing support for svg based images when calling drawImage on a canvas.

rbri commented 3 years ago

Hi Lora, have written some tests and found some more issues :-)

But for the start:

the problem is the missing svg support (in Java/Java ImageIO)
this means HtmlUnit is out of the box not able to convert your SVG into a pixel image
this pixel image is required by the drawImage method of the canvas to produce some output
at the moment this missing support is ignored silently

But there is hope - as always (;-))

If you are using maven for your project you can add this dependencies

    <dependency>
        <groupId>com.twelvemonkeys.imageio</groupId>
        <artifactId>imageio-batik</artifactId>
        <version>3.6.2</version>
    </dependency>
    <dependency>
        <groupId>org.apache.xmlgraphics</groupId>
        <artifactId>batik-transcoder</artifactId>
        <version>1.14</version>
        <exclusions>
            <exclusion>
                <groupId>commons-logging</groupId>
                <artifactId>commons-logging</artifactId>
            </exclusion>
            <exclusion>
                <groupId>commons-io</groupId>
                <artifactId>commons-io</artifactId>
            </exclusion>
        </exclusions>
    </dependency>

This makes java a bit more clever (without any further configuration) - now we have support for rastering svg images (based on batik). I guess this will produce some more output for your case than only a white image.

Outside of this i have written some more tests for the drawImage implementation and found a bunch of more fixes required to produce correct results. Will work on this during the next days and wake you up if there is a new snapshot. So please try to test and give me a sign if you see some more output. And please be a bit patient i will try to fix the remaining issues to produce the correct output.

rbri commented 3 years ago

made huge progress on drawImage - mill make a new snapshot available later today

lrpowell commented 3 years ago

I don't know what your "day job" is, but I'm thankful you put so much time into your volunteer work! So I have a dual project thing going on right now. One is the old project which I can get to the point to download the image. But that is not built with maven. So do I understand it that if I package with my program that calls HtmlUnit, they will be made use of if available? Or do they need to be packaged with the code that is generating the web page image I am trying to download (javascript)? I'm also not sure of the licensing for the twelvemonkeys, but I don't think you mean this to be a long term solution.

rbri commented 3 years ago

hi lora, i'm sure you are able to figure out what my daily job is - and i'm spending more than 40h a week on that. And i have a familiy too.

Ok now to the projects.

From my point if view the solution with twelvemonkeys and batik is for the long term - i definitely have no time to write another svg renderer (see above ;-)).

Now about dependencies

you need the twelvemonkeys/batik stuff in the same jvm as HtmlUnit. If you do not use maven or other dependeny mgnt tool you have to download the libs manually and place it in your lib dir / classpath.
there is no additional configuration required, java is able to pick up the stuff automatically (if you have done it right :-)

Here the list (without any warranty) -maybe you do not need all the files - but as a starting point

M2_REPO/com/twelvemonkeys/imageio/imageio-batik/3.6.2/imageio-batik-3.6.2.jar M2_REPO/com/twelvemonkeys/imageio/imageio-core/3.6.2/imageio-core-3.6.2.jar M2_REPO/com/twelvemonkeys/common/common-lang/3.6.2/common-lang-3.6.2.jar M2_REPO/com/twelvemonkeys/common/common-io/3.6.2/common-io-3.6.2.jar M2_REPO/com/twelvemonkeys/common/common-image/3.6.2/common-image-3.6.2.jar

M2_REPO/org/apache/xmlgraphics/batik-transcoder/1.14/batik-transcoder-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-anim/1.14/batik-anim-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-awt-util/1.14/batik-awt-util-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-shared-resources/1.14/batik-shared-resources-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-util/1.14/batik-util-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-constants/1.14/batik-constants-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-i18n/1.14/batik-i18n-1.14.jar M2_REPO/org/apache/xmlgraphics/xmlgraphics-commons/2.6/xmlgraphics-commons-2.6.jar M2_REPO/org/apache/xmlgraphics/batik-css/1.14/batik-css-1.14.jar M2_REPO/xml-apis/xml-apis-ext/1.3.04/xml-apis-ext-1.3.04.jar M2_REPO/org/apache/xmlgraphics/batik-dom/1.14/batik-dom-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-ext/1.14/batik-ext-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-xml/1.14/batik-xml-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-parser/1.14/batik-parser-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-svg-dom/1.14/batik-svg-dom-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-bridge/1.14/batik-bridge-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-gvt/1.14/batik-gvt-1.14.jar M2_REPO/org/apache/xmlgraphics/batik-script/1.14/batik-script-1.14. M2_REPO/org/apache/xmlgraphics/batik-svggen/1.14/batik-svggen-1.14.jar

lrpowell commented 3 years ago

OK. I have re-run with the added jar files included in the running JVM with HtmlUnit. I don't get anything different for the png. It looks like the text in the .jpeg may be slightly different, but just a black file.

testFileNav4i copy.jpeg.txt thisFile copy.png.txt

Is there anything else I can do to verify the included jar files are being utilized?

rbri commented 3 years ago

too prove your setup you can simply run

    final String svg =  "<svg xmlns:xlink=\"http://www.w3.org/1999/xlink\" xmlns=\"http://www.w3.org/2000/svg\">"
                                + "<circle cx=\"5\" cy=\"5\" r=\"4\" stroke=\"black\" stroke-width=\"1\" fill=\"red\" />"
                                + "</svg>";
    BufferedImage img = ImageIO.read(new ByteArrayInputStream(svg.getBytes(StandardCharsets.US_ASCII)));
    System.out.println(img);

This should output something like

    BufferedImage@c05fddc: type = 2 DirectColorModel: rmask=ff0000 gmask=ff00 bmask=ff amask=ff000000 IntegerInterleavedRaster: width = 400 height = 400 #Bands = 4 xOff = 0 yOff = 0 dataOffset[0] 0

lrpowell commented 3 years ago

This is what I got, looks like all but the "type" are the same?

BufferedImage@51df223b: type = 3 DirectColorModel: rmask=ff0000 gmask=ff00 bmask=ff amask=ff000000 IntegerInterleavedRaster: width = 400 height = 400 #Bands = 4 xOff = 0 yOff = 0 dataOffset[0] 0

rbri commented 3 years ago

Looks like this part works, will do some tests with your svg. The different types are maybe related to your screen/os/colormodel.

lrpowell commented 3 years ago

Could I change the javascript to use a different method to create the image data generated, something more in line with what HtmlUnit already supports?

rbri commented 3 years ago

I took your svg from above and wrote a small sample that renders this onto a canvas. This is the result...

rbri commented 3 years ago

Ups the black stuff seem to be a bug during c&p - the legend has a white backgrond here

rbri commented 3 years ago

Was the svg content from above from the browser or from HtmlUnit?

rbri commented 3 years ago

do you have a Teams account - maybe chatting there is a bit faster - ronald.brill at gebit.de

rbri commented 3 years ago

which version of dojox/gfx so you use? - maybe i can add the test suite

lrpowell commented 3 years ago

We are on dojo 1.16.3.

The svg content I posted yesterday was what I pulled out and saved in a file while running with HtmlUnit.

That is great to see the chart!

I don't have a Teams account, how about slack? I have chatted with people outside IBM with slack. lrpowell us.ibm.com

rbri commented 3 years ago

Sorry no slack - but i have my own jitsi server running. you can try https://meet.wetator.org/HtmlUnit

rbri commented 3 years ago

The svg content I posted yesterday was what I pulled out and saved in a file while running with HtmlUnit.

strange - if HtmlUnit is able to produce this svg i have no idea why this is not part of the result.

rbri commented 3 years ago

Have added another testcase that mimics your case really close

https://github.com/HtmlUnit/htmlunit/commit/b1a290314f353ab4ac765cc92db219903d2c86db

this works fine - you are sure you using the latest snapshot build? https://jenkins.wetator.org/job/HtmlUnit%20-%20Headless/ws/target/

lrpowell commented 3 years ago

I have the htmlunit-2.48.0-SNAPSHOT.jar and all the other jars are from 2.47.0 (htmlunit-core, cssparser-1.7.0, etc). I will double check things.

lrpowell commented 3 years ago

Sorry, it was the snapshot from 2/15. I haven't set things up right yet to get the updates with Maven. I am using the 2.48.0-SNAPSHOT in my pom.xml, but running mvn versions:display-dependency-updates does not indicate there is a new "version" available (presumably because it is the same version number).

I downloaded the latest version of 2.48-0-SNAPSHOT and cleaned up my code so I am just putting the 2nd page text into a file and creating an image input stream out of the contentAsStream to write with ImageIO to a .png file... still white?

        ```
    try (final WebClient webClient = new WebClient(BrowserVersion.FIREFOX)) {
                        java.util.logging.Logger.getLogger("com.gargoylesoftware").setLevel(java.util.logging.Level.SEVERE);

            webClient.getCache().clear();
            webClient.getOptions().setCssEnabled(true);
            webClient.getOptions().setJavaScriptEnabled(true);

            webClient.setAjaxController(new NicelyResynchronizingAjaxController());
            webClient.getOptions().setThrowExceptionOnScriptError(true);

            Page page1 = webClient.getPage(url); // CALLING JAVASCRIPT
            webClient.waitForBackgroundJavaScriptStartingBefore(10_000);

            WebWindow webWin = webClient.getCurrentWindow();
            Page newPage = webWin.getEnclosedPage();

            WebResponse newResponse = newPage.getWebResponse();
            outputToFile("imageFile.txt", newResponse.getContentAsString());

            try (InputStream inpStr = newResponse.getContentAsStream()) {

                ImageInputStream iis = ImageIO.createImageInputStream(inpStr);
                BufferedImage image_buf = ImageIO.read(iis);
                ImageIO.write(image_buf, "png", file2);
            } catch (FileNotFoundException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            } finally {
                if (outStream != null) {
                    try {
                        outStream.close();
                    } catch (IOException e) {
                        // Do Nothing
                    }
                }
            }

            webClient.close();


In my javascript I am setting the "download" attribute as well as the "target" attribute to '_blank':

                    } else { // png default
                        var imgData2 = canvas.toDataURL('image/png');

                        var link2 = document.createElement("a");
                        link2.setAttribute("href", imgData2);

                        link2.setAttribute("download", fName + ".png");
                        console.log("png download "+fName+".jpg");
                        link2.setAttribute("target", '_blank');
                        link2.click();
                    }
                }, fileName);
                img.src = dataImage + svg;



The contentAsString has been the same for a while.  Is there something supposed to have changed with the twelvemonkeys & batik libraries that I can look at the file to determine?

lrpowell commented 3 years ago

I probably missed the window when you were on wetator.org. I went there and it just says, "Waiting for the host..."

rbri commented 3 years ago

I probably missed the window when you were on wetator.org. I went there and it just says, "Waiting for the host..."

I'm from germany - maybe there is only a small time overlap for us :-)

rbri commented 3 years ago

After some more thinking i still have no real idea why you still get the white image. Maybe you can try some things

instead of using the the png from the canvas you can use a hard code data urs (https://de.wikipedia.org/wiki/Data-URL has a sample red dot) and check if the result is than visible.

var imgData2 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA...................'; var link2 = document.createElement("a"); link2.setAttribute("href", imgData2); link2.setAttribute("download", fName + ".png"); link2.setAttribute("target", '_blank'); link2.click();

HtmlUnit / htmlunit

With Javascript - no chart png file from "download" attribute click, or by saving result from WebResponse #305