Как очистить изображение с веб-сайта с помощью Flutter? - PullRequest
Новая
       83

Как очистить изображение с веб-сайта с помощью Flutter?

5 голосов
/ 29 мая 2020

Привет, я пытаюсь выполнить простую задачу - получить url-адрес img sr c с веб-сайта, но, похоже, я не могу этого сделать, я пробовал различные пакеты флаттера и теперь вернулся к ванильный флаттер. Это мой код: 

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);
              },

Я просто пытаюсь получить URL-адрес изображения с этого веб-сайта (tiktok.com):

enter image description here

Я просмотрел исходный код, и там написано, что имя класса - 'jsx-581822467', но если я попытаюсь использовать его в коде, он вернется с пустым списком.

enter image description here

Как я могу просто получить URL-адрес этого изображения профиля? А другие элементы с префиксом jsx в качестве имен классов?

1 Ответ

3 голосов
/ 03 июня 2020

Кажется, я понял, в чем ваша проблема. Инспектор веб-браузера отображает HTML на странице профиля TikTok. Однако он генерируется только с помощью JavaScript после загрузки страницы. Если мы загружаем контент через http.get(), мы получаем необработанный HTML до того, как JavaScript сможет вносить какие-либо изменения.

  • Напишите http.get(), перед своим URL-адресом или щелкните правой кнопкой мыши веб-сайт и выберите Просмотреть исходный код страницы . Теперь HTML будет отображаться так же, как и ваше приложение.
  • Найдите avatar-wrapper round. Вы не сможете его найти, потому что тег с изображения профиля здесь еще не существует.
  • К счастью, URL-адрес изображения профиля уже включен в другие места. Найдите <meta property="og:image" content=". Вы найдете только одно обращение, и после попадания сразу начинается URL-адрес изображения профиля.

Поэтому, на мой взгляд, самый простой способ получить URL:

  1. скачать HTML.
  2. удалить весь текст до <meta property="og:image" content=".
  3. все следующие символы до следующего " - это 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: Общий подход

  1. просмотреть страницу источник для просмотра HTML страницы
  2. поиск нужной подстроки.
  3. Выберите предыдущие 10-15 символов и посмотрите, как часто эта строка встречается раньше.
  4. Если это происходит более одного раза, вы должны часто звонить html = html.substring(html.indexOf(needle) + needle.length);, соответственно, часто.
  5. перезагрузите страницу и проверьте, работает ли она по-прежнему.
  6. теперь вы нашли свою игольную нить.
...