在后台从 URL 下载三张第一张图片

Question

我实际上是在尝试在 js 脚本中找到一种从特定 URL 下载前三个图像的方法。

我找到了将 img 文件作为新文件名下载的这种方式，但此脚本不会将 imgs 下载限制为三个： download-data-url-file.

为什么只有三个来自 URL 的图像？ 因为我想稍后设置一种计时器来重复下载任务。

网址是内容提要 (http://feed.500px.com/500px-best)

基本上，如果我们在 Firefox 的 Inspector 工具中输入 img 源 URL，我们可以看到给定图像的 URL 源，例如：

<img xmlns="http://www.w3.org/1999/xhtml" src="https://drscdn.500px.org/photo/266885357/m%3D900/v2?webp=true&amp;sig=b5a6df5651c4248defdeee0f5b4d1ec599d87d5fa69e7673b5d64cef5a4deeb7" />

因此，js 脚本将从网站上获取第一张图片，并将 .png 图像下载为 newfilename.png（只是一个文件名示例），重复该步骤获取第二张和第三张图片，然后停止运行。

我为我的任务修改了一个简短的 js，我认为我可以通过添加 var totalImages = 3 来限制总 img 下载量来改进它。..

var data = canvas.toDataURL("http://feed.500px.com/500px-best/jpeg");
var img = document.createElement('img');
img.src = data;

var a = document.createElement('a');
a.setAttribute("download", "Image1.jpeg");
a.setAttribute("href", data);
a.appendChild(img);

提前致谢。

Answer 1

// This code is very specific to 500PX
// I had to use itemcontent selector, as the feed was giving small icons
// as first three images.

var parents = document.getElementsByClassName("itemcontent");
var totalImages = 3;
var done = false;
var result = [];

for(var i = 0; i < parents.length && !done; i++) {
  var images = parents[0].getElementsByTagName("img");

  for(var j = 0; j < images.length && !done; j++) {     
    result.push(images[j].src);
    if(result.length == totalImages)
        done = true;    
  }
}

// The result array contains the first three images of the page.