How can I create a collage out of several uploaded images?

A collage can be easily generated by using the overlay transformation.

Consider the following 4 uploaded images:
http://res.cloudinary.com/demo/image/upload/face_left.jpg
http://res.cloudinary.com/demo/image/upload/face_top.jpg
http://res.cloudinary.com/demo/image/upload/woman1.jpg
http://res.cloudinary.com/demo/image/upload/butterfly.jpg

The next URL will generate a collage, based on the first image (face_left) overlaid with the other three. All images are cropped to the same sizes (with "face detection" gravity) and differently located within the frame:

http://res.cloudinary.com/demo/image/upload/c_thumb,g_faces,h_160,w_200/c_thumb,g_faces,h_160,l_butterfly,w_200/fl_layer_apply,g_north_west,x_210/c_thumb,g_faces,h_160,l_woman1,w_200/fl_layer_apply,g_north_west,y_170/c_thumb,g_faces,h_160,l_front_face,w_200/fl_layer_apply,g_north_west,x_210,y_170/face_left

Notice the use of fl_layer_apply for applying transformations to the overlaid image rather than to the whole generated collage.

More information on how to manipulate overlaid images can be read in the following blog post:
http://cloudinary.com/blog/transform_your_image_overlays_with_on_the_fly_manipulation

Have more questions? Submit a request

Comments

Powered by Zendesk