Web scraping image inside canvas

Question

I am web scraping a page where with various numbers appears also images of small price charts.

If I click on this images inside the browser I can save that chart as a .png image.

When I look at the source code that element looks like this when inspected:

<div class="performance_2d_sparkline graph ng-isolate-scope ng-scope" x-data-percent-change-day="ticker.pct_chge_1D" x-sparkline="watchlistData.sparklineData[ticker.ticker]">
  <span class="inlinesparkline ng-binding">
    <canvas width="100" height="40" style="display: inline-block; width: 100px; height: 40px; vertical-align: top;">
    </canvas>
  </span>
</div>

Is there any way I can save through web scraping the same images that I can save manually through the browser?

Answer 1

If you are using Selenium for your web scraping, you can get the canvas element and save it to the image file using the following code snippet:

# get the base64 representation of the canvas image (the part substring(21) is for removing the padding "data:image/png;base64")
base64_image = driver.execute_script("return document.querySelector('.inlinesparkline canvas').toDataURL('image/png').substring(21);")

# decode the base64 image
output_image = base64.b64decode(base64_image)

# save to the output image
with open("image.png", 'wb') as f:
   f.write(output_image)