[Question]: Download currnet image with python playwright

[agent666]

Your question

Is it possible to make something like this with Playwright:

import base64
from selenium import webdriver
browser = webdriver.Firefox()
browser.get('https://somesite.com')
img_base64 = browser.execute_script("""
    var ele = arguments[0];
    var cnv = document.createElement('canvas');
    cnv.width = ele.width; cnv.height = ele.height;
    cnv.getContext('2d').drawImage(ele, 0, 0);
    return cnv.toDataURL('image/jpeg').substring(22);    
    """, browser.find_element_by_xpath("//your_xpath"))
with open(r"image.jpg", 'wb') as f:
    f.write(base64.b64decode(img_base64))

I prefer playwright over selenium but can't find a way with Playwright.

[mxschmitt]

You can do it like that:

import base64
from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto('https://playwright.dev')
    image_element = page.locator('.main-wrapper img').nth(0)
    image_b64 = image_element.evaluate("""element => {
      var cnv = document.createElement('canvas');
      cnv.width = element.naturalWidth;
      cnv.height = element.naturalHeight;
      cnv.getContext('2d').drawImage(element, 0, 0, element.naturalWidth, element.naturalHeight);
      return cnv.toDataURL().substring(22)
    }""")
    with open('playwright.png', 'wb') as f:
        f.write(base64.b64decode(image_b64))
        
    browser.close()

or in JS just for reference:

// @ts-check
const playwright = require('playwright');
const fs = require('fs');

(async () => {
   const browser = await playwright.chromium.launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://playwright.dev/');
    const image = page.locator(".main-wrapper img").nth(0);
    const imageData = await image.evaluate(element => {
      var cnv = document.createElement('canvas');
      cnv.width = element.naturalWidth;
      cnv.height = element.naturalHeight;
      cnv.getContext('2d').drawImage(element, 0, 0, element.naturalWidth, element.naturalHeight);
      return cnv.toDataURL().substring(22)
    });
    fs.writeFileSync('image.png', imageData, 'base64');

    await browser.close();
})();

[agent666]

Ahh... Thanks for that. It solved my problem.

[meotimdihia]

@agent666 the draw image's size is larger than the size of the image origin. Could you solve this problem?

[davuses]

If the image you want to save is dynamically generated or a gif, you can also register a response handler and get the image content from response body, example:

def handler(response):
    content = response.body()
    with open(filepath, "wb") as file:
        file.write(content)

page.on("response", hander)

[Azim]

This gives me

Exception in thread "main" com.microsoft.playwright.PlaywrightException: Error {
  message='The operation is insecure.
@debugger eval code line 197 > eval:7:18
evaluate@debugger eval code:204:19
@debugger eval code:1:44

Any ways to work around that?