How to crop images via the Upload Widget?

Follow

Comments

5 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.

    1
    Comment actions Permalink
  • Avatar
    Jaydeep Kulkarni

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

    0
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink
  • 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.

    0
    Comment actions Permalink
  • Avatar
    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
    Comment actions Permalink

Please sign in to leave a comment.