ePrivacy and GPDR Cookie Consent by Cookie Consent

Slim, Image Upload and Ratio Cropping Plugin

Code / JavaScript


Modern cross platform responsive image cropping and uploading. Slim features beautiful animations and graphics. Configuration and implementation are a walk in the park.

As you can see in the demo animation below, you’ll be cropping and uploading images in no time.


Slim is:

  • Responsive and Beautifully Animated
  • Compatible with both Bootstrap and Foundation
  • Super Fast
  • Able to auto crop and resize imagery
  • Capable of Correcting Device Orientation problems
  • Ready for React and Angular projects
  • Setup to upload via AJAX or Form POST
  • A Treat for the Eyes

Slim live demo and docs can be found here

Premium Quality

Slim is build using the latest HTML 5, CSS 3 and JavaScript techniques.

Detailed Documentation

Slim ships with extensive documentation on all it’s capabilities.

Professional Support

Just contact me using the form on the Support page, I’m happy to help out with any questions or problems.


“Quick response to questions and a great product.”
miltonarcos 5 stars

“Just wonderful plugin with great support!”
coinzz 5 stars

“Very good crop script… Best I could find out there.”
gtlondon 5 stars

“Thanks for your very fast reply to my questions!”
custompixel 5 stars


Beautiful Animations

Today, it’s all about a nice and smooth user experience, this is where Slim delivers big time.


In this day and age, of course this plugin is responsive.

Browser Cropping

Cropping is done on the client, no image manipulation script required on the server.


Specify the output ratio, be it square (1:1), portrait(3:4), movie mode (16:9) or a custom ratio, Slim has got you covered.


Slim will automatically crop the image to best fit the specified output ratio.


Specify the maximum size of the output image and Slim will scale down the image to fit perfectly.

Tip: Use AutoSize with a square ratio to quickly crop avatars.

Device Orientation

Mobile devices can embed rotation information in photographs, this often results in rotated or incorrectly read imagery. Slim automatically corrects this and presents the photo the way it should be.

AJAX and Form POST

Upload cropped images with AJAX or with a traditional form post. When using AJAX Slim shows a neat progress indicator.

Very Fast

Of course there’s a maximum amount of data your user can transfer, we can’t help that. But we can make sure Slim itself is not slowing down the users’ device. Slim’s code is optimized for performance.

On top of optimal code paths, Slims animations assist in making the cropping experience seem smooth and fast.


No client-side or server-side frameworks or libraries are required.

PHP Helper Class

Handy PHP helper class included. This makes it easy for you to get to the uploaded images. If you’re planning to use Slim with ASP.Net / NodeJS or any other serverside language this file should give you a good indication on how to setup Slim on the server.

Bootstrap and Foundation Support

Works nicely within Bootstrap and Foundation.

Easy to Configure

Setting up Slim is a matter of adding some data attributes to your HTML and presto, you’re ready to crop and upload images.

Edit Server Images

Slim can also load images via URL, this allows you to use Slim to quickly crop server images.

Tip: Line up server images, Slim will auto crop, do a visual survey, if all is fine, upload back to server.

Vanilla JavaScript and jQuery

Whether you’re an old school JavaScript fanatic or a jQuery lover, Slim’s got you both covered. The package also contains an AMD, CommonJS and Global build version of Slim.

Control Labels

All texts and icons can be configured using data attributes.

JavaScript API

You can control the cropper from your scripts using the JavaScript API.

And Much More

Read about all Slim’s features


  • Chrome
  • Firefox
  • Opera
  • Internet Explorer 10+
  • Safari OSX & iOS (Safari on Windows is no longer supported by Apple)
  • Android (Not all Android devices behave the same, should work on most modern Android devices)

On very old browsers ( older than Internet Explorer 8 ), Slim won’t load due to lack of JavaScript functionality. On Internet Explorer 8 and up it will show an incompatible message.


  • Installation instructions
  • All CSS and JavaScript files for various project setups.
  • PHP Upload Script, plus examples on how to use for From POST and AJAX uploading. The product website uses the exact same scripts for uploading.


Slim makes use of SVG icons made by Egor Rumyantsev, these icons are licensed under Creative Commons 3.0 BY.

For animations Slim makes use of Snabbt.js, blurring is done using Stack Blur and images are transformed in to manageable canvas elements with LoadImage. All three libraries available for commercial use under the MIT license.


3.0.1 | 21-08-2016

  • Fixed jQuery constructor bug, where creating croppers would only work by passing an options object.

3.0.0 | 19-08-2016

This version contains changes to the jQuery API. These are small but incompatible with the previous version of Slim. The documentation has been updated to clearly illustrate all the changes.

  • Improved jQuery API, now more in line with other jQuery plugins.
  • Improved parsing of data uris now only tests against initial set of characters.

2.3.2 | 12-08-2016

  • Fixed problem where second attempt at cropping image would incorrectly render cropping controls.

2.3.1 | 09-08-2016

  • Fixed blocked page controls after closing editor on old iOS versions and old Android browsers.

2.3.0 | 06-08-2016

  • Added property to update size output after initialisation.
  • Added property to update ratio after initialisation.
  • Fixed bug where Slim would not function on certain Android browsers.

2.2.1 | 28-07-2016

  • Added Slim ES6 Module for use with React and Angular 2
  • Improved React component setup
  • Improved Angular component setup
  • Improved Angular 2 component setup
  • Fixed mimetype array problems caused by spaces
  • Fixed React module by adding exports

2.2.0 | 21-07-2016

  • Added Slim React component
  • Added Slim Angular directive
  • Added Slim Angular 2 component
  • Added data-save-initial-image attribute which when set to true saves initial image data after initialisation.
  • Added didTransform callback
  • Added public crop method crop(rect, callback), this method expects input to adhere to bounds of image and the image ratio.
  • Added public edit() method to summon the editor manually
  • Added instant edit mode, set data-instant-edit to true to summon the image editor on file drop
  • Added data-force-type, set to jpg or png to force the output type.
  • Added fallback for files without extension, Slim now treats these files as png’s.
  • Improved handling of server response. If server responds with object and object contains status property, checks if it is “failure” if so, throws “unknown error”.
  • Fixed Internet Explorer 10 problem where second file upload would no longer work.
  • Fixed problems with extensions being uppercase
  • Fixed rendering problems on older iOS browsers
  • Removed stray log statement in version 2.1.0
  • Removed minified versions of Commonjs and AMD wrappers as these will probably be minified in a custom build step

2.1.0 | 12-07-2016

  • Added didSave method which is called after saving the data
  • Added .dataBase64 property which returns the data in final form (similar to the format in which it is saved / sent to the server)
  • Added JPEG compression control property data-jpeg-compression for output image
  • Added basic Slim example setup to package
  • Improved error testing in server scripts, if an output image is empty, it is no longer saved.
  • Fixed default JPEG compression being 100% resulting in bigger file upload then necessary. Compression now defaults to browser which is around 90%.
  • Fixed query string in url causing problems
  • Fixed non existing file name would cause problems
  • Fixed bug where Safari would not load the same image twice
  • Fixed CSS icons not working in uncompressed “slim.css”
  • Fixed jQuery methods not returning Slim return values
  • Removed automatic replacing on preview image by uploaded server version

2.0.0 | 07-07-2016

This version contains changes to callback names and callback scope, if you update from a previous versions you’ll have to rename the callback methods (exact changes are outlined below).

  • Changes between Slim versions are now added to package and can be found in the file “changes.html”
  • Streamlined callback methods, switched to did / will syntax. this in a callback now refers to Slim instance it belongs to.
    • onInit(slim) has been changed to didInit(data)
    • onComplete(error, response) has been changed to didUpload(error, data, response)
    • onRemove(slim, data) has been changed to didRemove(data)
    • onBeforeRemove(slim, remove) has been changed to willRemove(data, remove)
    • onTransform(data, ready) has been changed to willTransform(data, ready)
    • onSave(data, ready) has been changed to willSave(data, ready)
  • Fixed download button not working on Firefox
  • Fixed download button not working on Internet Explorer
  • Fixed status messages not being removed after click on file input
  • Fixed use of “image/*” accept attribute not correctly passing types to dropper
  • Fixed invalid file message not showing on Windows and Linux when uploading files with file upload dialog
  • Fixed showing previously loaded image when uploading image with same name
  • Added status message when image is loaded that is smaller then data min size
  • Added didLoad method to allow custom validation of user input
  • Added element getter, .element now returns root element of Slim cropper. Combined with the fixed callback scope you can now use jQuery $(this.element) within a callback to refer to the root of the cropper.
  • Added recursive mode to mkdir in “Slim.php” method so saveFile can now also create sub directories like foo/bar/ instead of only foo/
  • Improved output, now only updates field value when user makes changes, unless is single image cropper
  • Improved save callback, now only get’s called when user makes changes, unless is single image cropper
  • Updated docs

1.1.1 | 27-06-2016

  • Fixed bug where free ratio cropper area did not scale properly.
  • Added onBeforeRemoval callback so you can optionally ask if the user is sure of a image removal.

1.1.0 | 23-06-2016

  • Added data-on-complete callback
  • Added option to set initial crop coordinates using data-crop or by passing crop options to JavaScript load method
  • Added property to retrieve a clone of the current crop data .data
  • Added feature where Slim cleans data sent to server but leaves meta property alone for custom values.
  • Added flag to data object to indicate crop type (‘auto’, ‘manual’ or ‘initial’ based on type of crop).
  • Improved async uploading functionality. The server response (including the file name and path) is now stored in a hidden field to unlock this data when submitting the form
  • Improved load method, it now returns resulting data object in callback
  • Improved performance when Slim is not attached to the DOM
  • Fixed bug where on iOS8 the popover would keep blocking the view after it closed
  • Fixed problem when removing file by clicking on Slim, same file could not be loaded twice
  • Removed “invalid response” status, as any server response is now acceptable for storage in hidden input.

1.0.7 | 16-06-2016

  • Fixed problem where hidden input was not emptied after remove button press
  • Fixed problem where certain crop results would be transparent on Safari / iOS
  • Remove function now returns data object immediately when calling via API
  • When setting an initial image, the init method will now be called after the image has loaded
  • The init method is now always called after the Slim instance has been created
  • Fixed problem where Safari would not restore input of type “file” properly

1.0.6 | 15-06-2016

  • Fixed data object not being passed to remove callback
  • Fixed destroy method not cleaning up properly

1.0.5 | 14-06-2016

  • Source files are now contained in the package as well
  • Minified files are now a little bit more compact
  • Fixed problems with editing a single image
  • Fixed problem where push option would not push after adding a new image
  • Fixed problem where push option would not push initial image
  • Fixed problem where editing a single image would show remove button
  • Renamed the “reset” end point to “remove”

1.0.4 | 10-06-2016

  • Fixed push option directly uploading on page load
  • Now accepts cross origin urls. Make sure cross origin requests are configured correctly on the remote server.
  • Now has the ability to load Data URI sources. File name will be set to “unknown”

1.0.3 | 07-06-2016

  • Add option to preload server image
  • Fixed bug where second file would not be allowed to drop on Firefox
  • Fixed bug where blurring in image editor was incorrect when loading a new image
  • Fixed bug where data size would not resize bigger portrait images properly
  • Added onRemove proeprty so it’s possible to handle removal of images
  • Added onInit property so it’s possible to detect when Slim has initialised
  • Slim.create now returns the created Slim instance
  • Slim.parse now returns an array of created Slim instances

1.0.2 | 03-06-2016

  • Fixed problem where image editor button captions would not change to set labels

1.0.1 | 02-06-2016

  • Fixed problem where image was uploaded as PNG instead of JPEG
  • Added functionality which corrects JPEGs uploaded as PNGs (which sometimes happens on older browsers). Slim now makes sure the extension matches the image format.
  • Improved performance of image editor
  • Fixed window resizing render problems in image editor
  • Plus various small code optimisations

1.0.0 | 26-05-2016

  • Initial release

Sign in to leave a Comment

A comprehensive listing of high quality commercial and open-source code, themes, plugins and services for your next project.

Join Today