通过脚本下载具有特定 div 的图像答案

【问题标题】：Download Image with specific Div via Script通过脚本下载具有特定 div 的图像
【发布时间】：2016-08-04 05:11:14
【问题描述】：

我有一系列 URL，我需要为每个 URL 下载一张图片。

在每个页面的标记中都有以下内容

<div class="subcolumns product-hero">
        <div class="c60l">
                <img src="Cubes.png" width="300"/> 
        </div>
</div>

理想情况下，我需要下载带有product-hero类的div中的图像，或者保存图像src标签。

这可以通过某种自动化脚本实现吗？节点/Perl 等？

【问题讨论】：

标签： node.js bash perl scripting automation

【解决方案1】：

我会考虑使用Phantom.js，它允许您以纯 JavaScript 加载和查询网页（无需浏览器）。

查看Phantom's DOM Manipulation 了解如何访问该文档，然后您可以使用vanilla javascript dom 查询（例如getElementsByClassName 和getElementsByTagName）来访问您需要的图像。所以你的脚本可能看起来像这样：

var page = require('webpage').create();
console.log('The default user agent is ' + page.settings.userAgent);
page.settings.userAgent = 'SpecialAgent';
page.open('http://www.httpuseragent.org', function (status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        page.evaluate(function () {
            var productHeros = document.getElementsByClassName('product-hero');
            for (var i = 0; i < productHeros.length; i++) {
                var productHeroDiv = productHeros[i];
                var image = productHeroDiv.getElementsByTagName("img")[0];
                var source = image.src;
            }
        });
        console.log(ua);
    }
    phantom.exit();
});

【讨论】：

【解决方案2】：

给定 URL 列表作为参数列表：

#!/bin/bash
for url in "$@"; do
    img_src=$( curl -s "$url" | \
        xmllint 2>/dev/null --recover --html --xpath \
        'string(//div[contains(@class, 'product-hero')]/img/@src)' - )
    curl -O "$(dirname "$url")/$img_src"
done

【讨论】：