无头浏览器获取数据-图像的URI而不会损失质量

Question

我正在尝试用无头Chrome浏览器在本地保存验证码，不想截图，也不想失去验证码的质量。

我想出的方法是将图像转换为data-URI，然后将其写入文件。

我尝试了下面的代码，它确实起作用了，并为我保存了一个图像。问题是，我得到的验证码没有我刚刚下载或截图的好。

captcha_img_element = browser.find_element_by_xpath("//span[text()='some text']//img")

img_base64 = browser.execute_script("""
    var ele = arguments[0];
    var cnv = document.createElement('canvas');
    cnv.width = ele.width; cnv.height = ele.height;
    cnv.getContext('2d').drawImage(ele, 0, 0);
    return cnv.toDataURL('image/jpeg').substring(22);    
    """, captcha_img_element)

with open("captcha_js.png", 'wb') as f:
    f.write(base64.b64decode(img_base64))

高质量的：

​

​

我通过js代码得到的一个：

​

​

它们看起来是一样的，但当你放大它们时，像素是不同的。

那么，我如何才能获得第一个的data-URI (高质量)，或者是否有其他方法可以不使用data-URI (在无头浏览器模式下)？

Answer 1

使用ele.intrinsicWidth和ele.intrinsicHeight。这给出了图像的实际宽度和高度，而不是DOM元素的宽度/高度。