Рубрики
Без рубрики

Учебное пособие: Gerador de Imagens Placeholder

Internução CRIEI UM PEQUENO PROJETO PARA ESTUDOS DE PYTHON E DO MicroFramework Флеста Пара по … Tagged с Python, Flask, Tulciory.

Internução

CRIEI UM PEQUENO PROJETO PARA ESTUDOS DE PYTHON E DO MicroFramework Флеска Пара Апендизизагем Пессоал, Кому Формар документирования Acabei Criando UM Tutorial Passo Passo Do Que Fiz, Então Resolvi Compartilhar Comma Mahoas.

Vamos Criar Um Simples Projeto de Geração de Заполнитель (Espaço Reservado) de Imagens utilizando o Microframework Фляжка пара Python Como Backend Junto com A Biblioteca Подушка Парарара как воображение. Com Isso Quero Mostrar Como é fácil criar aplicações web ingnaveis utilizando python com колба.

Сумарио

  • Учебное пособие: Gerador de Imagens Placeholder
    • Internução
    • Сумарио
    • Репозиторио
    • Pre-requisitos
    • Preparando o Ambiente
    • Инсталандо зависит
    • Criando o Требования.txt
    • Привет, World Com Flask
    • Sunejando Nossa Aplicação
    • Lista de urls
    • Pagina Inicial
    • Exibindo index.html
    • Герандо Имамагенс Quadradas
    • Gerando Imagens retagulares
    • Заключение

Репозиторио

O projeto final está disponível Нет Meu github

Pre-requisitos

  • Python 3,6 OU Superior
  • IDE (Ambiente de desenvolvimento Integrado) de Sua Prefercia, Recomendo o VSCODE

Preparando o Ambiente

Semper Que for Criar um novo projeto python crie um Virtualenv para garantir que seus projetos e bibliotecas utilizadas fiquem isoladas do sistema base em que está edá rodano, garantindo mior portabilidade.

$ mkdir placeholder-generator
$ cd placeholder-generator
$ python -m venv env
$ source env/bin/activate
(env) william@william-Note:~/Flask/placeholder-generator
$ code .

Basicamente nos:

  • Линха 1: Criamos Uma Pasta Para O Nosso Projeto.
  • Linha 2: Acessamos está pasta.
  • Linha 3: Criamos o Virtualenv.
  • Линха 4: Ativamos Este Virtualenv.
  • Линха 6: Abrimos o Vscode Dentro da pasta do nosso projeto.

Инсталандо зависит

Vamos instalar o flask e biblioteca dememens подушка, Lembre-se de estar com O virtualEnv ativado.

$ pip install Flask Pillow
Collecting Flask
  Using cached https://files.pythonhosted.org/packages/f2/28/2a03252dfb9ebf377f40fba6a7841b47083260bf8bd8e737b0c6952df83f/Flask-1.1.2-py2.py3-none-any.whl
Collecting Pillow
  Downloading https://files.pythonhosted.org/packages/ab/f8/d3627cc230270a6a4eedee32974fbc8cb26c5fdb8710dd5ea70133640022/Pillow-7.1.2-cp37-cp37m-manylinux1_x86_64.whl (2.1MB)
    100% |████████████████████████████████| 2.1MB 3.5MB/s 
Collecting itsdangerous>=0.24 (from Flask)
  Using cached https://files.pythonhosted.org/packages/76/ae/44b03b253d6fade317f32c24d100b3b35c2239807046a4c953c7b89fa49e/itsdangerous-1.1.0-py2.py3-none-any.whl
Collecting Werkzeug>=0.15 (from Flask)
  Using cached https://files.pythonhosted.org/packages/cc/94/5f7079a0e00bd6863ef8f1da638721e9da21e5bacee597595b318f71d62e/Werkzeug-1.0.1-py2.py3-none-any.whl
Collecting click>=5.1 (from Flask)
  Using cached https://files.pythonhosted.org/packages/d2/3d/fa76db83bf75c4f8d338c2fd15c8d33fdd7ad23a9b5e57eb6c5de26b430e/click-7.1.2-py2.py3-none-any.whl
Collecting Jinja2>=2.10.1 (from Flask)
  Using cached https://files.pythonhosted.org/packages/30/9e/f663a2aa66a09d838042ae1a2c5659828bb9b41ea3a6efa20a20fd92b121/Jinja2-2.11.2-py2.py3-none-any.whl
Collecting MarkupSafe>=0.23 (from Jinja2>=2.10.1->Flask)
  Using cached https://files.pythonhosted.org/packages/98/7b/ff284bd8c80654e471b769062a9b43cc5d03e7a615048d96f4619df8d420/MarkupSafe-1.1.1-cp37-cp37m-manylinux1_x86_64.whl
Installing collected packages: itsdangerous, Werkzeug, click, MarkupSafe, Jinja2, Flask, Pillow
Successfully installed Flask-1.1.2 Jinja2-2.11.2 MarkupSafe-1.1.1 Pillow-7.1.2 Werkzeug-1.0.1 click-7.1.2 itsdangerous-1.1.0
You are using pip version 10.0.1, however version 20.1 is available.
You should consider upgrading via the 'pip install --upgrade pip' command.

Criando o Требования.txt

UMA BOA PRATICA QUANDO SE CRIA PROJETO PYTHON E CRIAR UM Требования.tx com todos os arquivos e зависит от Projeto.

$ pip freeze > requirements.txt

Quando Quiser Instalar Basta Digitar O Comando PIP установка -R TEDS.TXT Параметры ambiente instalado e pronto Rapidamente.

Привет, World Com Flask

Vamos Criar Nosso Primeiro Programa utilizando o Flask E Python. CRIE UM ARQUIVO COM O NOME main.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def index():
    return "Hello World!"

if __name__ == "__main__":
    app.run(port=8000, debug=True)

Para Rodar Nosso Programa Abra O Termina, com o Virtualenv Ативадо исполняет.

$ python main.py 
 * Serving Flask app "main" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://127.0.0.1:8000/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 356-909-478
127.0.0.1 - - [17/May/2020 18:33:28] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [17/May/2020 18:33:28] "GET /favicon.ico HTTP/1.1" 404 -

Abra o seu navegador na página http://localhost: 8000/ Para Ver Seu Primeiro Programa Funcionar.

Вамос как явные:

  • Линха 1: Importação da Biblioteca колба
  • Linha 3: Aqui Criamos Uma Instancia Da Classe. O Armero Passado é o nome do modulo da aplicação ou pacote.
  • Линха 5: Este é um декоратор que cria uma rota “/” ao nosso projeto, ou seja toda vez que nosso projeto для acessado com url raiz, фансао dá proxima linha será chamada.
  • Линха 6: Criamos Uma Funcão Chamada index () o nome poderia ser Qualquer um Ex: home () , pagina_inicial () Анкет
  • Linha 7: Nossa Funcáo Retorna Uma String Com A Clássica Frase “Hello World!”
  • Linha 9: Verifica se nosso programa está sendo receadado como um modulo immormentado ou está sendo receadado diretamente.
  • Линха 10: SE Nosso Programa для receadado diretamente inicializa nosso projeto колпа, escutando na porta 8000 e em modo debug.

Sunejando Nossa Aplicação

Vamos Agora Pensar Um Pouco Em Como Nosso Gerador de Placeholders Vai Funcionar. Ideia é Que Caso Alguém Queira Uma Imagem Basta Atpontar A URL DA TAG IMG Para um endereco em nosso site que uma imagem é retornada, пример: представьте себе Que uma pessoa Queira simular um banner no inicio de seu site com argura e altura de 800px 70px repectivamente, ele aponta url para http://nossosite.com.br/800/70/ E UMA Imagem é retornada com o tamanho passado como parâmetro na proria url. Para Que isso funcione vamos criar nosso projeto repondendo в качестве URL Seguintes:

Lista de urls

1. “/” : Página Inicial Com o formulário para colocar argura e altura da Imagem gerada, хунто ком -юма Pequena apresentação do. 2. “/tamanho_pixel/” : Quando url для UM numero nossa aplicação irá criar umaememem quadrada com o tamanho passado na url. 3. “/largura_pixel/altura_pixel/ : Quando url acessada tiver dois números, nossa aplicação irá criar umaemem com

Pagina Inicial

Vamos Criar Uma Pagina Inicial Comm Formulário perguntando argura e altura da Imagem que queremos criar. Criem Pasta Dentro do Projeto Chamada Шаблоны , Dentro dela crie um arquivo chamado index.html

$ mkdir templates
$ touch templates/index.html

Adicione O Conteúdo abaixo dentro do arquivo шаблоны/index.html






    
    
    

    
    

    Gerador de placeholder de imagens!



    

        
Gerador de placeholder de imagens!

    


    

        

            

                

                    As vezes tudo o que precisamos é de uma imagem temporária
                    para colocar em um projeto ou design em quanto ainda não temos as imagens
                    finais.
                

                

                

                    Crie uma imagem do tamanho que desejar.
                

                

                

                    
                    

                        px
                    

                


                

                    
                    

                        px

Basicamente é UMA SITE HTML SIMPLES COM DOIS Входные данные, UM PARA ALTURA E ATRO PARA LARGURA E UM BOTãAO QUE ENVIA PARA ARL Correta de Geração de Imagem.

Exibindo index.html

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

if __name__ == "__main__":
    app.run(port=8000, debug=True)

Как alterações estão nas linhas 1 Onde adicionamos Ao import A Biblioteca render_template e na linha 7 Onde Agora em Vez de retornar uma string retornamos nosso шаблон renderizado como resposta ao acesso url raiz do nosso сайт.

Acesse A Pagina E Veja Nosso Formulário.

É Quarde que o arquivo index.html Esteja dentro da pasta Шаблоны Dentro do Nosso Projeto, Para Que O Flask O Encontre Corretamente, Arvore de Diretório Deve Estar Igual A Isso.

.
├── main.py
├── requirements.txt
└── templates
    └── index.html

Касо Тенха Алгум Проблема, Паре Ассерхао Д.О. Носсо ПРОЕКТОР АПЕРТАНДО Ctrl+c на Линха де Командо Е дигите Novamente Python main.py MAS LEMBRE-SE O VIRTUALENV TEM QUE ESTAR RODANDO, NA DUVIDA VEJA Preparando o Ambiente Нет учебного пособия.

Com Isso Nosso Primeiro Item Da Lista de urls Está Feito, Vamos Agora AO пункт 2.

Герандо Имамагенс Quadradas

Vamos Trabalhar Agora no Item 2 DA NOSSA LISTA:

2. “/tamanho_pixel/” : Quando url для UM numero nossa aplicação irá criar umaememem quadrada com o tamanho passado na url.

Para keyçar vamos criar uma pasta onde nossas Imagens geradas serão armazenadas.

$ mkdir imagens

Agora altere o main.py Para ficar parecido com o arquivo abaixo.

from flask import Flask, render_template, send_file
from PIL import Image

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

@app.route("//")
def gera_imagem_quadrada(tamanho):
    tamanho = max(tamanho, 1)
    tamanho = min(tamanho, 5000)

    img = Image.new('RGB', (tamanho, tamanho), 'lightgray')

    nome_arquivo = f'imagens/{tamanho}x{tamanho}.png'
    img.save(nome_arquivo)

    return send_file(nome_arquivo, mimetype='image/png')

if __name__ == "__main__":
    app.run(port=8000, debug=True)

Как Alterações foram как seguintes:

  • Линха 1: Adicionamos a importação da biblioteca send_file
  • Linha 2: Adição da impormação da biblioteca Изображение Do Palow para criar nossa Imagem
  • Линха 10: Criando uma nova rota (url), essa rota decebe umero e atribui a uma variavel chamada size, o flask garante que esse valor será um numero e uma uma string por que colocamos int: Комо Параметро.
  • Линха 11: Defineimos nossa função com o nome gera_imagem_quadrada que bebe o parâmetro size, atenção esse nome de variavel tem que ser igual ao nome criado na linha 10.
  • Линха 12: Фунсаовый размер é Uma Funcáo встроенный Que Retorna O Maior Valor Entre dois números ou de uma lista. Aqui Queremos garantir Que o Valor não seja menor ou u igual a Zero, Pois Imagem com tamanho Zero ou negativo nione.

  • Линха 13: Semelhante a Linha передняя маса Agora Queremos Uma Tamanho Limite para evitar que alguém Coloque um tamanho de Imagem muito grande e pare nosso site pois ele ficaria muito tempo processando essa Imagem.

  • Линха 15: Criamos Uma Imagem Com 3 Camadas de Cor “Rgb” E com as largura e altura igual ao tamanho passado na url, o ultimo parâmettro é a cor de fundo da Imagem, que no caso é un cinza, e salvamos ema variavel chatav IMG .

  • Линха 17: Estamos criando uma string que vai indicar o nome da nossa Imagem e onde ela será salva, no caso dater da pasta imagens/e com nome do tamanho passado como parâmetro na url, пример: caso seja acessado url nosso_site/400/ uma string com o texto Imagens/400x400.png Сера Криада.

  • Линха 18: Agora Salvamos A Imagem utilizando A String Criada na linha 17 Ex: Seguindo O Exemplo Ofter, Ela Será Salva Dentro Da pasta Imagens Dentro da pasta do projeto com o nome 400x400.png

  • Линха 20: RETORNAMOS A Imagem gerada e no cabeçalho da resposta informamos que é do tipo imagem no formato png.

Gerando Imagens retagulares

Estamos Quase No Final Do Nosso Projeto, Agora Só Falta O Item 3 DA NOSSA LISTA DE FUNCIONALIDADES DA NOSSA APLICACAO.

Vamos ao código:

from flask import Flask, render_template, send_file
from PIL import Image, ImageDraw

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

def gera_imagem(largura, altura):
    largura = max(largura, 1)
    largura = min(largura, 5000)

    altura = max(altura, 1)
    altura = min(altura, 5000)

    img = Image.new('RGB', (largura, altura), 'lightgray')

    draw = ImageDraw.Draw(img)
    tamanho_imagem = f'{largura}x{altura}'
    l, a = draw.textsize(tamanho_imagem)
    pos_x = (largura-l)/2
    pos_y = (altura-a)/2
    draw.text( ( pos_x, pos_y ), tamanho_imagem, fill="black" )

    nome_arquivo = f'imagens/{tamanho_imagem}.png'
    img.save(nome_arquivo)

    return nome_arquivo    

@app.route("//")
def gera_imagem_quadrada(tamanho):

    nome_arquivo = gera_imagem(tamanho, tamanho)

    return send_file(nome_arquivo, mimetype='image/png')

@app.route("///")
def gera_imagem_retangular(largura, altura):

    nome_arquivo = gera_imagem(largura, altura)

    return send_file(nome_arquivo, mimetype='image/png')

if __name__ == "__main__":
    app.run(port=8000, debug=True)

\ o/Saltamos de 20 Linhas Para 40, Calma nãa assuste basicemente fizemos o mesmo que antes com alguns pequenos ingrementos, vou Explicar somente o apareceu de novo:

  • Linha 2: Importação do Modulo Imagedraw, Queremos escrever na Imagem e ele nos ajuda, Veja mais em Имагедрау

  • Линха 10: Em Quanto estava criando rota de geração de imagens retagulares percebi que boa parte dela erraulal a de geração de imagens quadrada, então resolvi criar uma função que faria. Funcáo Gera Imagem, Como Como Parâmetro argura e altura da Imagem A Ser Gerada, Ela Cria aememe e depois retorna uma string com o caminho onde ela foi salva.

  • Linhas 11 A 15: Mesma Coisa Das Linhas 12 E 13 Da Versãoder Do Código, Só Que Agora estamos trabalhando com altura e largura.

  • Линха 19: Utilizando o modulo imagedraw pegamos uma serirecia nossa imagem criada e salvamos na variável draw.

  • Линха 20: Criamos Uma String Com O Tamanho da Imagem Seperado Por X, Ex: ‘400×300’.

  • Linha 21: Funcáo Text_size Do Modulo Draw Retorna O Tamanho de UM Texto Passado Como Parâmetro Para Ele, нет Caso O Texto está na variável criada na linha передние. Está Funcáo Retorna Uma Tupla (Dois Valores) com argura e altura da Imagem, que nos salvamos nas variaveis l e Repectivamente.

  • Линха 22: pagamos o tamanho da nossa Imagem e subtraImos do tamanho do nosso texto e o receedado é dividido por 2, com isso achamos o ponto on devemos ase a desenhar nosso texto no eixo x para Que ele -fique centrentizado.

  • Линха 23: Semelhante a Linha передняя, Mas Agora Calculamos O Eixo y.

  • Линха 24: vamos desenha no texto na Imagem, passamos uma tupla com as posições x y valladas nas linhas 22 e 23, o texto que será eScrito que está na variável tamanho_imagem e o ultimo parâmetro é a cor utilizada que no caso é preta.

  • Линха 29: RETORNAMOS O NOME DO ARQUIVO GERADO.

  • Линха 34: Заместитель Todas как Линхас 12 А. 18 Da Vershody Do Nosso Código, Onde Chamamos A Funcáo Que Gera A Imagem Passado Como Parâmetro O Tamanho da Imagem E Salvamos em Uma variavel o Retorno.

  • Линха 38: Criamos Uma Nova Rota, Onde argura e altura é passado через URL.

  • Линха 39: Funcáo Que Será Chamada Quando nossa rota da linha передняя для Acessada.

  • Линха 41: Чамамос Фунсао Ке -Гера Имагум Пассадо Комо Параметро Альгура Элура да Имагам Е. Сальвамос Эм Ума ВАРИЕВЕЛЬ О РЕБЕРНО ДА ФУНЦАО.

  • Линха 43: RETORNAMOS A Imagem Criada.

Заключение

Muita Coisa Para Web Pode Ser Criada Farmente utilizando o Framework Flask, com poucas linhas de código criamos uma aplicação simples e funcional. Claro Que Este projeto ainda niona está pronto Para colocar em produção, é reecplio algumas melhorias, como apagar imagens antigas para que não sobrecarreguem o servidor, antes de gerar nova imagem, veritificar se ela jata isse и т. Д. Mas Como um pequeno etudo é Um Bom.

Оригинал: “https://dev.to/williamdepaula/tutorial-gerador-de-imagens-placeholder-1ie7”

Читайте ещё по теме: