Day 1 of the Anvil Advent Calendar
Build a web app every day until Christmas, with nothing but Python!
Wrap up warm!
Today we’re making ugly Christmas jumpers with the power of Python.
Try it out here!
https://christmas-jumper-generator.anvil.app
Just head to the app and start uploading images to see what they’ll look like once we’ve mangled them into something you could put on a Christmas jumper.
How is it done?
Once you’ve uploaded an image in your browser, the app sends it over to the client where we do some fun things to it in Pillow. It’s really easy to convert an AnvilMedia object to a Pillow object and vice versa, with the help of BytesIO:
from io import BytesIO
from Pillow import Image
def convert_blob_to_image(image_file_from_client):
"""Take an AvilMedia object from the client and turn it into a Pillow Image object."""
image = Image.open(BytesIO(image_file_from_client.get_bytes()))
image = image.convert("RGB") # make sure we're using the right colour mode for what we want to do
return image
def convert_image_to_blob(image):
"""Prepare a Pillow Image object to be sent back to the client by turning into an Avil BlobMedia."""
with BytesIO() as buf:
image.save(buf, format='PNG') # you could also use 'JPEG' here if you wished
blob = anvil.BlobMedia('image/png', buf.getvalue())
return blob
Once we’ve got a Pillow Image instance, we’re free to do all kinds of weird and wonderful things with it.
The algorithm in the app works like this:
- resizes the image to 50 pixels wide using
Image.resize
- quantizes the colours in the image so that there are only a limited number using
Image.convert
and specifyingcolors = 7
(a number I found to be a happy, ugly medium between ’too busy’ and ‘unrecognisably few’) - replaces each colour in the image with a suitably Christmassy shade, using
Image.getpixel
andImage.putpixel
. It also makes sure that the top left corner pixel, which is most likely to be some kind of background to the uploaded image, gets coloured in with the same shade as the background Christmas jumper, so it looks seamless. - enlarges the image, keeping the ‘pixellated’ look with a
resample = Image.NEAREST
parameter to theImage.resize
method - slaps it onto the background image of the red Christmas jumper using
Image.paste
.
If you want to see the code in more detail, you can clone the app for yourself and see the server code in all its glory!
Give the Gift of Python
Share this post: