无头浏览器在不损失质量的情况下获取图像的 data-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 元素的宽度/高度。