Selenium Scraping in Practice: Capturing Images from a Web Page

Preface

This was also for grinding courses. I never thought that even after starting work I'd still be unable to escape the same fate as in college of having to grind through online courses...

Main Text

I'll get straight to the useful stuff: capturing images. Everyone knows what kind of image needs to be captured (yes, I'm talking about you, captcha). Other images don't need capturing—just get the URL and download them. Captchas don't work that way; visiting the same URL again changes the content.

I don't know why Selenium can't just pull the image out of a specific img element; it's so user-hostile.

Based on the materials I found, there are mainly two approaches. One is to simulate mouse operations: right-click on the captcha, then choose Save As, save the captcha locally, and then read it... I don't understand why anyone would come up with such a bizarre approach. A big problem with right-click Save As is that you have no control over where the image is saved, which also means this crawler isn't reusable! So I'll pass on that.

The other approach is to first take a screenshot of the entire page, then based on the position and size of the captcha img element, locate and crop out the small captcha image. Ideally this would work, but after many tests I found that different browsers produce cropped images with different offsets and scaling. I don't know where things went wrong, so I can only hard-code fine-tuning—makes me want to throw up. Even though the method isn't perfect, it's barely good enough. Here's the code...

Code

This time I did it in C# (WinForms). Although it's only a code snippet, the screenshot + crop-and-save part is still worth a look.

The captcha recognition later on was added along the way, using Baidu's API; the accuracy is worrying.

setStatusMsg1("正在提取验证码");
var verifyCode = currentBrowser.WebDriver.FindElement(By.XPath("/html/body/spk-root/spk-login-page/div/section/div[3]/div[2]/div[2]/form/div[3]/div[2]/img"));
setStatusMsg2("浏览器截屏");
// 设置浏览器大小
currentBrowser.WebDriver.Manage().Window.Size = new Size(1280, 800);
// 浏览器截屏
var screenshot = ((ITakesScreenshot)currentBrowser.WebDriver).GetScreenshot();
var screenImagePath = Path.Combine(Path.GetTempPath(), $"{System.Guid.NewGuid().ToString("N")}.jpg");
// 保存截屏图片
setStatusMsg2("保存截屏");
screenshot.SaveAsFile(screenImagePath, ScreenshotImageFormat.Jpeg);

// 裁剪验证码
setStatusMsg2("裁剪验证码");
var codeImagePath = screenImagePath.Replace(".jpg", "_code.jpg");

int x, y, width, height;

// 使用js来获取图片的位置等信息
switch (currentBrowser.BrowserType) {
    case BrowserEnum.Chrome:
        x = Convert.ToInt32((long)((IJavaScriptExecutor)currentBrowser.WebDriver).ExecuteScript("return document.querySelector('body > spk-root > spk-login-page > div > section > div.login-body.clearfix > div.login-right > div.form-con > form > div.qr-code > div.qrcode-box.clearfix > img').x"));
        y = Convert.ToInt32((long)((IJavaScriptExecutor)currentBrowser.WebDriver).ExecuteScript("return document.querySelector('body > spk-root > spk-login-page > div > section > div.login-body.clearfix > div.login-right > div.form-con > form > div.qr-code > div.qrcode-box.clearfix > img').y"));
        width = verifyCode.Size.Width;
        height = verifyCode.Size.Height;
        // 验证码位置调整
        //x += 20;
        //y += 8;
        // 验证码大小调整
        width += 30;
        height += 15;
        break;
    default:
        x = verifyCode.Location.X;
        y = verifyCode.Location.Y;
        width = verifyCode.Size.Width;
        height = verifyCode.Size.Height;
        break;
}

var codeBitmap = new Bitmap(width, height);
var codeGraphics = Graphics.FromImage(codeBitmap);

var destRec = new Rectangle(0, 0, width, height);
var srcRec = new Rectangle(x, y, width, height);
setStatusMsg2(srcRec.ToString());
codeGraphics.DrawImage(new Bitmap(screenImagePath), destRec, srcRec, GraphicsUnit.Pixel);
// 保存验证码图片
codeBitmap.Save(codeImagePath, ImageFormat.Jpeg);

// 显示图片
picVerifyCode.Load(codeImagePath);
picVerifyCode.Tag = codeImagePath;

// 验证码识别
var result = BaiduAiSdk.VerifyCode(codeImagePath);
if (result.Length > 0) {
    txtVerifyCode.Text = result;
    FrmTips.ShowTipsSuccess(this, $"验证码识别成功，识别结果：{result}");

    var input = currentBrowser.WebDriver.FindElement(By.XPath("/html/body/spk-root/spk-login-page/div/section/div[3]/div[2]/div[2]/form/div[3]/div[2]/input"));
    input.Clear();
    input.SendKeys(result);
} else
    FrmTips.ShowTipsError(this, "验证码识别失败，请重试！");

References

• Solving image captcha login or registration with Python + Selenium: https://www.mscto.com/python/607377.html
• Python automatic online-course grinding program—selenium+chromedriver: https://kaiwu.lagou.com/java_architect.html
• Selenium locating and switching frame/iframe: https://blog.csdn.net/huilan_same/article/details/52200586
• Python crawler power tools part 5: Using Selenium: https://cuiqingcai.com/2599.html

Discussion Welcome

Programming Lab focuses on exploring popular new internet technologies and practicing team agile development. Reply with linux, flutter, c#, netcore, android, kotlin, java, python, and so on in the backend of the WeChat official account "Programming Lab" to get related technical articles and materials. If you have any questions, you can also leave a message in the official account backend~

• Cnblogs: https://www.cnblogs.com/deali/
• Coding livestream: https://live.bilibili.com/11883038
• Zhihu: https://www.zhihu.com/people/dealiaxy