Create a program that can generate your favorite images with Selenium

Introduction

Recently, as a personal hobby, I created a program to draw and tweet the seismic intensity distribution map of an earthquake, and I used it to generate images. I think I'll write it as a memorandum because I think it can be used with other things.

principle

Python's framework called ** Selenium ** is used for testing web applications, but it is also used for scraping dynamic sites. Rendering is done with Chrome that runs on CUI called Headless Prouser of Google Chrome.

Since Selenium has a screenshot function, you can create your favorite image with HTML / CSS by setting up a local server and getting the necessary information there.

Things necessary

For the time being, Selenium seems to be in Ruby and JS as well. A framework for capturing web pages. The installation method with pip is as follows

pip install selenium

It is not necessary if Chrome is already installed in Windows or Mac, but when executing on VPN etc., it is executed by putting Chrome in Docker.

--Local server

Node.js, Deno, etc. are also OK. This time we will use Flsak, a Python framework.

create

The source code created this time can be found at here.

Create a web server

This time, create it with Flask and put it together as a container with Docker compose. Therefore, I would like to manage Python modules with pipenv.

Enter the following to install Pipenv and install Flask.

pip install pipenv
pipenv --python 3.8
pipenv install flask

In addition, add files that are not available and do as follows. The directory structure is as follows.

server
   ├── Dockerfile
   ├── Pipfile
   ├── Pipfile.lock
   ├── run.py
   ├── static
   │  └── css
   │     └── style.css
   └── templates
      └── index.html

Create run.py, ʻindex.html, and style.css` as you like. This time, I will just display the character string GET with the URL parameter on the screen.

The Dockerfile is described as follows. The output port is 5000, but I think it's okay.

Dockerfile


FROM python:3.8

COPY run.py /run.py
COPY templates /templates
COPY static /static
COPY Pipfile /Pipfile
COPY Pipfile.lock /Pipfile.lock

RUN pip install pipenv
RUN pipenv install --system --deploy

EXPOSE 5000

Try pipenv shell && python run.py, and if it can be displayed normally on a browser etc., it's OK.

Make a capture part

Create a program file for generation at the top of the server directory created earlier. The directory should look like this.

.
├── docker-compose.yml
├── Dockerfile
├── images
├── main.py
├── Pipfile
├── Pipfile.lock
├── README.md
└── server

The module installed by pipenv is Selenium.

pipenv install selenium

The Dockerfile for image generation is as follows. This also requires Google Chrome to be installed with it.

Dockerfile


FROM python:3.8

COPY main.py /main.py
COPY Pipfile /Pipfile
COPY Pipfile.lock /Pipfile.lock

RUN apt-get update && apt-get install -y unzip

#install google-chrome, vim
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add && \
    echo 'deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main' | tee /etc/apt/sources.list.d/google-chrome.list && \
    apt-get update && \
    apt-get install -y google-chrome-stable
RUN apt-get install -y vim

#install ChromeDriver
ADD https://chromedriver.storage.googleapis.com/84.0.4147.30/chromedriver_linux64.zip /opt/chrome/
RUN cd /opt/chrome/ && \
    unzip chromedriver_linux64.zip

ENV PATH /usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/opt/chrome

RUN pip install pipenv
RUN pipenv install --system --deploy

ʻADD https://chromedriver.storage.googleapis.com/84.0.4147.30/chromedriver_linux64.zip / opt / chrome /` requires a link to the current Chrome version

https://chromedriver.storage.googleapis.com/index.html

From, paste the link for the current version.

In addition, create docker-compose.yml to connect the server container to this container.

docker-compose.yml


version:  '3'
services:
    server:
        container_name: server
        build:
            context: server
            dockerfile: Dockerfile
        ports:
            - '5000:5000'
        tty: true
        # restart: always
        command: python3 run.py
    main:
        container_name: main
        build: .
        tty: true
        # restart: always
        links:
            - server
        volumes:
            - ./images/:/images/
        command: python3 main.py

The important thing here is that if you want to use the generated image outside of Docker, you need to specify the directory to save it in volumes.

If you look up main.py as a capture method for Selenium, you will find a lot, but this time we will create it like this.

main.py


import os

from selenium import webdriver


def main():
    image_save_path = os.path.join('images', 'image.png')

    text = 'Hello'

    captcha(image_save_path, text)


def captcha(image_save_path: str, text: str) -> None:
    url = f'http://server:5000/?text={text}'

    options = webdriver.ChromeOptions()

    options.add_argument('--headless')
    options.add_argument('--no-sandbox')

    driver = webdriver.Chrome(options=options)

    driver.set_window_size(1920, 1080)
    driver.execute_script("document.body.style.zoom='100%'")
    driver.get(url)
    driver.implicitly_wait(3)
    driver.save_screenshot(image_save_path)
    driver.quit()


if __name__ == "__main__":
    main()

Try to move

docker-compose up

If the images are actually generated in the ʻimages` directory, it is successful.

Source code: https://github.com/yuto51942/image-generate

Finally

The image is generated in the same way for Earthquake-alert that I recently made as a hobby, so please take a look. I also want Star.

You may be able to generate images with other methods, but I think this method is the most free way to generate various images. Please, try it.

Recommended Posts

Create a program that can generate your favorite images with Selenium
Create a web API that can deliver images with Django
Create a BOT that can call images registered with Discord like pictograms
Let's create a program that automatically registers ID/PW from CSV to Bitwarden with Python + Selenium
[Python] A program that creates stairs with #
[Python] A program that finds the maximum number of toys that can be purchased with your money
Create a web app that can be easily visualized with Plotly Dash
Nogizaka46 A program that automatically saves blog images
Create a page that loads infinitely with python
You can easily create a GUI with Python
Convert images from FlyCapture SDK to a form that can be used with openCV
Generate a random sentence from your tweet with trigram
Create a chatbot that supports free input with Word2Vec
Create a batch of images and inflate with ImageDataGenerator
[Python] Create a Tkinter program distribution file with cx_Freeze
Create a Python (Django) learning environment with Docker so that you can debug with VS Code (almost your own procedure memo)
Set up a browser automated test environment that can run Selenium + Pytest with Docker Compose
I made a program to collect images in tweets that I liked on twitter with Python
A program that failed when trying to create a linebot with reference to "Dialogue system made with python"
Is your dll a dll that can take advantage of multi-core?
Create a web application that recognizes numbers with a neural network
Create a PythonBox that outputs with Random after PEPPER Input
Generate a password that is easy to remember with apg
Let's create a script that registers with Ideone.com in Python.
Create a life game that is manually updated with tkinter
Tornado-Let's create a Web API that easily returns JSON with JSON
[Golang] A program that determines the turn with random numbers
I made a plug-in that can "Daruma-san fell" with Minecraft
Let's make a diagram that can be clicked with IPython
Create a homepage with django
Create a heatmap with pyqtgraph
Create a directory with python
Understand the probabilities and statistics that can be used for progress management with a python program
[Python] Make a graph that can be moved around with Plotly
I made a package that can compare morphological analyzers with Python
[Python] Based on your favorite desktop image, let's automatically create a terminal / Vim / VS Code theme that suits your feelings with one command.
Make a Spinbox that can be displayed in Binary with Tkinter
[Ev3dev] Create a program that captures the LCD (screen) using python
I made a shuffle that can be reset (reverted) with Python
[LINE Messaging API] Create a BOT that connects with someone with Python
I tried to create Bulls and Cows with a shell program
Make a currency chart that can be moved around with Plotly (2)
Create a poster with matplotlib to visualize multiplication tables that remember multiplication
Make a Spinbox that can be displayed in HEX with Tkinter
Make a currency chart that can be moved around with Plotly (1)
Introduction of ls command lsix that can display a list of images
I made a program that automatically calculates the zodiac with tkinter
Create a compatibility judgment program with the random module of python.
Generate a normal distribution with SciPy
Create a virtual environment with Python!
Create LGTM images with GIMP! (Python-fu)
Generate a Pre-Signed URL with golang
[Python] Generate a password with Slackbot
Create a poisson stepper with numpy.random
Create a file uploader with Django
Technology that supports a money-throwing service that can monetize a blog with one tag
[EC2] How to take a screen capture of your smartphone with selenium
[Python] A program that finds a pair that can be divided by a specified value
The LXC Web Panel that can operate LXC with a browser was wonderful
I tried to create a program to convert hexadecimal numbers to decimal numbers with python
Make a Discord Bot that you can search for and paste images