“This plugin is incredible. It is very well built and very well documented. The design is obviously very clean and sleek as you can tell from the demo, but I was surprised how easy it was to implement. The seller even provides server side scripts that you can use to easily handle the output and saving the images. The number of customizable options is incredible and setup is really easy.”

“Great, easy to use plugin for image upload and cropping. Sleek design that will fit the look and feel of any modern website. Had some issues with implementing into a complicated ajax form and the customer support was superb! Great job!”

“This plugin definitely scores 100000000% with it’s awesome support. The author replied all my questions in record time and even went as far as releasing an update to fix a bug the same day I complained about it. This is definitely one of the best plugins on Envato for image manipulation and a must have for every website.”

FEATURES

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

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

Mobile Friendly | Slim has been optimized to also work with touch input on mobile devices.

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

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

Rotate | Rotate the image to a 90, 180 or 270 degrees angle.

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

AutoRotate | 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 was intended.

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

Drop URLs | Loads dropped URLs from other websites just as easy as it loads dropped images.

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 | Slim’s code is optimized for performance. On top of optimal code paths, Slims animations assist in making the cropping experience feel smooth and fast.

Standalone | 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 server side language this file should give you a good indication on how to setup Slim on the server.

Bootstrap and Foundation Support | Tested and works nicely with both Bootstrap and Foundation.

THANKS

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.

HISTORY

5.1.1 | 21-03-2019

Fix typo in data-will-load-canvas attribute.

5.1.0 | 21-03-2019

Fix rounding issues when using min image size.

Fix problem where setRotation would not correctly alter rotation of image editor popup.

Add willLoadCanvas(image, ready) which is called with the image (as a canvas), call ready and supply the image canvas or a new canvas for Slim to use.

5.0.2 | 17-12-2018

Fix problem where Slim tried to render the progress indicator before it was actually visible resulting in an error.

Fix problem where Slim instance was not passed as last argument to service callback.

4.16.0 | 29-12-2017

Add data-device-pixel-ratio setting to control the sharpness of preview images on retina devices. Default is 1. Set to 'auto' to automatically detect. Higher resolution preview images might have a significant performance impact.

Fixed problem where long labels would break out of cropper area on IE11.

Fixed problem where removing an image or loading a new image by file selector would throw an error

4.5.2 | 22-02-2017

Fixed problem where right-to-left text direction would cause problems in the image editor.

4.5.1 | 21-02-2017

Fixed problem where uploading both input and output to server in sync mode would not work.

4.5.0 | 15-02-2017

Improved image resizing algorithm.

Improved file name for unknown files, name is now set to current date and time.

Add data-filter-sharpen attribute, set to value between 0 and 100 to sharpen image after resize. Default is 0, a value between 10 and 20 gives the illusion of improved image quality.

Fixed file name being “undefined” for downloaded files.

4.4.0 | 08-02-2017

Improved async crop output image uploading. Now uploads file instead of base64 encoded data. Set data-upload-base64 to "true" if you wish to still send base64 data. Note that synchronous uploading still sends base64 data as it’s not possible to “write” a file to a file input field.

4.3.0 | 06-02-2017

Improved upload button, will now hide by default when loading initial image, can be enabled with data-save-initial-image.

Improved naming and handling of unknown files, base64 data or file data is now named with current date time.

Fix problem where Slim did automatically set the internal canvas size. This will now have to be supplied manually. The default size has been set to 4096×4096, this means that bigger images will automatically be scaled down.

Improved crop rectangle, it now holds shape when rotating if crop ratio is 1:1 or set to free.

Add rotation and setRotation end points to API to manually set image rotation.

Added internalCanvasSize property. Which can be set to limit the internal canvas size Slim uses to load images. If a browser limits the canvas size this can be used to prevent overflowing the limit. Slim will automatically set this based on your size or forceSize settings.

Improved performance of image editor.

4.1.3 | 18-01-2017

Fixed problem where the progress indicator would literally spiral out of control while uploading a file.

Added setSize and setRatio methods which both have a callback that returns the data after size and ratio have been applied.

Fixed scale of rotate button.

Fixed update of crop rectangle in image editor after ratio change.

4.0.2 | 08-12-2016

Added attribute data-rotate-button which can be set to “false” to hide the rotate button.

Fixed a bug where data-push mode combined with data-instant-edit would push second image before editing.

Fixed problem where download functionality would use input name and type instead of output.

4.0.1 | 23-11-2016

Fixed a bug where data-instant-edit mode would remove image on editor cancel when initial image was set.

4.0.0 | 21-11-2016

The way input and output file names are now stored is a bit different. Input will always be the name of the input file. Output will contain the name as modified by for instance data-force-type. It’s important to test this when upgrading from an earlier version.

Improved input data loading. When posting input data Slim now sends the original file instead of the Base64 version.

Improved sync and async php files, they now save both input and output data when supplied with data-post.

Improved internal image loading logic. Now has more accurate data on image type and size.

Improved usage of memory, Slim now has a smaller memory footprint.

Fixed data-instant-edit where when cancelled the image would still be loaded.

Fixed problem with loading attribute options on IE10

3.4.1 | 20-11-2016

Fix problem where Firefox 50 would prevent files from being dropped.

3.4.0 | 15-11-2016

Add data-force-size attribute which allows forcing the output size to a certain width and height.

3.3.2 | 07-11-2016

Fixes to Angular 2 wrapper to make it work with final version of Angular 2.

Fixes button sizes and padding sizes in image editor.

3.3.1 | 27-10-2016

Improved React wrapper so works with server rendering.

Improved PHP file documentation.

Fixed data-force-type attribute, it was not setting the force type correctly.

Fixed React Unknown Prop Warning.

Fixed problem where crop output did not conform to minimum size / ratio.

Fixed rotate button title not being set correctly.

Fixed rotate button size which was a little bit small.

3.3.0 | 19-10-2016

Added meta property to options object so metadata can now be passed on manual init.

Improved metadata attribute. Data set by the attribute is now available on init.

Improved and optimized attribute parsing logic.

3.2.0 | 15-10-2016

Added meta attribute to quickly add meta data to server request.

Added option to change rotate button title and class name.

3.1.1 | 29-09-2016

Added willRequest callback method to intercept XMLHttpRequest to make it possible to add custom request headers.

Added example on how to remove image files from the server after the user taps the bin button.

Improved file name security in Slim PHP script.

3.1.0 | 23-09-2016

Added rotation function. Images can now be rotated 90, 180 or 270 degrees using a button in the popup.

3.0.3 | 06-09-2016

Fixed a severe bug with the previous update where selecting a new image would no longer work.

Improved Angular 1.x plugin inner workings.

3.0.2 | 05-09-2016

Fixed problem where Base64 images would not load on Safari because of cross origin related errors.

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)

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