Wrap up warm!

Today we’re making some (questionably) beautiful Hanukkah-themed jumpers with the power of Python.

Try it out here!

https://hanukkah-jumpers.anvil.app

Just head to the app and start uploading images to see what they’ll look like once we’ve pixellated and jumper-ified them.

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 specifying 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 shade from a Hanukkah-themed palette (as determined by me, and my Hanukkah opinions!), using Image.getpixel and 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.NEAREST parameter to the Image.resize method.
• slaps it onto the background image of the blue 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!