Slim Image Cropper, Responsive Uploading and Ratio Cropping Plugin

Description

Crop images with Slim, a cross platform Image Cropping and Uploading plugin. It’s very easy to setup and features beautiful graphics and animations.

Contact support

Demo

Quick feature overview:

  • Responsive and beautifully animated
  • Optimised for fast performance
  • Crop, rotate and upload images
  • Supports touch interaction on mobile devices
  • Auto correct mobile image rotation
  • Can upload over AJAX or form POST
  • Auto crop and auto resize of images
  • Rotate images
  • Loads dropped images and URLs
  • A treat for the eyes

Slim is build to work standalone but is very flexible, the download package offers wrappers for:

  • jQuery
  • React
  • Vue
  • Angular
  • Angular 1.x

Slim integrates nicely with both Bootstrap and Foundation.

WordPress version

Give it a test run:

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 us through the form on the Support page, we’re always happy to help out with any questions or problems.

Reviews

“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.”

5 stars by jacurtis

“Quick response to questions and a great product.”

5 stars by miltonarcos

“Perfect … easy to integrate and fast code updates”

5 stars by mintao

“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!”

5 stars by BlackSnowDigital

“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.”

5 stars by Kendysond

“Excellent support & awesome plugin!”

5 stars by martneli

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.

  • React, Angular and Vue Wrappers | The package contains wrapper modules for both Angular 1.x, 2.0 and React.

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

  • Change Labels | All texts and icons can be configured using data attributes.

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

  • JavaScript API | You can control the cropper from JavaScript or jQuery whichever you like best. The extensive API documentation should give you a good idea on what is possible with Slim.

  • And Much More | Read about all Slim’s features

CUSTOM FEATURES

The following articles describe how to add additional much requested functionality to Slim.

BROWSER SUPPORT

  • Chrome
  • Firefox
  • Edge
  • Internet Explorer 10+
  • Opera (Not Opera mini as it lacks the required Canvas features)
  • Safari 8+ on OSX & iOS 8.4+ (Safari on Windows is no longer supported by Apple)
  • Android 4.4.4+

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

FILES

  • Installation instructions
  • Example project
  • All CSS and JavaScript files for various project types.
  • PHP Upload Script. Plus examples on how to use for From POST and AJAX uploading. The product website uses these exact same scripts for uploading.

THANKS

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.

HISTORY

5.3.1 | 15-04-2020

  • Fix issue where image orientation was incorrectly interpreted on new iOS Safari and Chrome versions.

5.3.0 | 30-03-2020

  • Add new Angular adapters.

5.2.1 | 26-08-2019

  • Further improvements to canvas memory usage.

5.2.0 | 19-08-2019

  • Add auto-setting of .htaccess file if none is present.
  • Add additional information on securing your server to the readme file.
  • Improve iOS canvas memory management.

5.1.2 | 28-05-2019

  • Fix type in LocalUrlProblem.
  • Fix problem where Safari 10 would upload zero byte files.

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.

5.0.1 | 29-11-2018

  • Fix correctly loading of local file urls when in cordova environment.

5.0.0 | 31-10-2018

  • Optimize memory usage as iOS 12 has a limit on max canvas memory usage.
  • Callbacks no longer receive a duplicate of the output canvas (too costly on iOS 12).
  • Fix problem where internal timers would not be cleaned up immidiately resulting in a miniscule memory leak.
  • Add internalCanvasSizeLowMemory setting which can be used to lower the internal canvas size on devices with low canvas memory devices (iOS).

4.19.0 | 05-08-2018

  • Add automatic formatting to post parameter so it accepts both strings and arrays.

4.18.1 | 08-07-2018

  • Fix problem where Firefox would throw a “modifiedDate is read only” error when loading a File object

4.18.0 | 29-05-2018

  • Add data-will-crop-initial callback, a method to set an initial crop rectangle based on the input image. Useful when combining Slim with automatic face detection libraries.

4.17.1 | 28-05-2018

  • Fix problem where editor would not work when min size is equal to input image size

4.17.0 | 14-05-2018

  • Add error state for invalid local urls

4.16.5 | 08-05-2018

  • Fix problem where Vue would throw an error when destroying the component.

4.16.4 | 25-04-2018

  • Fix problem where dragging the crop area on iOS would move the viewport.

4.16.3 | 08-03-2018

  • Fix problem where autocrop would not work correctly.

4.16.2 | 21-02-2018

  • Fix problem where multiple taps on the rotate button rendered an incorrect crop rectangle.

4.16.1 | 01-02-2018

  • 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.
  • Add data-did-throw-error to monitor errors.

4.15.0 | 18-12-2017

  • Add data-upload-method to override request method type, defaults to POST

4.14.5 | 16-11-2017

  • Fixed problem where square images could be scaled down to below the min size

4.14.4 | 16-10-2017

  • Fixed problem where Safari would not open editor a second time in certain instances.

4.14.3 | 12-09-2017

  • Fixed problem where dropped base64 data would not load correctly and throw an error.

4.14.2 | 24-08-2017

  • Add setForceSize method to set new forced size after load.

4.14.1 | 15-08-2017

  • Fixed problem where adding new files was no longer possible on IE11 when using instant edit mode.
  • Fixed problem where fetch method would no longer load remote urls.

4.14.0 | 01-08-2017

  • Improved will-request callback, will now also receive the data object being sent to the server.

4.13.0 | 22-07-2017

  • Add blockPush option to load method, so when calling the load method from javascript its possible to prevent auto push.
  • Add will-fetch and will-load callbacks that can be used to modify the XMLHttpRequest objects for fetching and loading image urls, similar to will-request.

4.12.0 | 11-07-2017

  • Add requestOutput method to request the current output data.
  • Add data-force-min-size attribute, set to false to allow output images to be smaller than required input, true by default.

4.11.1 | 10-07-2017

  • Add data-service-format attribute to determine service output format when using a service function. Set to "file" to send a file.
  • Fix problem where wrapping label caused file browse event to fire twice.
  • Fix problem where Slim would throw an error if post was set to 'actions'.
  • Fix problem where file dropped on button would be opened by browser.

4.11.0 | 05-06-2017

  • Add logic that copies JPEG meta data to output file when uploading async. Enable by setting data-copy-image-head to true.
  • Fix Vue wrapper as it did not copy over component inner elements.

4.10.1 | 01-06-2017

  • Fix magic quote problems on PHP versions prior to 5.4.
  • Fix supported test on UC Browser, now correctly reports false.

4.10.0 | 18-05-2017

  • Add VueJS wrapper.
  • Add initialImage property for React, Angular 2 and VueJS.
  • Improved Angular 2 wrapper code formatting.
  • Improved React Module to use JavaScript Classes instead of React.createClass

4.9.0 | 16-05-2017

  • Add slim instance as last argument to all callback methods so it’s easier to access Slim when the scope of the callback has been changed.

4.8.0 | 09-05-2017

  • Add attribute data-popover-class-name to set custom class name to popover element on open.
  • Add scalar rounding correction when data-min-size is set so output image is always minimum the min size, standard min size has been adjusted to 0,0.
  • Fix bug where fetching remote images would not work if fetcher url contained query string

4.7.1 | 04-05-2017

  • Add function that reads a hidden input with Slim data object as initial image.
  • Add data-initial-image for use in Angular 1.x template.

4.7.0 | 25-04-2017

  • Fixed function scope for data-service method, was not scoped to slim instance.
  • Improved Angular 1.x wrapper, now supports custom service function and better handles different project setups. Note that this is a breaking change, some code adjustments are required.
  • Improved Slim.php regex implementations (moved from mb_ereg to preg).

4.6.5 | 20-04-2017

  • Add option to set data-service to a function, Slim will then call this function and pass the FormData object for upload.

4.6.4 | 30-03-2017

  • Fixed bug where cancel event never fired

4.6.3 | 21-03-2017

  • Fixed bug where crop offsets was a negative value which in turn caused problems in IE and Edge.
  • Fixed bug where cropper without file input would throw an error on slow connections.

4.6.2 | 17-03-2017

  • Fixed bug in IE11 that prevented files from being dropped.
  • Improved image resize algorithm output quality

4.6.1 | 10-03-2017

  • Add data-drop-replace attribute which when set to false will disable drop image to replace currently loaded image.
  • Fixed problem where long error labels would break out of cropper area on IE11.

4.6.0 | 08-03-2017

  • Add drop URL functionality. You can now drop a URL and Slim will load the remote image.
  • Add data-did-confirm callback which is called after the user presses the confirm button in the image editor
  • Add data-did-cancel callback which is called after the user presses the cancel button in the image editor
  • Add rotation and filter information to PHP data object.
  • Improved drop area so user can drop a new image to replace the current image
  • Improved .supported property, now more accurate. Will return false when not supported, will show error message when creating a cropper on unsupported browser.
  • Improved Angular 1.x wrapper, now supports data binding for attributes mapping to internal setter methods (service, ratio, size and rotation).
  • Fixed problem where web page would scroll behind image editor while dragging crop area.
  • 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.
  • Add option to pass server errors to client status message using the data-did-receive-server-error handler.

4.2.1 | 01-02-2017

  • Fix problem with data-push progress indicator not being accurate.
  • Fix problem where data was saved to hidden input before confirming instant edit crop.
  • Now hides label when a preview image is shown.
  • Add label to indicate loading image state.
  • Improved loading indicator visibility while loading image.

4.2.0 | 30-01-2017

  • Fix problem with image position when opening cropper after rotation.
  • 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.
  • Add data-rotation attribute to set initial image rotation

4.1.6 | 29-01-2017

  • Fix file drop problems on Firefox.

4.1.5 | 28-01-2017

  • Added style resets to image elements inside Slim to override any theme layout styles.

4.1.4 | 27-01-2017

  • 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.
  • Fixed progress indicator not showing 100% progress state.

4.1.2 | 16-01-2017

  • Fixed problem where Slim.destroy did not correctly remove image editor element.
  • Fixed problem where server response status codes between 200 and 300 where not interpreted as successful.

4.1.1 | 16-12-2016

  • Improved slim handling size information. Now also accepts string based dimensions on options object.

4.1.0 | 15-12-2016

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

Vendor Information

  • Store Name: pqina
  • Vendor: pqina
  • No ratings found yet!