Make your own ugly Christmas jumper!
Today we’re making ugly Christmas jumpers with the power of Python.
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.
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 Imagedef 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()))
# make sure we're using the right colour
# mode for what we want to do
image = image.convert("RGB")
return imagedef 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:
# you could also use 'JPEG' here if you wished
blob = anvil.BlobMedia('image/png', buf.getvalue())
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!
If you thought this was cool, check out the rest of Anvil!
Originally published at https://anvil.works.