You can upload to your account any 1x1 solid colored image, for example this 1x1 grey square (you're more than welcomed to upload that one to your account):
http://res.cloudinary.com/demo/image/upload/v1394707379/one_pixel.jpg
Then, apply this image as an overlay while setting it by your required dimensions.
For example, overlaying the 'one_pixel' image, stretching it to 60x60 pixels on top of the "face_left" image:
http://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60/face_left.jpg
In addition, you can colorize the square to any other color, as explained here. For example:
http://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red/face_left.jpg
You can even ask the overlay to be automatically placed on top of a detected face:
http://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face/face_left.jpg
And finally, opacity is supported too:
http://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50/face_left.jpg
Comments
4 comments
Great article, do have a question. How to scale the 1x1 px picture to match dimension of the image of the woman (even if we don't know the dimensions of the image of the woman)?
Hi Michiel,
You can use fl_relative and w_1.0,h_1.0 on the layered box and ask Cloudinary to set its size in relation to the main image. For example:
http://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,e_colorize,co_red,c_fill,o_50,w_1.0,y_1.0,fl_relative.no_overflow/face_left.jpg
For more information on this flag:
https://cloudinary.com/documentation/image_transformation_reference#flags_parameter
Hi, How to add radius to this rectangle?
Hi Nitesh,
You can use the radius (r_ in URLs) transformation. For example, the following would apply the radius effect on the red squared:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50,r_max/f_auto,q_auto/face_left.jpg
But the following would apply it to the entire image:
https://res.cloudinary.com/demo/image/upload/w_200/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50/r_max/f_auto,q_auto/face_left.jpg
The above image is not a circle, unlike the first example because the image is a rectangle. If you resize the image to be a square, then the radius (max) will return a circle. For example:
https://res.cloudinary.com/demo/image/upload/c_crop,h_200,w_200,g_auto/l_one_pixel.png,w_60,h_60,e_colorize,co_red,g_face,o_50/r_max/f_auto,q_auto/face_left.jpg
For more information on possible values you can use for the radius transformation, please see - https://cloudinary.com/documentation/transformation_reference#r_radius
Please sign in to leave a comment.