Aula2.Ex2. Imagens Matriciais $\times$ Imagens Vetoriais

Na Aula 2, sobre conceitos envolvidos na Computação Gráfica, vimos que podemos explorar imagens no "mundo" vetorial e matricial.

Imagens vetoriais são representadas por vértices e funções geométricas para "construir" a imagem. Na prática, isso significa que podemos aplicar transformações geométricas como escala, rotação e translação nesses objetos.

Imagems matriciais, formadas por um conjunto de pixels, são uma amostra da imagem real. Nesse exercício veremos o efeito em mudar a escala (alterar o tamanho) em uma imagem matricial $\times$ imagem vetorial.

Carregar as bibliotecas necessárias para o exercício

from PIL import Image
import requests
from io import BytesIO
from IPython.display import display # to display images

Fazer o download de uma imagem da internet

Tente trocar a URL por uma imagem de sua preferência.

url_imagem = 'https://www.fmrp.usp.br/wp-content/uploads/sites/356/2018/02/logo-usp-s.png'

# lendo a imagem
response = requests.get(url_imagem)
img = Image.open(BytesIO(response.content))

# exibindo a imagem
display(img)

Aumentando a imagem em 10x o tamanho original

# informacoes da imagem
largura = img.size[0]
altura = img.size[1]

img = img.resize((largura*10,altura*10)) # aumentando 10x


# exibindo a imagem
display(img)

Resultado

Observe que a imagem perdeu a qualidade, apresentando serrilhados. Lembre que pixeis são apenas amostras da imagem original. Para aumentá-la, foi necessário estimar pixeis a partir da amostra.

Imagens vetoriais

Repetimos o processo para uma imagem em formato vetorial. Nesse caso, precisamos "renderizar" a imagem para o formato matricial antes de sua exibição.

Primeiro, instalemos algumas bibliotecas.

!pip install svglib
from svglib.svglib import svg2rlg
from reportlab.graphics import renderPDF
from IPython.core.display import HTML

Collecting svglib
  Downloading svglib-1.1.0.tar.gz (2.0 MB)
Collecting reportlab
  Downloading reportlab-3.6.1-cp38-cp38-win_amd64.whl (2.3 MB)
Requirement already satisfied: lxml in c:\programdata\anaconda3\lib\site-packages (from svglib) (4.6.3)
Collecting tinycss2>=0.6.0
  Downloading tinycss2-1.1.0-py3-none-any.whl (21 kB)
Collecting cssselect2>=0.2.0
  Downloading cssselect2-0.4.1-py3-none-any.whl (13 kB)
Requirement already satisfied: webencodings in c:\programdata\anaconda3\lib\site-packages (from cssselect2>=0.2.0->svglib) (0.5.1)
Requirement already satisfied: pillow>=4.0.0 in c:\programdata\anaconda3\lib\site-packages (from reportlab->svglib) (8.2.0)
Building wheels for collected packages: svglib
  Building wheel for svglib (setup.py): started
  Building wheel for svglib (setup.py): finished with status 'done'
  Created wheel for svglib: filename=svglib-1.1.0-py3-none-any.whl size=30113 sha256=0d4c776b5381b84ceb6494f4b822c5224e7a56371b51d2f3be7f8f38bde39da9
  Stored in directory: c:\users\usuario\appdata\local\pip\cache\wheels\fb\d5\52\7f88b82f5b06ea70a285cfc5f8a3d54a034494249879376edf
Successfully built svglib
Installing collected packages: tinycss2, reportlab, cssselect2, svglib
Successfully installed cssselect2-0.4.1 reportlab-3.6.1 svglib-1.1.0 tinycss2-1.1.0

Agora salvamos uma imagem a partir de uma URL da internet. Nesse exemplo, usamos o logo do ICMC/USP em formato vetorial. Pesquise sobre o formato SVG.

url_imagem = 'https://upload.wikimedia.org/wikipedia/commons/c/c9/Webysther_20170627_-_Logo_ICMC-USP.svg'

# lendo a imagem

with open('imagem.svg', "wb") as file:
    response = requests.get(url_imagem)
    file.write(response.content)
            

img_svg = svg2rlg('imagem.svg')

Exibindo a imagem com largura de 200 pixeis.

# exibindo a imagem
HTML('<img src="imagem.svg" width="200">')

Exibindo a imagem com largura de 400 pixeis.

HTML('<img src="imagem.svg" width="400">')

Exibindo a imagem com largura de 800 pixeis.

HTML('<img src="imagem.svg" width="800">')

Exibindo a imagem com largura de 2000 pixeis.

Observe que a imagem não "perde" qualidade e virtualmente podemos usar qualquer dimensão para sua exibição.

HTML('<img src="imagem.svg" width="2000">')