How to download captcha image with Python Selenium and Requests

Selenium Requests download image

img = driver.find_element_by_xpath("//div[@id='MailRuConfirm']/div/div[18]/form/div[1]/div[2]/div[2]/div[2]/img")
src = img.get_attribute('src')
img = requests.get(src)
with open('captcha.jpg', 'wb') as f:
    f.write(img.content)

This isn't helping in my case. As I am facing a kind of dynamic url.
Everytime I get the element's src and save the content, I get a new image.

This isn't helping in my case. As I am facing a kind of dynamic url.
Everytime I get the element's src and save the content, I get a new image.

Well, perhaps you can use selenium to save the screen, and then crop the image.

Below code will give you exact same image open in browser

`

Hit the url

    driver.get(link)

Paste captcha full xpath here

    ele_captcha = driver.find_element_by_xpath("/html/body/form/div[2]/div[3]/span/div[1]/div/span[3]/img")   

get the captcha as a base64 string

    img_captcha_base64 = driver.execute_async_script("""
        var ele = arguments[0], callback = arguments[1];
        ele.addEventListener('load', function fn(){
          ele.removeEventListener('load', fn, false);
          var cnv = document.createElement('canvas');
          cnv.width = this.width; cnv.height = this.height;
          cnv.getContext('2d').drawImage(this, 0, 0);
          callback(cnv.toDataURL('image/jpeg').substring(22));
        }, false);
        ele.dispatchEvent(new Event('load'));
        """, ele_captcha)

save the captcha to a file

    with open(r"captcha.jpg", 'wb') as f:
        f.write(base64.b64decode(img_captcha_base64))
        `

for height and width -->. cnv.width = ele.width; cnv.height = ele.height; check your original captcha image size by downloading to local.Sometime original image size and the image tag size are different in those cases you get cropped or incomplete image

As Shown Below

import base64
img_base64 = driver.execute_script("""
    var ele = arguments[0];
    var cnv = document.createElement('canvas');
    cnv.width = 215; cnv.height = 80;
    cnv.getContext('2d').drawImage(ele, 0, 0);
    return cnv.toDataURL('image/jpeg').substring(22);    
    """, driver.find_element_by_xpath("/html/body/form/div[2]/div[3]/span/div[1]/div/span[3]/img"))   #"/html/body/form/div[2]/div[3]/span[3]/div[1]/img"))
with open(r"image.jpg", 'wb') as f:
    f.write(base64.b64decode(img_base64)) 

Hi Ganesh, thx for sharing your code!
I 've made some tests using your solution and the answer was a numeric response.
8098
My question here is how I use it to obtain the .jpg file.

import base64
ele_captcha = driver.find_element_by_xpath("//*[@id="imgCaptchaSerpro"]")
img_captcha_base64 = driver.execute_async_script("""
var ele = arguments[0], callback = arguments[1];
ele.addEventListener('load', function fn(){
ele.removeEventListener('load', fn, false);
var cnv = document.createElement('canvas');
cnv.width = this.width; cnv.height = this.height;
cnv.getContext('2d').drawImage(this, 0, 0);
callback(cnv.toDataURL('image/jpeg').substring(22));
}, false);
ele.dispatchEvent(new Event('load'));
""", ele_captcha)
with open(r"captcha.jpg", 'wb') as f:
f.write(base64.b64decode(img_captcha_base64))

Hi

Just copy your element full Xpath insted my Xpath

`
import base64

img_base64 = driver.execute_script("""
var ele = arguments[0];
var cnv = document.createElement('canvas');
cnv.width = this.width ; cnv.height = this.height;
cnv.getContext('2d').drawImage(ele, 0, 0);
return cnv.toDataURL('image/jpeg').substring(22);
""", driver.find_element_by_xpath("/html/body/form/div[2]/div[3]/span/div[1]/div/span[3]/img"))

with open(r"image.jpg", 'wb') as f:
f.write(base64.b64decode(img_base64))
`

thats it ! you will get the response image on the destination path
just copy and paste this code then put the full x path of your image ...try it ....and let me know

Ganesh,

I've tried your way and receive 0 as a response.
Your code created an "image.jpg" file but it seems to be broken. At least my image editor wasn't able to successfully open it.
I'm a little puzzled about what to expect from your solution.
Right now I'm working through dinamic captchas by takin screenshots.
Hope to heard from you soon.

CODE BELOW:
import base64

img_base64 = driver.execute_script("""
var ele = arguments[0];
var cnv = document.createElement('canvas');
cnv.width = this.width ; cnv.height = this.height;
cnv.getContext('2d').drawImage(ele, 0, 0);
return cnv.toDataURL('image/jpeg').substring(22);
""", driver.find_element_by_xpath("/html/body/p/table/tbody/tr/td/p/table/tbody/tr/td/form/font[2]/table[2]/tbody/tr/td[3]/font/img"))

with open(r"image.jpg", 'wb') as f:
f.write(base64.b64decode(img_base64))

not sure what might be the issue....but if the image size that you got from code is accurate means not 0 bytes code is working fine...and may be the extension is wrong try using .png or something else. so, download it manually and check the extension. ad it in to code. there must be a way around...

…

On Fri, Feb 14, 2020, 12:44 AM H-Ro7 ***@***.***> wrote: Ganesh, I've tried your way and receive 0 as a response. Your code created an "image.jpg" file but it seems to be broken. At least my image editor wasn't able to successfully open it. I'm a little puzzled about what to expect from your solution. Right now I'm working through dinamic captchas by takin screenshots. Hope to heard from you soon. CODE BELOW: import base64 img_base64 = driver.execute_script(""" var ele = arguments[0]; var cnv = document.createElement('canvas'); cnv.width = this.width ; cnv.height = this.height; cnv.getContext('2d').drawImage(ele, 0, 0); return cnv.toDataURL('image/jpeg').substring(22); """, driver.find_element_by_xpath("/html/body/p/table/tbody/tr/td/p/table/tbody/tr/td/form/font[2]/table[2]/tbody/tr/td[3]/font/img")) with open(r"image.jpg", 'wb') as f: f.write(base64.b64decode(img_base64)) — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://gist.github.com/4c3b8ad8fd34324bd307?email_source=notifications&email_token=AEZTBOXMCQGYXZLZL3TBRWDRCWLYVA5CNFSM4IIZYMN2YY3PNVWWK3TUL52HS4DFVNDWS43UINXW23LFNZ2KUY3PNVWWK3TUL5UWJTQAGB3PY#gistcomment-3176188>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEZTBOS5HLRG5Q6LR3KVJTDRCWLYVANCNFSM4IIZYMNQ> .

I get script execution timeout instead, dunno what the issue is.
selenium.common.exceptions.TimeoutException: Message: script timeout
(Session info: chrome=80.0.3987.163)
The element looks fine and it's equal to the captcha element so the script itself might be the issue.,

I get script execution timeout instead, dunno what the issue is.
selenium.common.exceptions.TimeoutException: Message: script timeout
(Session info: chrome=80.0.3987.163)
The element looks fine and it's equal to the captcha element so the script itself might be the issue.,

+1

Below code will give you exact same image open in browser

`

Hit the url

    driver.get(link)

Paste captcha full xpath here

    ele_captcha = driver.find_element_by_xpath("/html/body/form/div[2]/div[3]/span/div[1]/div/span[3]/img")   

get the captcha as a base64 string

    img_captcha_base64 = driver.execute_async_script("""
        var ele = arguments[0], callback = arguments[1];
        ele.addEventListener('load', function fn(){
          ele.removeEventListener('load', fn, false);
          var cnv = document.createElement('canvas');
          cnv.width = this.width; cnv.height = this.height;
          cnv.getContext('2d').drawImage(this, 0, 0);
          callback(cnv.toDataURL('image/jpeg').substring(22));
        }, false);
        ele.dispatchEvent(new Event('load'));
        """, ele_captcha)

save the captcha to a file

    with open(r"captcha.jpg", 'wb') as f:
        f.write(base64.b64decode(img_captcha_base64))
        `

for height and width -->. cnv.width = ele.width; cnv.height = ele.height; check your original captcha image size by downloading to local.Sometime original image size and the image tag size are different in those cases you get cropped or incomplete image

As Shown Below

import base64
img_base64 = driver.execute_script("""
    var ele = arguments[0];
    var cnv = document.createElement('canvas');
    cnv.width = 215; cnv.height = 80;
    cnv.getContext('2d').drawImage(ele, 0, 0);
    return cnv.toDataURL('image/jpeg').substring(22);    
    """, driver.find_element_by_xpath("/html/body/form/div[2]/div[3]/span/div[1]/div/span[3]/img"))   #"/html/body/form/div[2]/div[3]/span[3]/div[1]/img"))
with open(r"image.jpg", 'wb') as f:
    f.write(base64.b64decode(img_base64)) 

Works just fine.

Works fine! Saved my life there!

I tried this but i get this error. Can you please tell me what can be the issue?

selenium.common.exceptions.JavascriptException: Message: javascript error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.