Cropping with a background color (crop area only)

David Royer

May 01, 2019 13:41

Hi, 

I'm trying to create circular avatars where the background of the circle is white. I can't figure out how to crop the white background. I don't want to have a border on my image.

Not working URL:

• https://res.cloudinary.com/demo/image/upload/ar_1,r_max,c_fill,g_face/shoes.png
• https://res.cloudinary.com/demo/image/upload/b_white/ar_1,r_max,c_fill,g_face/shoes.png

Thanks

0

• 

  Raz Ziv

  May 02, 2019 19:21

  Hi David,

  The Background color transformation is always applied last, even if set in the first component of a chained transformation.

  With that being said, there is a way to get the end result you are trying to achieve but it requires adding the background as an underlay to the original image.

  You first need to upload a 1-pixel white image, which can then be used as an underlay to all of your circular avatars.

  Once the 1-pixel image is available on your account, you can use it as follows to get the desired result:

  https://res.cloudinary.com/demo/image/upload/ar_1,r_max,c_fill,g_face/u_1px-white,h_1.0,w_1.0,fl_relative,r_max/shoes.png
  
  What I did is applied the underlay while making sure I expand the 1px to the exact same dimensions and radius as the main image. The height and width of the underlay were set to 100% along with the relative flag to create the relevant expansion, while the max radius was needed for no overflow of the white background.

  If you want to download the 1-pixel image and upload it to your account, you can use the following URL:

  https://res.cloudinary.com/demo/image/upload/1px-white.png

  
  Best,
  Raz

   

  1
• 

  Robert Petitto

  March 02, 2020 16:32

  @Raz — I did this and it worked beautifully, except that my overlay (icon in the bottom left corner) is now below my image.  Here's the URL—please advise.

   

   

  https://res.cloudinary.com/rpetitto/image/fetch/w_200,h_200,c_fill,g_auto,r_max,ar_1,b_white/u_1px-white_thedf6,h_1.0,w_1.0,fl_relative,r_max/e_outline:10,co_white/e_outline:20,co_bd900a/l_fetch:aHR0cHM6Ly9yZXMuY2xvdWRpbmFyeS5jb20vcnBldGl0dG8vaW1hZ2UvdXBsb2FkL3YxNTgyNjUyODMwL1JhbmtzL1I0X2J3cGtyci5wbmc=/fl_layer_apply,g_south_west,c_lpad,h_90,w_90,e_outline:5,co_white/https%3A%2F%2Ffirebasestorage.googleapis.com%2Fv0%2Fb%2Fglide-prod.appspot.com%2Fo%2Fimg-uploads%252F8LySZKbfDJGQX4nHXjjm%252Fe95017.png%3Falt%3Dmedia

  0
• 

  Robert Petitto

  March 02, 2020 16:35

  figured it out: /u_1px-white_thedf6/fl_layer_apply,h_1.0

  0
• 

  Moisés Rodan

  August 21, 2020 02:32 Edited

  To get the 1x1 px image: http://www.1x1px.me/

  edit: If you are doing a website. Style the image in css and will take the website background.

  .img-circle{ radius: 50% }

  1
• 

  Itay Taragano

  August 24, 2020 17:43

  Thank you Moisés, that's a helpful site indeed!

  Note that Cloudinary also supports generating any 1x1 pixel "image" of your choice, e.g.,

  https://res.cloudinary.com/demo/image/upload/w_1,h_1/e_colorize,co_red/sample.jpg

  or by RGB value:

  https://res.cloudinary.com/demo/image/upload/w_1,h_1/e_colorize,co_rgb:ff0000/sample.jpg

  If you'd like it to be semi-transparent, then change the format to PNG and add two more digits to the end of the RGB value, representing the opacity percentage (00-99), e.g.:

  https://res.cloudinary.com/demo/image/upload/w_1,h_1/e_colorize,co_rgb:ff000020/sample.png

  or fully transparent:

  https://res.cloudinary.com/demo/image/upload/w_1,h_1/o_0/sample.png

  0

Post is closed for comments.