Question

我正在下载一个网站供离线观看，网站上的图片写在<picture></picture>元素内。

当我使用浏览器或使用网站下载软件下载页面时，不会下载图像。

例如，此图片

<picture>
    <source srcset="thumb1.jpg" media="(min-width: 1200px)">
    <source srcset="thumb2.jpg" media="(min-width: 992px)">
    <source srcset="thumb3.jpg" media="(min-width: 600px)">
    <source srcset="thumb4.jpg" media="(min-width: 320px)">

    <img src="main-image.jpg">
</picture>

浏览器下载了main-image.jpg img，但它没有下载source图片thumb1.jpg，thumb2.jpg等等。这导致所有图片都没有下载页面后显示。

为什么？为什么浏览器不下载source图像？

该网站建立在名为Concrete5的php CMS上，因此html代码生成，我无法更改生成的html。该网站为http://www.exrx.net/concrete

这个问题有解决方案吗？是否有免费/付费的软件来完成这项任务？

我尝试了一款名为HTTrack和Getleft的软件。它们的行为与浏览器的行为方式相同。

Answer 1

这个问题有解决方案吗？是否有免费/付费的软件来完成这项任务？

我不知道一个工具，它也会下载源标签上的文件。

编辑02

使用以下代码段，您将获取所有图片：

$html = file_get_contents('http://www.exrx.net/concrete/');
$doc = new DOMDocument();
libxml_use_internal_errors(true);
$doc->loadHTML($html);
libxml_clear_errors();

$imgs = [];
$pictures = $doc->getElementsByTagName('picture');
foreach ($pictures as $picture) {
    $img = [];
    $img[] = $picture->getElementsByTagName('img')->item(0)->getAttribute('src');
    $sources = $picture->getElementsByTagName('source');
    foreach ($sources as $source) {
        $img[] = $source->getAttribute('srcset');
    }
    $imgs[] = $img;
}

这将产生：

(
    [0] => Array
        (
            [0] => path/to/file/i1-the original-img-tag-image.gif
            [1] => path/to/file/i2.png
            [2] => path/to/file/i3.png
            [3] => path/to/file/i4.png
            [4] => path/to/file/i5.png
        )
    ...
)

然后可以替换这些图像。

的Src：
- libxml_use_internal_errors() on SO
- DOM on php.net

为了离线下载，为什么不下载<picture>源

1 个答案: