Kinja Image Tricks - Distort

/l_wwgo2wyjtpnsbdcqe9cw,e_distort:466:171:650:217:600:343:415:290,x_-30,y_-65/x4wyo9uqjtmcwnu3hthy.jpg
Photo: NYMag

Ok, last one. Have you ever wanted to overlay an image on top of another, but the image is in perspective? Simply overlaying it wouldn’t look nice, so, what can we do?

Kinja uses an Image Management service that is capable of doing URL-based transformations on the images it uses, so, we can use that feature to easily resize overlay one of them and also distort it into perspective without having to manually download them, edit them, and upload them!

Advertisement

We already saw how to overlay a picture on top of another...

But in case you don’t want to click that... we first need the images to be uploaded to Kinja in order to get an ImageID. For this example, we’ll use this image where we aren’t facing it directly, but the person playing it does, as the base:

Advertisement

(The URL for this one is https://i.kinja-img.com/gawker-media/image/upload/x4wyo9uqjtmcwnu3hthy.jpg )

...and the image we want to put on top is this one:

Advertisement

(https://i.kinja-img.com/gawker-media/image/upload/wwgo2wyjtpnsbdcqe9cw.jpg)

The science behind the distortion is that, having a rectangle with coordinates X1Y1 through X4Y4, where 1-4 are the coordinates of the four corners, we define the distortion with the coordinates X1:Y1:X2:Y2:Y2:X3:Y3:X4:Y4 

Advertisement
It’s better explained with this, tho.
Illustration: Cloudinary

I’ll save you all the calculations for this specific base image and tell you that the coordinates we need to use to distort the overlaid image are 466:171:650:217:600:343:415:290 

Advertisement

Just to brag a little, this image was created combining 4 text overlays with the method we’ve seen in that link; I needed to modify the coordinates of the coordinates so they would be legible on the image itself, but you can see it is almost the same:

(https://i.kinja-img.com/gawker-media/image/upload/l_text:Arial_20:466:171,g_north_west,x_466,y_161,co_white/l_text:Arial_20:650:217,g_north_west,x_630,y_187,co_white/l_text:Arial_20:600:343,g_north_west,x_600,y_353,co_white/l_text:Arial_20:415:290,g_north_west,x_395,y_290,co_white/x4wyo9uqjtmcwnu3hthy.jpg)

Advertisement

So anyway, the final URL template (again, for this base image only) is then:

https://i.kinja-img.com/gawker-media/image/upload/l_wwgo2wyjtpnsbdcqe9cw,e_distort:466:171:650:217:600:343:415:290,x_-30,y_-65/x4wyo9uqjtmcwnu3hthy.jpg

Advertisement

Where l_wwgo2wyjtpnsbdcqe9cw is, as you know, the overlaid image, e_distort:466:171:650:217:600:343:415:290 is the modifier with the coordinates specifically for this base image, and x_-30,y_-65 are position adjustments, again, for this image only.

So, you know the drill, just get an Image ID (let’s say, tiji6mrsalva9dsvy27d)

Advertisement

...and substitute the l_ImageID in the URL emplate, and voilá:

Advertisement

...

Ok, I lied. Turns out that the X_ and Y_ modifiers are also dependent of the size of the overlaid image, and have to be fine-tuned with each new image. But it’s easy to do! Just keep changing the values until you get the correct position:

Advertisement

...and’ll throw an e_trim in there to trim the excess white space around it.

https://i.kinja-img.com/gawker-media/image/upload/l_tiji6mrsalva9dsvy27d,e_distort:466:171:650:217:600:343:415:290,x_283,y_125/e_trim/x4wyo9uqjtmcwnu3hthy.jpg

Advertisement

This post is part of the Sixtay Days of Writting Challenge. Post Count: 30+22


Share This Story