This post is part of the Anvil Advent calendar. We're building one web app a day for 24 days, using nothing but Python! This is day 1, and we're kicking off with some funky image manipulation.
Wrap up warm
Today we're making ugly Christmas jumpers with the power of Python.
Try it out here!
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
- quantizes the colours in the image so that there are only a limited number using
colors = 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.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.NEARESTparameter to the
- slaps it onto the background image of the red Christmas jumper using
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!
Open in Anvil >>
If you thought this was cool, check out the rest of Anvil!
Head to the Anvil Learning Centre for more tutorials, or head to our examples page to see how to build some complex apps in Anvil.
Oldest comments (0)