[SOLVED] Python(Pillow) or JS(canvas) - how to split image and make a right canvas edge as a mirror wrap

Python(Pillow) or JS(canvas) - how to split image and make a right canvas edge as a mirror wrap

I'm trying to split image into pieces and get the same effect as on the photo below using HTML, CSS and JS or with python lib Pillow.

Original image: input

Result: result

What I have tried so far is using HTML and context.drawImage() function. I was able to split the image into the pieces but I need to make each piece right edge as a mirror wrap, so it would look a 3d'ish so to say. I've also tried Pillow in python as well, I was able to split the image into the pieces again, but I can't find a way to get the edges effect.

Here is python code example:

from PIL import Image

# Open the image
image = Image.open('image.jpeg')

# Divide the image into panels (assuming 3 panels for this example)
width, height = image.size
panel_width = width // 3
panel_height = height
panel1 = image.crop((0, 0, panel_width, panel_height))
panel2 = image.crop((panel_width, 0, panel_width * 2, panel_height))
panel3 = image.crop((panel_width * 2, 0, panel_width * 3, panel_height))

# Add a margin to the right side of each panel
margin = 10

panel1_with_margin = Image.new('RGB', (panel1.width + margin, panel1.height), (255, 255, 255))
panel1_with_margin.paste(panel1, (0, 0))
panel2_with_margin = Image.new('RGB', (panel2.width + margin, panel2.height), (255, 255, 255))
panel2_with_margin.paste(panel2, (0, 0))
panel3_with_margin = Image.new('RGB', (panel3.width + margin, panel3.height), (255, 255, 255))
panel3_with_margin.paste(panel3, (0, 0))

# Combine the panels into a single image
total_width = panel1_with_margin.width + panel2_with_margin.width + panel3_with_margin.width
max_height = max(panel1_with_margin.height, panel2_with_margin.height, panel3_with_margin.height)
combined_image = Image.new('RGB', (total_width, max_height), (255, 255, 255))
combined_image.paste(panel1_with_margin, (0, 0))
combined_image.paste(panel2_with_margin, (panel1_with_margin.width, 0))
combined_image.paste(panel3_with_margin, (panel1_with_margin.width + panel2_with_margin.width, 0))

#Add mirroring and 3d effect here
#...Missed part of the code...

# Save the combined image
combined_image.save('combined_image.jpg')

Thanks in advance!

Solution

There are lots of examples of image distortion, 3D-cubes and 3-D boxes using ImageMagick at the command-line here.

If you find something that you can get working on the commandline, you can do it just the same in Python using wand which is a ctypes binding to ImageMagick.