convert html to image using python

Question

I am trying to convert my embed tweet html to a picture. modules :

import tweepy as tw
import imgkit

this is how i get embed tweets using tweepy:

def get_embed():
    # ----------------------------------- Twitter API
    consumer_key = "consumer_key"
    consumer_secret = "consumer_secret"
    access_token = "access_token"
    access_token_secret = "access_token_secret"
    # ------------------ Activating Tweepy session
    auth = tw.OAuthHandler(consumer_key, consumer_secret)
    auth.set_access_token(access_token, access_token_secret)
    tw_api = tw.API(auth)
    url = "https://twitter.com/DisneyPlusNL/status/1427605982524461082?s=20"
    result = tw_api.get_oembed(url, theme="dark")
    return result['html']

and this is how I'm trying to convert it to a picture:

def cnv2image(html):
    imgkit.from_string(html, 'imagekit.png')

cnv2image(get_embed())

but the result isn't how it should be.

expected result : https://drive.google.com/file/d/1C3Cny8hpbL4MfKH2sxynBhsDM9WsnNts/view?usp=sharing

result : https://drive.google.com/file/d/1NZZykQ1fuzvf9zRLkCVl6wTcGPCa5cgE/view?usp=sharing

Answer 1

You don't even need tweepy or imgkit to do this, nor do you need someone else's API, just use selenium:

from selenium import webdriver
from selenium.webdriver.firefox.options import Options
import time

url = "https://twitter.com/DisneyPlusNL/status/1427605982524461082?s=20"

# Configure Firefox to work headlessly (no window popping up)
options = Options()
options.headless = True
driver = webdriver.Firefox(options=options)

# To make sure no other visual elements overlap the Tweet.
driver.set_window_position(0, 0)
driver.set_window_size(2000, 2000)

# Fetch the Tweet URL
driver.get(url)

# Just to make sure all elements load first
time.sleep(2)

# Sometimes we need to click onto the tweet first, be we also sometimes don't.
try:
    driver.find_element_by_xpath("/html/body/div/div/div/div[2]/main/div/div/div/div[1]/div/div[2]/div/section/div/div/div[2]/div/div/article/div/div/div/div[2]/div[2]/div[2]/div[1]/div/span").click()
except:
    pass

# Screenshot the Tweet
img = driver.find_element_by_xpath("/html/body/div/div/div/div[2]/main/div/div/div/div[1]/div/div[2]/div/section/div/div/div[1]/div/div/article").screenshot_as_png

# Write the image data to a file
with open("tweet.png", "wb") as file:
    file.write(img)

# Close the headless browser
driver.close()

This code will create an image file called tweet.png that looks like:

You can install selenium via pip install selenium. This code uses Firefox, but you can configure it to use Chrome as well, and you'll get the exact same output. There's plenty of resources online on how to fully configure it.

Answer 2

So, you just want the screenshot of the tweet, Right?

Well, if you don't mind, i suggest you an another API service : https://apiflash.com/

It takes screenshots from any website which i personally use, its really good to use, and it is also for free

You can also mention the CSS of the targeted HTML tag to get only its screenshot

I hope its useful and working for you too...

Edit: It's working, this is the get url to input

https://api.apiflash.com/v1/urltoimage?access_key={api-key=goes-here}&delay=10&element=.css-1dbjc4n&format=png&fresh=true&no_ads=true&no_cookie_banners=true&no_tracking=true&quality=100&response_type=image&url=https%3A%2F%2Ftwitter.com%2FDisneyPlusNL%2Fstatus%2F1427605982524461082%3Fs%3D20

and the output image...

Yeah, it posts the full page as the screenshot, im working only on the selective html tag