Scrape data in <canvas> with Python or JavaScript?

Programming
, , ,
1

I am looking for a way to scrape the data from the chart by either using python or javascript.

I am trying to scrape data from sites like this (stat game of the game I play) where an interactive chart is rendered in a <canvas> element, without visible scrape-able HTML elements. The page appears to use chartjs.

I need help with either a Python or JavaScript solution to scrape the data from the chart. I would prefer to avoid methods that require extra files such as phantomjs, but will consider them if necessary.

2

It is not possible to scrape data directly from a <canvas> element using Python or JavaScript. However, you can use a headless browser like PhantomJS or Selenium to extract the data from the chart. PhantomJS is a lightweight headless browser that can be used to scrape data from web pages that use JavaScript. You can install it using pip install selenium. Once installed, you can use the following Python code to extract the data:

from selenium import webdriver
import time

# create an instance of PhantomJS
driver = webdriver.PhantomJS()

# navigate to the web page
driver.get("https://stats.warbrokers.io/players/i/5d2ead35d142affb05757778")

# wait for the chart to load
time.sleep(5)

# find the canvas element
canvas = driver.find_element_by_tag_name("canvas")

# extract the data from the chart
data = canvas.get_attribute("toDataURL")

# close the browser
driver.quit()

# print the data
print(data)

This will extract a base64-encoded image of the chart. You can then use a library like Pillow to decode the image and extract the data. Alternatively, you can use a tool like js2py to run JavaScript code in Python and extract the data directly from the chart.