Casper/Phantomjs 无法检索到最高分辨率的源图像

Question

我正在尝试制作一个基本的 Instagram 网络抓取工具，既有艺术灵感图片，也只是一般地尝试提高我的知识和经验编程。

目前我遇到的问题是 Casper/Phantomjs 无法从 srcset 中检测到更高分辨率的图像，我想不出解决这个问题的方法。 Instagram 的 srcsets 提供 640x640、750x750 和 1080x1080 图像。我显然想找回 1080，但到目前为止我尝试过的任何方法似乎都无法检测到它。将视口设置得更大没有任何作用，而且我无法通过获取 HTML 并将其拆分到我需要的位置来检索整个源集。据我所知，除了从这个 srcset 中获取图像之外，没有其他方法可以检索所述图像。

编辑

当我被要求提供更多细节时，我开始了。这是我用来从页面获取属性的代码：

function getImages() {
var scripts = document.querySelectorAll('._2di5p');
return Array.prototype.map.call(scripts, function (e) {
    return e.getAttribute('src');
});
}

那我做标准的：

casper.waitForSelector('div._4rbun', function() {
  this.echo('...found selector ...try getting image srcs now...');
    imagesArray = this.evaluate(getImages);
    imagesArray.forEach(function (item) {
    console.log(item);

但是，返回的只是srcset 的最低分辨率。使用这个 url，例如，(https://www.instagram.com/p/BhWS4csAIPS/?taken-by=kasabianofficial) 返回的全部是 https://instagram.flcy1-1.fna.fbcdn.net/vp/b282bb23f82318697f0b9b85279ab32e/5B5CE6F2/t51.2885-15/s640x640/sh0.08/e35/29740443_908390472665088_4690461645690896384_n.jpg，这是 srcset 中分辨率最低的 (640x640) 图像。理想情况下，我想检索 srcset 中的 1080x1080 图像 https://instagram.flcy1-1.fna.fbcdn.net/vp/8d20f803e1cb06e394ac91383fd9a462/5B5C9093/t51.2885-15/e35/29740443_908390472665088_4690461645690896384_n.jpg。但我不能。据我所知，没有办法得到那件物品。它是完全隐藏的。

Answer 1

我在 Instagram 的案例中找到了解决方法。 Instagram 将源图片放在头部的元标记中。因此，使用我将在下面粘贴的代码，您可以调用所有元标记，然后通过检查是否检索到 "og:image" 来确定哪一张是源图片。

function getImages() {
    var scripts = document.querySelectorAll('meta[content]');
    return Array.prototype.map.call(scripts, function (e) {
        return e.getAttribute('property') + " " + e.getAttribute('content');
    });
}

这是将元标记分类为仅具有原始分辨率的原始图像的方法。

this.echo('...found selector ...try getting image srcs now...');
imagesArray = this.evaluate(getImages);
imagesArray.forEach(function (item) {
    if (typeof item == "string" && item.indexOf('og:image') > -1) {

编辑：不幸的是，这仅适用于 Instagram（我正在尝试抓取的网站）上的单个图像 posts，所以不幸的是，这对我没有好处。即使您在 post 中加载下一张图片，元标记中的值也不会改变。我将其保留下来以防万一其他人可以使用它，但它对我自己的用例来说并不理想。

Answer 2

是的，PhantomJS 似乎确实不支持 srcset，它的 Webkit 引擎很旧。

但公平地说，与页面相关的所有元数据都在 HTML 中作为 window._sharedData 变量中的 JSON 公开。

如果你想使用无头浏览器（而不是用任何服务器端语言解析它），你可以这样做：

var imgUrl = page.evaluate(function(){
    return window._sharedData.entry_data.PostPage[0].graphql.shortcode_media.display_resources[2].src;
});

https://instagram.fhen2-1.fna.fbcdn.net/vp/8d20f803e1cb06e394ac91383fd9a462/5B5C9093/t51.2885-15/e35/29740443_908390472665088_4690461645690896384_n.jpg

Answer 3

解决方案：所以我的解决方案是使用 slimerjs。如果我通过 "casperjs --engine=slimerjs fileName.js" 运行 js 文件，我可以检索完整的 srcsets。所以如果我说使用这个代码：

function getImgSrc() {
  var scripts = document.querySelectorAll("._2di5p");
  return Array.prototype.map.call(scripts, function (e) {
      return e.getAttribute("srcset");
  });
}

在此url (https://www.instagram.com/p/BhWS4csAIPS/?taken-by=kasabianofficial) I will get (https://instagram.flcy1-1.fna.fbcdn.net/vp/b282bb23f82318697f0b9b85279ab32e/5B5CE6F2/t51.2885-15/s640x640/sh0.08/e35/29740443_908390472665088_4690461645690896384_n.jpg 640w,https://instagram.flcy1-1.fna.fbcdn.net/vp/b4eebf94247af02c63d20320f6535ab4/5B6258DF/t51.2885-15/s750x750/sh0.08/e35/29740443_908390472665088_4690461645690896384_n.jpg 750w,https://instagram.flcy1-1.fna.fbcdn.net/vp/8d20f803e1cb06e394ac91383fd9a462/5B5C9093/t51.2885-15/e35/29740443_908390472665088_4690461645690896384_n.jpg 1080w) 作为结果。

这就是我想要的，因为这意味着我可以抓取那些 1080 图片。很抱歉这个乱七八糟的页面，但我想把我的步骤留给任何可能像我一样尝试的人。

Casper/Phantomjs 无法检索到最高分辨率的源图像

Casper/Phantomjs unable to retrieve highest resolution src image

javascript

phantomjs

casperjs

编辑