Possibility to extract the data from Canvas/Image/Charts

[MohammadhoseinAbdollahi]

Hello, I was just wondering if this tool can extract the data (Only from the DOM) that is rendered by canvas in the page?
Not by Screenshot and sending it to the Agent but just extract the exact data from the page, which may contain the plots that are rendered in the canvas tag

[yetval]

You can't read canvas from the DOM, the pixels live in the GPU. But the data behind the chart is usually grabbable somewhere else.

If the page fetches the data from an API (most do), use Scrapling's capture_xhr to catch the JSON directly. If the data is inline, pull it off the chart library's own object via page_action. Quick way to know which library: open DevTools console and type Chart, Highcharts, or echarts, whichever isn't undefined is the one.

from scrapling.fetchers import DynamicFetcher

captured = {}

def dump(page):
    captured["data"] = page.evaluate("""() => {
        const c = document.querySelector('canvas');
        if (window.Chart?.getChart) return Chart.getChart(c)?.data;
        if (window.Highcharts)      return Highcharts.charts.map(x => x?.options?.series);
        return null;
    }""")

DynamicFetcher.fetch(URL, page_action=dump, network_idle=True)
print(captured["data"])

Heads up: page_action's return value gets dropped, so stash results in an outer dict like above. Also worth checking if the chart is actually SVG (view source for <svg), if so you skip all this and just use page.css(...).