使用Selenium截取网页上的图片

前言

同样是为了刷课，没想到工作后依然和大学一样逃脱不了需要刷网课的命运……

正文

直接说干货了，截取图片，需要截取的图片是什么图片大家都懂（说的就是你，验证码），其他图片的话不需要截取，直接拿到地址下载就行，验证码不行，同样的地址再访问一次内容就变了。

我不知道为啥selenium不能直接把特定img元素的图片拿出来，太反人类了。

根据我找到的资料，主要有两种思路，一种是模拟鼠标操作，在验证码上面点击右键，然后选择另存为，把验证码保存到本地之后再来读取…… 我不理解为啥有这种这么思路清奇的操作，右键另存为的一个很大问题就是你根本没法控制图片存在那里，这也导致这个爬虫程序不具备通用性！所以直接pass掉。

另一种是先对整个网页截图，然后再按照验证码img元素的位置和大小，定位并且裁剪出小的验证码图片来，理想情况下是可以的，但是经过我多次测试发现不同浏览器裁剪出来图片有不同偏移和缩放，不知道是哪里出了问题，只能硬编码微调，吐了。尽管方法不完美，但是也勉强够用吧，分享一下代码……

代码

这次是用C#（WinForm）做的，虽然只是代码片段，不过截图+裁剪保存部分还是可以参考一下的。

后面的验证码识别是顺带加上的，用了百度的接口，准确率堪忧。

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, "验证码识别失败，请重试！");

参考资料

• Python +Selenium解决图片验证码登录或注册问题：https://www.mscto.com/python/607377.html
• python网课自动刷课程序-selenium+chromedriver：https://kaiwu.lagou.com/java_architect.html
• selenium之 定位以及切换frame/iframe：https://blog.csdn.net/huilan_same/article/details/52200586
• Python 爬虫利器五之 Selenium 的用法：https://cuiqingcai.com/2599.html

欢迎交流

程序设计实验室专注于互联网热门新技术探索与团队敏捷开发实践，在公众号「程序设计实验室」后台回复 linux、flutter、c#、netcore、android、kotlin、java、python 等可获取相关技术文章和资料，同时有任何问题都可以在公众号后台留言~