Como fazer uma colagem de imagens usando Python
Uma colagem é uma bela forma de mostrar memórias e conjuntos de imagens. Os criadores de colagens online podem ter problemas de segurança e as aplicações offline podem custar dinheiro e não ter as funcionalidades de que necessita.
É possível aliviar as apreensões e manter a autoridade absoluta criando o seu próprio criador de colagens de imagens. Mas como é que se constrói uma ferramenta destas?
O módulo Tkinter e PIL
Para construir uma interface gráfica de utilizador para uma aplicação de colagem de imagens, é necessário utilizar a biblioteca Tkinter e a Python Imaging Library (PIL). A primeira permite a criação de aplicações baseadas no ambiente de trabalho através do fornecimento de vários elementos visuais ou “widgets”, que simplificam o processo de conceção de interfaces gráficas de utilizador (GUIs).
A biblioteca Pillow, um derivado da conceituada Python Imaging Library (PIL), oferece uma série de funcionalidades de manipulação de imagens que facilitam tarefas como a edição, geração e gravação de vários tipos de ficheiros multimédia visuais.
A instalação do Tkinter e do Pillow pode ser iniciada abrindo uma interface de linha de comandos e executando o seguinte comando:
pip install tk pillow
Configuração da GUI e Manipulação de Imagens
É possível localizar o código-fonte deste projeto no seu repositório dedicado no GitHub, que funciona como um repositório digital de todos os ficheiros e documentação a ele associados.
Para começar, é imperativo importar os módulos necessários. Em seguida, vamos criar uma nova classe conhecida como ImageCollageApp que servirá de objeto principal da aplicação. O passo inicial consiste em definir o título e as dimensões da janela. De seguida, vamos gerar um ecrã utilizando o método tk.Canvas() e configurar o seu elemento pai, largura, altura e cor de fundo.
import tkinter as tk
from tkinter import filedialog, simpledialog, messagebox
from PIL import Image, ImageTk
class ImageCollageApp:
def __init__(self, root):
self.root = root
self.root.title("Image Collage Maker")
self.images = []
self.image_refs = []
self.collage_size = (600, 500)
self.collage_canvas = tk.Canvas(
self.root,
width=self.collage_size[0],
height=self.collage_size[1],
bg="white",
)
self.collage_canvas.pack()
Certifique-se de que o utilizador concedeu permissão para a entrada de ficheiros antes de criar um objeto FileReader para ler ficheiros de imagem do seu dispositivo.
Iniciar uma estrutura de dados chamada “image\_positions” para armazenar o posicionamento visual de elementos multimédia na interface gráfica do utilizador. Implementar três rotinas separadas de tratamento de eventos para tratar as acções de seleção, movimentação e libertação associadas aos referidos elementos multimédia.
self.btn_add_image = tk.Button(
self.root,
text="Add Image",
command=self.add_images,
font=("Arial", 12, "bold"),
)
self.btn_add_image.pack(pady=10)
self.btn_create_collage = tk.Button(
self.root,
text="Create Collage",
command=self.create_collage,
font=("Arial", 12, "bold"),
)
self.btn_create_collage.pack(pady=5)
self.drag_data = {"x": 0, "y": 0, "item": None}
self.image_positions = []
self.collage_canvas.bind("<ButtonPress-1>", self.on_press)
self.collage_canvas.bind("<B1-Motion>", self.on_drag)
self.collage_canvas.bind("<ButtonRelease-1>", self.on_release)
Para implementar a funcionalidade descrita no excerto de código fornecido, precisamos primeiro de definir um método chamado “on\_press”. Este método é ativado quando o utilizador clica no rato enquanto desenha na tela.O objetivo deste método é obter o objeto canvas mais próximo do ponto em que o utilizador clicou com o rato e guardá-lo no dicionário “drag\_data”. Adicionalmente, iremos armazenar as coordenadas X e Y do clique do rato para que possamos mais tarde calcular a distância a que o utilizador moveu o rato durante o ato de arrastar.
def on_press(self, event):
self.drag_data["item"] = self.collage_canvas.find_closest(event.x, event.y)[0]
self.drag_data["x"] = event.x
self.drag_data["y"] = event.y
Para implementar a funcionalidade descrita no trecho de código fornecido, é necessário definir um método chamado “on\_drag” que será acionado quando o usuário mover o mouse enquanto mantém pressionado o botão esquerdo. Este método calcula as distâncias horizontal e vertical percorridas pelo cursor durante a operação de arrastamento, utilizando as variáveis “dx” e “dy”. Com base nestes valores, a posição da imagem pode então ser actualizada modificando os atributos “x” e “y” do objeto “image” no widget “self.canvas”. Além disso, as novas coordenadas da imagem devem ser armazenadas no dicionário “drag\_data” associado à instância atual da classe, o que permite que persistam em vários fotogramas.
def on_drag(self, event):
delta_x = event.x - self.drag_data["x"]
delta_y = event.y - self.drag_data["y"]
self.collage_canvas.move(self.drag_data["item"], delta_x, delta_y)
self.drag_data["x"] = event.x
self.drag_data["y"] = event.y
Para limpar quaisquer referências persistentes à imagem anteriormente arrastada e recalcular o posicionamento de todos os elementos visuais no ecrã em resposta a um evento de libertação, pode implementar um método “on\_release” que resolva estas questões. Especificamente, este método deve limpar a referência à imagem que tinha sido acompanhada pelo cursor do utilizador durante a operação de arrastamento, ao mesmo tempo que chama a função “update\_image\_positions” para rever a disposição de todas as imagens apresentadas após a cessação da interação do utilizador.
def on_release(self, event):
self.drag_data["item"] = None
self.drag_data["x"] = 0
self.drag_data["y"] = 0
self.update_image_positions()
De uma forma elegante, vamos delinear uma função intitulada “update\_image\_positions”, que implica apagar o conteúdo da matriz “image\_positions” e iterar através de todos os constituintes da tela. Durante este processo, para cada componente, vamos identificar os seus dados posicionais e anexá-los ao referido array.
def update_image_positions(self):
self.image_positions.clear()
for item in self.collage_canvas.find_all():
x, y = self.collage_canvas.coords(item)
self.image_positions.append((x, y))
Claro! Aqui está um exemplo de implementação em Python usando Tkinter e a biblioteca Pillow:pythonimport tkinter as tkfrom tkinter import filedialogimport osfrom PIL import Imagedef add_images():# criar uma nova windowwindow = tk.Toplevel(root)# perguntar ao utilizador quantas imagens quer carregarnum_images = tk.Entry(window)num_images.pack()num_entries = tk.Label(window, text=“Introduzir o número de imagens:")num_entries.pack()# obter o valor do campo de entradanum_values = num_images.get()if num_values.isdigit() and int(
Utilizar a função resize_image para redimensionar a imagem atual na memória, criando uma nova imagem fotográfica compatível com Tkinter .Subsequentemente, anexe esta referência actualizada à lista image_refs antes de atualizar a tela com o método update_canvas . orientação de retrato)if aspect_ratio > 1:# Definir a nova largura como metade da largura da colagemnew_width = self.collage_width / 2# Calcular a nova altura correspondente mantendo a relação de aspectow_height = int(((
Se a relação de aspeto da colagem for inferior a um, reduziremos a altura e a largura para metade, calculando as dimensões apropriadas com base no tamanho original da colagem. Podemos então utilizar a função redimensionar do Pillow para gerar uma versão ampliada da colagem com estas medidas ajustadas, mantendo as suas proporções.
def resize_image(self, image):
img_width, img_height = image.size
aspect_ratio = img_width / img_height
if aspect_ratio > 1:
new_width = self.collage_size[0] // 2
new_height = int(new_width / aspect_ratio)
else:
new_height = self.collage_size[1] // 2
new_width = int(new_height * aspect_ratio)
return image.resize((new_width, new_height))
Defina um método chamado “update\_canvas” com os seguintes passos:1. Limpe todos os itens da tela removendo os respectivos links clicáveis associados a cada item da disposição anterior das imagens.2. Dê ao utilizador a oportunidade de introduzir o número desejado de linhas e colunas através de uma caixa de diálogo de ficheiro. As dimensões fornecidas devem ser consistentes com as especificações fornecidas anteriormente neste documento.3. Determine o número total de colunas necessárias com base no número de linhas introduzidas pelo utilizador. No nosso exemplo, vamos assumir que existem seis colunas por linha. Calcule a largura e a altura da colagem em conformidade. Isto significa que, se o utilizador selecionar quatro linhas, a largura será o dobro da largura de uma coluna (6) mais uma margem de espaço entre elas. Consequentemente
def update_canvas(self):
self.collage_canvas.delete("all")
rows = simpledialog.askinteger("Number of Rows", "Enter the number of rows:")
cols = simpledialog.askinteger(
"Number of Columns", "Enter the number of columns:"
)
collage_width = self.collage_size[0] * cols // 2
collage_height = self.collage_size[1] * rows // 2
self.collage_canvas.config(width=collage_width, height=collage_height)
self.image_positions.clear()
x_offset, y_offset = 0, 0
Iterar através de cada item na lista image_refs , criando uma representação visual do mesmo na tela utilizando o deslocamento fornecido. Posicione o canto superior esquerdo da imagem nas coordenadas designadas, definindo o seu ponto de ancoragem para o canto noroeste. Além disso, anexe as coordenadas correspondentes à lista image_positions para referência posterior.
Para organizar eficazmente a imagem subsequente dentro da grelha, é essencial atualizar a variável x_offset adicionando metade da colagem
for i, image_ref in enumerate(self.image_refs):
self.collage_canvas.create_image(
x_offset, y_offset, anchor=tk.NW, image=image_ref
)
self.image_positions.append((x_offset, y_offset))
x_offset \\+= self.collage_size[0] // 2
if (i \\+ 1) % cols == 0:
x_offset = 0
y_offset \\+= self.collage_size[1] // 2
Criar a colagem e guardá-la
Para gerar uma representação visual apelativa de vários recursos digitais, vamos desenvolver uma função conhecida como create_collage . Este algoritmo começa por verificar se foram ou não incluídos itens multimédia na composição. No caso de não existirem, apresenta uma mensagem de aviso. Posteriormente, esta técnica determina as dimensões da montagem eletrónica, adquirindo a sua largura e estatura. Em seguida, constrói um novo objeto vazio Pillow Image que possui um fundo branco imaculado. Depois, a função irá iterar sobre o catálogo de ficheiros e colocá-los precisamente sobre a tela nas suas coordenadas predeterminadas usando a poderosa biblioteca PIL do Python para uma manipulação eficiente de dados de imagem.
Utilize o visualizador de imagens predefinido para exibir a colagem digital, guardando-a primeiro e tirando partido das suas capacidades incorporadas para uma visualização óptima.
def create_collage(self):
if len(self.images) == 0:
messagebox.showwarning("Warning", "Please add images first!")
return
collage_width = self.collage_canvas.winfo_width()
collage_height = self.collage_canvas.winfo_height()
background = Image.new("RGB", (collage_width, collage_height), "white")
for idx, image in enumerate(self.images):
x_offset, y_offset = self.image_positions[idx]
x_offset, y_offset = int(x_offset), int(y_offset)
paste_box = (
x_offset,
y_offset,
x_offset \\+ image.width,
y_offset \\+ image.height,
)
background.paste(image, paste_box)
background.save("collage_with_white_background.jpg")
background.show()
Utilize as capacidades da biblioteca Tkinter instanciando uma nova instância da aplicação ImageCollage, que está equipada com os atributos e métodos necessários para gerar colagens visuais com base nos dados introduzidos pelo utilizador. Uma vez estabelecida, inicie a execução do ciclo de eventos Tkinter utilizando a metodologia mainloop(). Este comando dá instruções ao interpretador Python para monitorizar e processar continuamente quaisquer eventos que ocorram na janela, mantendo efetivamente o seu estado até ser fechada manualmente pelo utilizador final.
if __name__ == "__main__":
root = tk.Tk()
app = ImageCollageApp(root)
root.mainloop()
Testar diferentes funcionalidades do Image Collage Maker
Ao executar a aplicação, é apresentada uma interface com duas opções - “Add Image” e “Create Collage”. Ao clicar na opção “Add Image” (Adicionar imagem), aparece uma janela pop-up que pede ao utilizador que indique o número total de imagens que pretende incluir na colagem. Depois de introduzir “5” como o número desejado de imagens e de as selecionar da lista fornecida, surge uma outra caixa de diálogo que pede informações sobre o número de linhas horizontais e de colunas verticais que devem ser utilizadas na construção da colagem.
Ao inserir duas linhas e três colunas de elementos visuais no espaço delimitado, a interface gráfica do utilizador organiza-os sistematicamente numa configuração de matriz, criando uma apresentação coesa que realça o posicionamento e a ordem de cada componente individual.
A pré-visualização permite a manipulação das imagens, reposicionando-as de acordo com as preferências do utilizador. Ao clicar no botão “Create Collage”, o software guarda a imagem resultante.
Ao examinar a representação visual da colagem criada, é evidente que a aplicação de software atingiu o objetivo pretendido no que diz respeito à montagem de uma coleção de imagens coesa e visualmente apelativa.
Melhorar a funcionalidade do Image Collage Maker
Em vez de utilizar uma estrutura baseada em tabelas, é possível oferecer aos utilizadores uma seleção de modelos predefinidos à escolha. Além disso, incorpore funcionalidades que permitam alterar a tonalidade do fundo, inscrever conteúdo escrito, aplicar melhorias na imagem e integrar elementos decorativos derivados de fontes online.
Ao incorporar estas funcionalidades, permitir um método simples para modificar a imagem composta, fornecendo opções para desfazer ou redesenhar operações. Além disso, permitir que os utilizadores ajustem o corte, o redimensionamento e a orientação das imagens individuais de acordo com as suas preferências. Além disso, inclui uma funcionalidade que permite guardar o resultado final num formato de ficheiro escolhido.