以编程方式下载网页上的动态图像答案

【问题标题】：Download dynamic image on webpage programmatically以编程方式下载网页上的动态图像
【发布时间】：2018-07-05 10:07:37
【问题描述】：

我正在尝试下载每次加载都会更改的图像。 img 标签上的 src 属性是不变的，尽管显示的图像会发生变化（我猜网络应用会在每次点击时更改 src 处的图像）。

我确实尝试使用src 下载，但返回的图像与预期的不同。

我的要求是目前下载页面上显示的图像。我也尝试右键单击保存，但在页面中禁用了右键单击。有任何想法吗？我正在使用 selenium webdriver。也欢迎使用其他选项。

这是我尝试使用src 属性：

public static void download() {
    WebDriver driver = new ChromeDriver();
    driver.navigate().to("https://*******.com/");

    String url = driver.findElement(By.id("regImg")).getAttribute("src");

    // run of the mill code to download the image.
    downloadImage(url);
}

正如我所说，这段代码有效，但我得到了不同的图像，因为网络应用程序在每次点击时都会更改它。我需要页面上显示的那个。

这是 HTML：

<td width="20%" align="center" class="style1">characters
    <font color="#FF0000">*</font>
    <img id="regImg" src="../../**/**.php" alt="captcha image" height="25">
</td>

【问题讨论】：

添加相关的 HTML，或者你目前拥有的链接和代码
请添加相关的HTML
您正在查看 HTML 的不同部分，然后尝试共享网站或 HTML
@Kushal 我已经验证 src 属性不会通过手动重新加载和检查元素几次而改变。我无法透露该网站。
那么如果你手动从中提取“src”一个属性，那么它和你想要的一样吗？

标签： java selenium selenium-webdriver

【解决方案1】：

如果您没有重新生成相同图像的选项，例如通过在测试中附加请求参数，您可以截屏

File sreenshotFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);

并从屏幕截图中提取图像，如果您知道要查找的内容，这应该很容易。

或者根据this answer，您可以将 Selenium 驱动程序配置为使用已知目录来存储浏览器数据：

ChromeOptions chromeProfile = new ChromeOptions();
chromeProfile.addArguments("user-data-dir=" + chromeProfilePath);
driver = new ChromeDriver(options);

也许随机图像将保存在磁盘上chromeProfilePath 下的某个位置。 It's possible but the process is complex.

【讨论】：

【解决方案2】：

这取决于您的图像是从与 HTML 相同的 URL 还是从另一个 URL 加载的。

你可以尝试通过JS将所有图片转换为数据对象：

driver.execute_script(
    'var c=document.createElement("canvas");'+
    'document.querySelectorAll("img").forEach(function(img){'+
       'c.width=img.naturalWidth;'+
       'c.height=img.naturalHeight;'+
       'c.getContext("2d").drawImage(img,0,0);img.src=c.toDataURL();'+
     '});'
);

然后使用您的 downloadImage 捕获它。

但是，如果您的图像托管在其他主机上 - 您将遇到 CORS 问题。这些问题可以通过添加 CORS 标头来解决

Access-Control-Allow-Origin "*"

使用 Charly 代理，如下所示：Add header to requests with Charles

【讨论】：