How to crop images via the Upload Widget?

When setting the cropping parameter to server in the Upload Widget's options, the custom cropping coordinates are passed to Cloudinary as part of the image's metadata, and the full-sized image is uploaded by default. If you'd like to keep the original image as is and deliver the cropped version based on the custom coordinates, you can use a URL like:

http://res.cloudinary.com/<cloud_name>/image/upload/c_crop,g_custom/my_image.jpg

If you don't want to store the original full-sized image and only store the cropped image based on the given coordinates, you can apply an incoming transformation and the image will be cropped before being stored in your account. To accomplish this:

  • Go to the Upload settings page.
  • Click on the "Edit" link next to the upload preset you use for the widget.
  • Look for "Transformations" and click on the "Edit" link next to it.
  • Under "Resize & crop" set the "Mode" to "Crop" and the "Gravity" to "Custom".
  • Click on "OK" and Save the changes.
Have more questions? Submit a request

Comments

  • Avatar
    Jaydeep Kulkarni

    This doesn't seem to be working.
    Even after I explicitly crop the pic , it always seems that the 'uncropped' version of the image gets uploaded.
    This is how I have initialised the widget :
    cloudinary.openUploadWidget({
    cloud_name: '*******',
    upload_preset: '***',
    folder : '*******',
    multiple: false,
    resource_type: 'raw',
    client_allowed_formats: ['jpg', 'jpeg', 'png', 'gif', 'svg'],
    max_file_size: 1048576,
    cropping : 'server',
    cropping_aspect_ratio : 1
    },
    I have set the 'resize and crop' mode to 'crop' and gravity as 'custom' as suggested in my upload preset settings.
    Could you please help.
    Thanks.

  • Avatar
    Nadav Ofir

    Hi, resources of type RAW are not allowed for transformations of any sort.
    You'll have to set the resource type to IMAGE in order for it to take effect.

  • Avatar
    Jaydeep Kulkarni

    Thanks Nadav, it works pretty well after setting resource_type to image.
    Cheers.

Powered by Zendesk