【初心者向け】Tinderの画像を、JupyterNoteに表示させるには？　 How to get background-url in Python?

Tinderの画像をどうやってとってくればいいねん？？

勉強がてらTinderをいろいろいじくっているのですが、スクレイピングを勉強中でまずつまずいたのがこれ！

Tinderの画像をどうやってとってくればいいねん？

まず画像を取ってくるためには、画像の情報がどう書かれているかとってこなければいけません。

このために、まず画像の部分にマウスを合わせ、右クリック！（←Chromeです）

そして検証を選んでください（もしかすると2回選ばないといけないかも？）

すると、

<div class="Bdrs(8px) Bgz(cv) Bgp(c) StretchedBox StretchedBox::a Cnt($blank)::a" style="background-image: url(&quot;https://images-ssl.gotinder.com/XXXXXXX&quot;); background-position: 50% 50%; background-size: auto 100%;"></div>

のような情報が青く囲まれて出てきます。

このうち

https://images-ssl.gotinder.com/XXXXXXX

をとってくることになります！

この部分、CSSのスタイルシートの背景画像として埋め込んであるみたいなんですが、pythonでブラウザがいじれseleniumでいろいろ試したのですが、いまいちうまくいかなかったです（もしどなたかご存知であれば教えてください）

そこで、いかに出てくる記述を利用して、

Extracting url from style: background-url: with beautifulsoup and without regex?

HTMLをいじれるBeautifulsoup、cssutilを利用して、画像のURLの部分をきりだすことにしました。

実際はこうなります。

HTMLを読み込んで、そのなかから、画像の含まれるクラスの部分をとってきて、style部分の情報を取り込み、そこからURL情報を切り出します。

html=(chro.page_source)
soup = BeautifulSoup(html)
div_style = soup.find('div', { "class":"Bdrs(8px) Bgz(cv) Bgp(c) StretchedBox StretchedBox::a Cnt($blank)::a"} )['style']
style = cssutils.parseStyle(div_style)
url = style['background-image']
url = url.replace('url(', '').replace(')', '') 

では実装して、Jupyterに出してみましょう！

インポート部分

import os
import re
import random
import matplotlib.pyplot as plt
import cv2
import numpy as np
import urllib.request
from urllib.parse import quote
import time
import random
import sys
import pandas as pd
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions
from selenium.webdriver.common.by import By
import cssutils
from bs4 import BeautifulSoup

関数部分

def get_image(img_url): # ウェブ上の画像をダウンロードする
    opener = urllib.request.build_opener()
    http = httplib2.Http(".cache")
    response, content = http.request(img_url)            
    return content

def face(img):
    # web上の画像をlocalに保存する
    # Tinder APIで取得した画像URLは、サーバ上にあるのでOpenCVで解析できない
    local_image_path = "test.jpg"
    #request_img = urllib.request.urlretrieve(img, local_image_path)
    img_buf = np.fromstring(get_image(img), dtype='uint8')
    img2 = cv2.imdecode(img_buf, 1)
    aidemy_imshow("test.jpg",img2)

メイン部分

def get_image(img_url): # ウェブ上の画像をダウンロードする
    opener = urllib.request.build_opener()
    http = httplib2.Http(".cache")
    response, content = http.request(img_url)            
    return content

def face(img):
    # web上の画像をlocalに保存する
    # Tinder APIで取得した画像URLは、サーバ上にあるのでOpenCVで解析できない
    local_image_path = "test.jpg"
    #request_img = urllib.request.urlretrieve(img, local_image_path)
    img_buf = np.fromstring(get_image(img), dtype='uint8')
    img2 = cv2.imdecode(img_buf, 1)
    aidemy_imshow("test.jpg",img2)

メイン部分、まずはseleniumでブラウザ読み込み！

chro = webdriver.Chrome('/Users/USERNAME/Desktop/chromedriver_win32/chromedriver')

#Go to Tinder.com
chro.get("https://tinder.com/app/login")

メイン画面がでたら、

html=(chro.page_source)
soup = BeautifulSoup(html)
div_style = soup.find('div', { "class":"Bdrs(8px) Bgz(cv) Bgp(c) StretchedBox StretchedBox::a Cnt($blank)::a"} )['style']
style = cssutils.parseStyle(div_style)
url = style['background-image']
url = url.replace('url(', '').replace(')', '') 
face(url)

でうまく画像がjupyterに表示されるはずです！