The right way to download images using selenium - selenium

Question

I have read some articles that mentioned how to get image by selenium. For example:
from selenium import webdriver
import requests
driver=webdriver.Firefox()
driver.get("http/https://your website")
img=driver.find_element_by_xpath("xpath leading to your element")#locating element
src=img.get_attribute('src')#fetch the location of image
img=requests.get(src)#fetch image
with open('image.jpg','wb') as writer:#open for writing in binary mode
writer.write(img.content)#write the image
But does this methods have a risk of more bandwidth cost?
Is there any way just like I right click on the image and save as it to local PC?
I have tried use javascript to do that:
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var img = document.getElementById('someImageId');
context.drawImage(img, 0, 0 );
var theData = context.getImageData(0, 0, img.width, img.height);
and meet cross-origin problem
Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
at <anonymous>:5:23
It's workaround is make another request just like what I do not want in the first line.
Any suggestions?

Answer 1

In order to avoid increasing network footprint you can consider the following approach:
Take the screenshot of the entire page using i.e. get_screenshot_as_png function
Get required element location and size
Extract "interesting" part of the page by cutting anything else but the required element's coordinates
Save the resulting file
Example code which stores the logo from the https://experitest.com/ site to logo.png file:
from selenium import webdriver
from PIL import Image
from io import BytesIO
options = webdriver.ChromeOptions()
options.add_argument("--kiosk")
driver = webdriver.Chrome(chrome_options=options)
driver.get('chrome://settings/')
driver.execute_script('chrome.settingsPrivate.setDefaultZoom(1.0);')
driver.get("https://experitest.com/")
element = driver.find_element_by_xpath("//a[#class='navbar-brand']/img")
location = element.location
size = element.size
png = driver.get_screenshot_as_png()
im = Image.open(BytesIO(png))
left = location['x']
top = location['y']
right = location['x'] + size['width']
bottom = location['y'] + size['height']
im = im.crop((left, top, right, bottom))
im.save('logo.png')
driver.quit()
Assumptions:
You have Pillow library installed (it should be as easy as pip install pillow command)
Your OS DPI scale level is set to 100%