Discussion on Slim Image Cropper, Responsive Uploading and Ratio Cropping Plugin


pqina supports this item


This author's response time can be up to 2 business days.

215 comments found.

In PHP 5.6.30 mb_ereg_replace() leads to an error. As ereg_replace() is depricated since 5.3 the same goes to mb_ereg_replace() – obviously it has been removed silently. It doesn’t exists in my fresh installation. Your really should change slim.php sanitizeFileName() to use preg_replace() as I had to do.

Hi! Thanks so much for the heads up!

Working on a new update right now so will fix this as well.

Update is online now.


sam2985 Purchased

I want to ask for confirmation before removing image from server. I have used data-will-remove method for that, in that case image is removing successfully from server but it is still displaying. It should give browse option. what should i do?

Hi Sam2985, Please can you contact me using the support tab and send me a URL to a test page? Happy to take a look! :-)

Hi!!! I need help … “data-did-*” is not working for me!!! Im using kickstart.min.js Please help me!!!

I’ve replied to your support email. Please use either support or the comment section for questions, not both.

Using slim image cropper in PHP Laravel , the cropper does not load the image if the image source is from Amazon S3 server. please provide a possible solution for me to run slim cropper preloaded with my image.

Hello, Thanks for the quick response. We are looking into enabling the required header on S3. Will update you once they allow us to fetch the content

Hello. It worked. Thanks for the help

No problem! Glad to hear it’s working :-)

Just want to encourage anyone considering buying this to pull the trigger! Fantastic plugin with excellent support.

Thanks so much! :-)

Please add VUE.JS

It’s growing quite popular, will add to todo list.

Just added VueJS wrapper to version 4.10, it’s now awaiting approval.

hi there

how can i get the cropped image (base64 i think) just after the cropped windows is closed so i can place the image in another img src=’’ ?. before uploading.

in otherwords i dont want to use the slim cropped preview for the following reasons 1 when i do .remove it dosnt seem to reset the initial state (ex. the delete and edit button are still there just the image dissapears) 2.i dont want the edit and delete buttons

maybe im doing it wrong? thanks

Hi, Currently on a two week vacation (maternity leave), support is a bit slower than usual, hope to get back to you after the weekend.

Congratulations mate. Enjoy ;)

Thanks! :-)

I think you can use the didConfirm callback for this, then in the callback you can request the data in base64 format using the slim.dataBase64 getter property. The outline of the data object is described on the slim image cropper homepage. I believe the data is in data.output.image

“By default Slim does not resize the output image.” What does it mean? Can it resize the image on the client side? By resize I mean actually reducing the image size, not just reducing ‘dimension’.

Yes, that is the exact scenario. My question is, the ‘scaled down’ process, is it happening on the client-side or the server side? The input image (800×600) or the edited image (400×400) that’s being uploaded to the server?

It’s happening on the client.

Thank you

Hi all, we got the Slim cropper running, very nice. But how can we “reset” the cropper div? We’ve used the API remove() function but that completely removes the cropper div from the DOM. Div looks like:

That only works with the jQuery version (you’d also have to write slim in lowercase, not Slim).

If you’re using the kickstart version you can write:

var cropper = Slim.find( document.querySelector('#myCropper') );

Ah wonderful, we tried getElementById but without the Slim.find call. I see it’s also in your – excellent – documentation. It all works fine now, thank for your help, much appreciated :-)

Should work with getElementById as well (just leave out the #).

Glad to hear it’s working now :-)


statoos Purchased

Awesome plugin! My suggest: have ability to set custom additional buttons.

Thanks! It’s on the list :-) Still months away though as it’s part of a complete rewrite of the product. If you’re interested in updates, I sometimes post screenshots and animations on Twitter.

Hi, is it posisble to upload via drag an drop but the image is originating from the same page? To further illustrate—https://db.tt/uHCWzBkDOM.

Hi! Thanks for your interest in Slim! Just tested this to be sure, and can confirm this works :-)

Hi there! I can not get my head around on how to implement this great plugin in my asp.net website (vb.net) Is there a code available? I have looked at the php files, but I am unable to ‘translate’ it to vb.net. Any help is more than welcome


pqina Author

I don’t have any experience with asp.net so can’t help out there. I would advice to inspect the data Slim sends to the server (Google Chrome Developer Tools are very useful for this).

If you’re using the data-service attribute you can see the contents of the XHR request using the network tab in the dev tools. It will post a JSON string plus separate FILE objects.

If you’re not using the data-service attribute and posting along with a parent form, the data is sent as a JSON string and the images are encoded in that string as base64 data.


MoniqueRo Purchased

I am posting it along with a parent form (name field, email field etc) through AJAX to save the data to the database and I want to accomplish to save the image on the server.

I am using slim.jquery and am struggling to get the data of slim to send to the server.

This is my Jquery: $('#myCropper').slim({ willSave: function (data, ready) { alert('saving!'); ready(data); console.log(data); }, label: 'Drop or click for the image.', buttonConfirmLabel: 'Oké' })

After all other fields in my form are valid Ajax is called :

$.ajax({ type: 'POST', url: "/handlers/SaveData.ashx", data: { method: "SaveImg", email: $("#TxtEmail").val(), name: $("#TxtName").val(), IMAGE: ???, id: $("#DlVal option:selected").val(), title: $("#TxtTitle"), comment: $("#txtComment") }, dataType: "json", success: function (returnParameters) { emailChecked(returnParameters) }, error: function (jqXHR, textStatus, errorThrown) { handleError(errorThrown); } }); In this Ajax at data: how can I retrieve the value of the image?

pqina Author


You can access the output image using the following statement:
var data = $('#myCropper').slim('dataBase64')[0];

This gives you the base64 image string, which you can then turn into a file on the server.

Please add brightness and contrast and color or bw options.


pqina Author

I’ve added your request to the possible feature list for a future update.

Please add simple video tutorial adding plugin to project with php server side. And please include in this tutorial Vue.js.


pqina Author

Thanks for your feedback. Will consider this.


MoniqueRo Purchased

I have a question regarding the styling.

On the first load of the form is it possible to have a smaller container? If a user gets to the form the initial div is so large. So what I want to accomplish is that on first load the container is small and when a picture is selected the SLIM container gets adjusted to the right size


pqina Author

Hi! You could set a max-width style on the slim container div. Something like this:

.slim[data-state*="empty"]{ max-width: 200px; }

That should limit the size of the slim cropper when it’s empty.