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

Can you had the html response from the API. It looks like you are missing the css. You have also an extra quote in tw_api.get_oembed. — louisld
– louisld, Commented Aug 18, 2021 at 14:38
ombed doesn't create any css and its only html. when i save the html into .html file and open it in my browser it looks fine after a few secound. about tthe quoter: thank you ill edit it — HadiH2o
– HadiH2o, Commented Aug 18, 2021 at 15:04

Ghost Ops · Accepted Answer · 2021-08-18 15:18:07Z

1

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

edited Aug 18, 2021 at 15:18

answered Aug 18, 2021 at 14:49

Ghost Ops

1,7322 gold badges15 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

HadiH2o Over a year ago

apiflash takes full screen screenshot and and i want only screenshot of one tweet. and cropping the picture is not a good way to do that. because size of tweets are different.

Ghost Ops Over a year ago

I already mentioned in the answer, you can also give the css selector (like classname, id) to select the particular element to take screenshot of it

HadiH2o Over a year ago

oembed does not return any css

HadiH2o Over a year ago

i guess the problem is that imgkit need to wait for the html to fully load and then take a screenshot. how can i do that?

HadiH2o Over a year ago

like i said im not trying to take a full screen shot of the link. im trying to capture only one tweet as a picture and no more

|

pigeonburger · Accepted Answer · 2021-08-23 00:39:56Z

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.

edited Aug 23, 2021 at 0:39

answered Aug 19, 2021 at 6:53

pigeonburger

7367 silver badges25 bronze badges

2 Comments

HadiH2o Over a year ago

in fact i am trying to run my code on a cloud linux host and i dont think that i can open any browser on it.

pigeonburger Over a year ago

The browser is being run headlessly in my code. You most definitely can run it on a headless linux server because that's what I used to produce this image. Why don't you just try it?

Collectives™ on Stack Overflow

convert html to image using python

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related