Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

Question

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

Currently, my main goal is to extract and save a single image from a website post logging in. After examining the image, I discovered that it has a full xpath of

/html/body/form/main/div/section/div[1]/div/div[2]/div/img

. My plan is to utilize beautiful soup or an image crawler to save the image into a variable and then use tesseract to extract text from the image. So far, I've encountered difficulties with urllib, urllib.requests, and selenium's method of reading images by xpath. I initially attempted to use selenium to save the image but yielded no successful outcomes. At this point, I am seeking assistance with the coding aspect to determine if it's feasible to store the image in a variable and whether tesseract can access the image through that variable. Both the image samples and their inspection images are provided below (the highlighted image showcases the inspected text). Please note that the form displayed is only a representation and does not actually exist in reality - at least to my knowledge. Any guidance on this matter would be greatly appreciated. Thank you.

Image 1:

https://i.stack.imgur.com/kpJ55.png

Image 2:

https://i.stack.imgur.com/DEygr.png

html css selenium-webdriver beautifulsoup tesseract

Answer 1

Answer №1

To save the image, you can utilize urllib.

import urllib
from selenium import webdriver

driver = webdriver.Chrome()
driver.get(WEBSITE_URL)

# locate and retrieve the image  
img = driver.find_element_by_xpath('/html/body/form/main/div/section/div[1]/div/div[2]/div/img')
src = img.get_attribute('src')

# download the image
urllib.request.urlretrieve(src, "img.png")

This method will store the image in a file named img.png within your current working directory. Subsequently, you may employ image processing and tesseract to extract text from it. It is advisable not to solely rely on static XPATH for image detection, as changes made by the website's owner could disrupt this process. Instead, consider using:

img = driver.find_element_by_id("ContentPlaceHolder1_Imgquestions")

,

This way, even if there are modifications to the website layout, you'll still be able to locate the image based on its unique id.

Answer 2

To save the image, you can utilize urllib.

import urllib
from selenium import webdriver

driver = webdriver.Chrome()
driver.get(WEBSITE_URL)

# locate and retrieve the image  
img = driver.find_element_by_xpath('/html/body/form/main/div/section/div[1]/div/div[2]/div/img')
src = img.get_attribute('src')

# download the image
urllib.request.urlretrieve(src, "img.png")

This method will store the image in a file named img.png within your current working directory. Subsequently, you may employ image processing and tesseract to extract text from it. It is advisable not to solely rely on static XPATH for image detection, as changes made by the website's owner could disrupt this process. Instead, consider using:

img = driver.find_element_by_id("ContentPlaceHolder1_Imgquestions")

,

This way, even if there are modifications to the website layout, you'll still be able to locate the image based on its unique id.

Is there a way to extract and store an image from a webpage using selenium, beautifulsoup, and Python 3?

Answer №1

Similar questions

Incorporating <span> elements into a comma-separated list using Jquery on every other item

Unable to attach the event listener for the 'onchange' event to a div nested within a ul element

Events related to key press timing in HTML 5 canvas

Steps to designing an Arrow with styled-components

The placement of the content in the Grid system seems to be off-kilter, not aligning properly with Bootstrap standards

locate the following div using an accordion view

personalized styles based on user preferences

Upon extracting the Glassdoor reviews, only the initial page is retrieved

The art of sketching precise lines encircling a circular shape through the

Modify the color of the Swing link label for disabled state

When mousing over a subitem of the Image menu, ensure that the Image menu

Experience a glint in the React Suspense with React Router - Struggling with CSS properties post utilizing Suspense and Lazy

Limiting the style of an input element

Checking the functionality of SSRS Reporting Services reports with the help of Selenium Webdriver

How can I disable the download prompt bar in IE9 when using Selenium?

Creating an attention-grabbing alert bar positioned above the menu

AngularJs is being used to extract data from Firebase with the help of $value, $id, and

Tips for personalizing Bootstrap columns using identical class names?

Repeated information in HTML tables

Github not recognizing CSS styles