Is is possible to crop an image after uploading

I’m trying to build a plugin, and part of it requires to upload (or choose an already uploaded one) an image, and when it’s done uploading to crop it (a bit like how you change a header image in the WP_Customizer).

I currently have this code code:

Index.php:

<div class="imagearea">
    <div class="noimage">
        <a class="select-image button button-primary button-large">Selecteer een foto</a>
    </div>
</div>

imageUpload.js:

jQuery(document).ready(function (){
jQuery(".select-image").click(function() {
  var custom_uploader = wp.media({
      title: 'Selecteer een afbeelding',
      button: {
        text: 'Selecteer'
      },
      multiple: false
    })
    .on('select', function() {
      var cropper = wp.cropper().open();
    }).open();
});
});

But I then get the error: Uncaught ReferenceError: wp.cropper is not defined

It seems like wp.cropper is not the correct name, while /wp-includes/crop/cropper.js does seem to suggest that on line 39. I’ve also tried some variations of the name (wp.Cropper, WP.cropper, Cropper, etc…)

I’m on WordPress 4.4

1 Answer
1

Untested, but I believe this should work:

jQuery(document).ready(function (){
    jQuery(".select-image").click(function() {
        var custom_uploader = wp.media({
            title: 'Selecteer een afbeelding',
            button: {
                text: 'Selecteer'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            custom_uploader.Jcrop();
        });
        custom_uploader.open();
    });
});

Leave a Comment