android - 如何使用 Flutter 从网站上抓取图像？

Question

嗨，我正在尝试做一个从网站获取 img src url 的简单任务，但我似乎做不到，我尝试了各种 flutter 包，现在我已经恢复到原版 flutter 。这是我的代码:

onPressed: () async {
                http.Response response = await http.get('https://tiktok.com/@$enteredUsername');
                dom.Document document = parser.parse(response.body);
                final elements = document.getElementsByClassName('jsx-581822467');
                print(elements);
              },

我只是想从这个网站(tiktok.com)获取图像 URL:



我查看了源代码，它说类名是“jsx-581822467”，但是如果我尝试在代码中使用它，它会返回一个空白列表。



我怎样才能简单地获取此个人资料图片的 URL？其他以 'jsx' 前缀作为类名的元素呢？

Answer 1

我想我知道你的问题是什么。 Web 浏览器的检查器在 TikTok 个人资料页面上显示 HTML。但是，这仅在页面加载后使用 JavaScript 生成。如果我们通过 http.get() 下载内容，我们在 JavaScript 可以进行任何更改之前获取原始 HTML。

写http.get(),在您的 URL 前面或右键单击网站并单击 查看页面来源 .现在 HTML 将以与您的应用程序获取它相同的方式显示。

搜索 avatar-wrapper round .您将无法找到它，因为个人资料图片中的标签在此处尚不存在。

幸运的是，头像的 URL 已经包含在其他地方。搜索 <meta property="og:image" content=" .你会发现只有一次点击，点击后头像的 URL 直接开始。

因此，在我看来，获取 URL 的最简单方法是:

下载 HTML。

删除直到 <meta property="og:image" content=" 的所有文本.

直到下一个 " 的所有后续字符是我们要查找的 URL。

在这里，我插入了我的代码，对我来说效果很好:

Future<String> getProfileImageUrl(String username) async {
  // Download the content of the site
  http.Response response = await http.get("https://www.tiktok.com/@$username");
  String html = response.body;

  // The html contains the following string exactly one time.
  // After this specific string the url of the profile picture starts. 
  String needle = '<meta property="og:image" content="';
  int index = html.indexOf(needle);

  // The result of indexOf() equals -1 if the needle didn't occurred in the html.
  // In that case the received username may be invalid.
  if (index == -1)
    return null;

  // Remove all characters up to the start of the text snippet that we want.
  html = html.substring(html.indexOf(needle) + needle.length);

  // return all chars until the first occurrence of '"'
  return html.substring(0, html.indexOf('"'));
}

我希望我的解释能帮助你。

编辑 1: 一般方法

查看页面源代码查看页面的 HTML

搜索所需的子字符串。

选择前面的 10 到 15 个字符，看看这个字符串之前出现的频率。

如果出现不止一次，您必须调用 html = html.substring(html.indexOf(needle) + needle.length);因此经常反复。

重新加载页面并检查它是否仍然有效。

现在你已经找到了你的针线。