Question

我正在尝试制作一个基本的Instagram网络刮刀，既有艺术灵感图片，也只是为了提高我的知识和体验编程。

目前我遇到的问题是Casper / Phantomjs无法从srcset中检测到更高分辨率的图像，我无法找到解决方法。 Instagram的srcset提供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）图像。理想情况下，我想检索（https://instagram.flcy1-1.fna.fbcdn.net/vp/8d20f803e1cb06e394ac91383fd9a462/5B5C9093/t51.2885-15/e35/29740443_908390472665088_4690461645690896384_n.jpg），它是srcset中的1080x1080图像。但我不能。据我所知，没有办法得到那个项目。它是完全隐藏的。

Answer 1

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

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上的单个图片帖子（我试图抓取的网站），所以这不幸没有让我感到害怕。即使您在帖子中加载下一个图像，元标记内的值也不会发生变化。虽然以防万一其他人可以使用它，但我还是放弃了它，但它对我自己的用例并不理想。

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。如果我通过＆＃34; casperjs --engine = slimerjs fileName.js＆＃34;运行js文件，我可以完整地检索srcsets。所以如果我说使用这段代码：

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

在此网址（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 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无法检索最高分辨率的src图像

3 个答案: