Skip to main content

How to crop images via the Upload Widget?

Itay Taragano
Updated

When setting the cropping parameter to true 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.

Once the image has been uploaded, those coordinates that were selected by the user can be used when using our different cropping or resizing methods. For example, you can request an image cropped to the exact coordinates selected in the widget by using a crop mode of 'crop' and 'gravity' of 'custom'. For example:

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, just the selected crop, you can apply an "incoming transformation" and the image will be cropped before being stored in your account. This can be done by adding the same 'c_crop,g_custom' option to the Upload Preset used by the widget:

  • Go to the Upload settings page.
  • Click on the "Edit" link next to the upload preset you use for the widget.
  • Look for "Incoming Transformation" 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.

Now, when the widget uploads a file, we'll crop it to the selected coordinates and save the result to your account. 

Related to

Related articles

Comments

5 comments

Date Votes
  • 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.

    1
  • 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.

    0
  • Jaydeep Kulkarni

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

    0
  • shai

    Hey,
    I try to upload a cropped image but still uncropped appear in my media library.

    widget settings:

        cloudName: '********',
        presetName: '******',
        publicId: ********,
        uploadSignature: generateSignature,
        apiKey: '*********',
        sources: [
          "local",
          "camera",
          "facebook",
          "instagram"
        ],
        multiple: false,
        defaultSource: "local",
        language: getCurrentLanguage(),
        text: translations,
        cropping: true,
        croppingCoordinatesMode: 'custom',
        showSkipCropButton: false,
        croppingAspectRatio: 1,
        croppingShowBackButton: true,

    I have set the 'resize and crop' mode to 'crop' and gravity as 'custom' as suggested in my upload preset settings.

    Thanks :)
    0
  • Shirly Manor

    Hi,

    I couldn't reproduce the issue. can you please use the following code and let me know if that works?

    https://jsfiddle.net/shirlymanor/s85a3qnr/

    -1

Please sign in to leave a comment.