Getting image out of HTML5 canvas via toDataURL()?

[David]

I was wondering if anyone tried using Selenium to extract image out of an HTML5 canvas via the canvas element's toDataURL() method, which returns base64 data URI representation of the image?

Basically one can do something like

var dataURLString = document.querySelector('canvas').toDataURL();

in javascript. One could run similar code in Selenium WebDriver's JavascriptExecutor, returning same document object or passing in WebElement for the canvas element and calling it's toDataURL() method. Then one can base64 decode the string into byte array and load that into an image object or dump to file as an image file for further use.

I got all that done. But ran into something interesting. Using a browsers developer/javascript console to run the query, if you then copy & paste out the base64 string to convert & dump as image it works fine most of the time, except in few cases, it was blank image.

But running in Selenium, I only got it to work correctly once, with all other runs producing the blank image.

Granted this may be implementation specific to how our canvas is rendering the image. But I was just curious to know if anyone was doing similar things as I and if they had success or problems.

Makes me wonder how does everyone else tests (with Selenium) HTML5 canvas rendering correctly for whatever image the application is supposed to be showing. Or is that skipped from automation due to complexity?

[Louis Abraham]

Hi,

I had the same issue. My code worked perfectly with PhantomJS and worked =

on a friend's computer with Chromium on Linux, but failed on OS X with =

Chrome, Chromium and Firefox.

The "--disable-gpu" option on Chrome / Chromium solves the issue.

The explanation is (I think) that the canvas buffer is emptied for =

optimization purposes (https://stackoverflow.com/a/12548710/5133167 =

<https://stackoverflow.com/a/12548710/5133167>).

Best,

Louis