Slim is a cross platform Picture Cropping and Importing plugin. It’s very simple to setup and options stunning graphics and animations.
Fast characteristic overview:
- Responsive and fantastically animated
- Optimised for quick efficiency
- Crop, rotate and add pictures
- Helps contact interplay on cell gadgets
- Auto right cell picture rotation
- Can add over AJAX or type POST
- Auto crop and auto resize of pictures
- A deal with for the eyes
Slim is construct to work standalone however could be very versatile and can be utilized with:
- Angular 1.x and a couple of.zero
Give it a check run:
- Slim stay demo
- Slim documentation
Slim ships with intensive documentation on all it’s capabilities.
Simply contact us by the shape on the Assist web page, we’re at all times completely happy to assist out with any questions or issues.
“This plugin is unimaginable. It is extremely properly constructed and really properly documented. The design is clearly very clear and smooth as you may inform from the demo, however I used to be shocked how simple it was to implement. The vendor even supplies server facet scripts that you should utilize to simply deal with the output and saving the photographs. The variety of customizable choices is unimaginable and setup is very easy.”
“Fast response to questions and an important product.”
“Excellent … simple to combine and quick code updates”
“Nice, simple to make use of plugin for picture add and cropping. Modern design that may match the feel and appear of any trendy web site. Had some points with implementing into an advanced ajax type and the shopper assist was very good! Nice job!”
“This plugin positively scores 100000000% with it’s superior assist. The writer replied all my questions in file time and even went so far as releasing an replace to repair a bug the identical day I complained about it. That is positively among the finest plugins on Envato for picture manipulation and a should have for each web site.”
“Glorious assist & superior plugin!”
Lovely Animations | Right now, it’s all a few good and easy person expertise, that is the place Slim delivers huge time.
Responsive | This present day, after all this plugin is responsive.
Cell Pleasant | Slim has been optimized to additionally work with contact enter on cell gadgets.
Browser Cropping | Cropping is finished on the shopper, no picture manipulation script required on the server.
Crop | Specify the output ratio, be it sq. (1:1), portrait (three:four), film mode (16:9) a customized ratio or the ratio of the enter picture, Slim has acquired you lined.
Rotate | Rotate the picture to a 90, 180 or 270 levels angle.
AutoCrop | Slim will routinely crop the picture to finest match the required output ratio.
AutoRotate | Cell gadgets can embed rotation info in pictures, this usually leads to rotated or incorrectly learn imagery. Slim routinely corrects this and presents the photograph the way in which it was meant.
AutoSize | Specify the utmost dimension of the output picture and Slim will scale down the picture to suit completely. Tip: Use AutoSize with a sq. ratio to rapidly crop avatars.
AJAX and Type POST | Add cropped pictures with AJAX or with a standard type put up. When utilizing AJAX Slim reveals a neat progress indicator.
Very Quick | Slim’s code is optimized for efficiency. On high of optimum code paths, Slims animations help in making the cropping expertise really feel easy and quick.
Standalone | No client-side or server-side frameworks or libraries are required.
PHP Helper Class | Useful PHP helper class included. This makes it simple so that you can get to the uploaded pictures. For those who’re planning to make use of Slim with ASP.Internet / NodeJS or another server facet language this file ought to provide you with an excellent indication on the right way to setup Slim on the server.
Bootstrap and Basis Assist | Examined and works properly with each Bootstrap and Basis.
Angular and React Wrappers | The bundle incorporates wrapper modules for each Angular 1.x, 2.zero and React.
Simple to Configure | Establishing Slim is a matter of including some knowledge attributes to your HTML and presto, you’re able to crop and add pictures.
Edit Server Photos | Slim may also load pictures by way of URL, this lets you use Slim to rapidly crop server pictures.
Change Labels | All texts and icons will be configured utilizing knowledge attributes.
And A lot Extra | Examine all Slim’s options
- Web Explorer 10+
- Safari OSX & iOS (Safari on Home windows is now not supported by Apple)
- Android (Not all Android gadgets behave the identical, ought to work on most trendy Android gadgets)
- Set up directions
- Instance venture
- PHP Add Script. Plus examples on the right way to use for From POST and AJAX importing. The product web site makes use of these very same scripts for importing.
Slim makes use of SVG icons made by Egor Rumyantsev, these icons are licensed beneath Inventive Commons three.zero BY.
For animations Slim makes use of Snabbt.js, blurring is accomplished utilizing Stack Blur and pictures are reworked in to manageable canvas components with LoadImage. All three libraries obtainable for business use beneath the MIT license.
three.three.1 | 27-10-2016
- Improved React wrapper so works with server rendering.
- Improved PHP file documentation.
- Fastened data-force-type attribute, it was not setting the pressure sort accurately.
- Fastened React Unknown Prop Warning.
- Fastened drawback the place crop output didn’t conform to minimal dimension / ratio.
- Fastened rotate button title not being set accurately.
- Fastened rotate button dimension which was a bit bit small.
three.three.zero | 19-10-2016
- Added meta property to choices object so metadata can now be handed on handbook init.
- Improved metadata attribute. Information set by the attribute is now obtainable on init.
- Improved and optimized attribute parsing logic.
three.2.zero | 15-10-2016
- Added meta attribute to rapidly add meta knowledge to server request.
- Added possibility to vary rotate button title and sophistication title.
three.1.1 | 29-09-2016
- Added willRequest callback technique to intercept XMLHttpRequest to make it attainable so as to add customized request headers.
- Added instance on the right way to take away picture recordsdata from the server after the person faucets the bin button.
- Improved file title safety in Slim PHP script.
three.1.zero | 23-09-2016
- Added rotation operate. Photos can now be rotated 90, 180 or 270 levels utilizing a button within the popup.
three.zero.three | 06-09-2016
- Fastened a extreme bug with the earlier replace the place deciding on a brand new picture would now not work.
- Improved Angular 1.x plugin internal workings.
three.zero.2 | 05-09-2016
- Fastened drawback the place Base64 pictures wouldn’t load on Safari due to cross origin associated errors.
three.zero.1 | 21-08-2016
- Fastened jQuery constructor bug, the place creating croppers would solely work by passing an choices object.
three.zero.zero | 19-08-2016
This model incorporates modifications to the jQuery API. These are small however incompatible with the earlier model of Slim. The documentation has been up to date to obviously illustrate all of the modifications.
- Improved jQuery API, now extra in step with different jQuery plugins.
- Improved parsing of knowledge uris now solely assessments in opposition to preliminary set of characters.
2.three.2 | 12-08-2016
- Fastened drawback the place second try at cropping picture would incorrectly render cropping controls.
2.three.1 | 09-08-2016
- Fastened blocked web page controls after closing editor on outdated iOS variations and outdated Android browsers.
2.three.zero | 06-08-2016
- Added property to replace
dimensionoutput after initialisation.
- Added property to replace
- Fastened bug the place Slim wouldn’t operate on sure Android browsers.
2.2.1 | 28-07-2016
- Added Slim ES6 Module to be used with React and Angular 2
- Improved React part setup
- Improved Angular part setup
- Improved Angular 2 part setup
- Fastened mimetype array issues attributable to areas
- Fastened React module by including exports
2.2.zero | 21-07-2016
- Added Slim React part
- Added Slim Angular directive
- Added Slim Angular 2 part
data-save-initial-imageattribute which when set to
truesaves preliminary picture knowledge after initialisation.
- Added public crop technique
crop(rect, callback), this technique expects enter to stick to bounds of picture and the picture ratio.
- Added public
edit()technique to summon the editor manually
- Added on the spot edit mode, set
data-instant-editto true to summon the picture editor on file drop
data-force-type, set to jpg or png to pressure the output sort.
- Added fallback for recordsdata with out extension, Slim now treats these recordsdata as png’s.
- Improved dealing with of server response. If server responds with object and object incorporates standing property, checks whether it is “failure” in that case, throws “unknown error”.
- Fastened Web Explorer 10 drawback the place second file add would now not work.
- Fastened issues with extensions being uppercase
- Fastened rendering issues on older iOS browsers
- Eliminated stray log assertion in model 2.1.zero
- Eliminated minified variations of Commonjs and AMD wrappers as these will in all probability be minified in a customized construct step
2.1.zero | 12-07-2016
didSavetechnique which known as after saving the info
.dataBase64property which returns the info in last type (just like the format by which it’s saved / despatched to the server)
- Added JPEG compression management property
data-jpeg-compressionfor output picture
- Added fundamental Slim instance setup to bundle
- Improved error testing in server scripts, if an output picture is empty, it’s now not saved.
- Fastened default JPEG compression being 100% leading to greater file add then crucial. Compression now defaults to browser which is round 90%.
- Fastened question string in url inflicting issues
- Fastened non current file title would trigger issues
- Fastened bug the place Safari wouldn’t load the identical picture twice
- Fastened CSS icons not working in uncompressed “slim.css”
- Fastened jQuery strategies not returning Slim return values
- Eliminated automated changing on preview picture by uploaded server model
2.zero.zero | 07-07-2016
This model incorporates modifications to callback names and callback scope, if you happen to replace from a earlier variations you’ll need to rename the callback strategies (actual modifications are outlined under).
- Adjustments between Slim variations at the moment are added to bundle and will be discovered within the file “modifications.html”
- Streamlined callback strategies, switched to did / will syntax.
thisin a callback now refers to Slim occasion it belongs to.
onInit(slim)has been modified to
onComplete(error, response)has been modified to
didUpload(error, knowledge, response)
onRemove(slim, knowledge)has been modified to
onBeforeRemove(slim, take away)has been modified to
willRemove(knowledge, take away)
onTransform(knowledge, prepared)has been modified to
onSave(knowledge, prepared)has been modified to
- Fastened obtain button not engaged on Firefox
- Fastened obtain button not engaged on Web Explorer
- Fastened standing messages not being eliminated after click on on file enter
- Fastened use of “picture/*” settle for attribute not accurately passing sorts to dropper
- Fastened invalid file message not displaying on Home windows and Linux when importing recordsdata with file add dialog
- Fastened displaying beforehand loaded picture when importing picture with identical title
- Added standing message when picture is loaded that’s smaller then knowledge min dimension
- Added didLoad technique to permit customized validation of person enter
- Added aspect getter,
.aspectnow returns root aspect of Slim cropper. Mixed with the mounted callback scope now you can use jQuery
$(this.aspect)inside a callback to check with the basis of the cropper.
- Added recursive mode to
mkdirin “Slim.php” technique so
saveFilecan now additionally create sub directories like
foo/bar/as a substitute of solely
- Improved output, now solely updates subject worth when person makes modifications, except is single picture cropper
- Improved save callback, now solely get’s referred to as when person makes modifications, except is single picture cropper
- Up to date docs
1.1.1 | 27-06-2016
- Fastened bug the place free ratio cropper space didn’t scale correctly.
onBeforeRemovalcallback so you may optionally ask if the person is bound of a picture removing.
1.1.zero | 23-06-2016
- Added choice to set preliminary crop coordinates utilizing
- Added property to retrieve a clone of the present crop knowledge
- Added characteristic the place Slim cleans knowledge despatched to server however leaves
metaproperty alone for customized values.
- Added flag to knowledge object to point crop sort (‘auto’, ‘handbook’ or ‘preliminary’ based mostly on sort of crop).
- Improved async importing performance. The server response (together with the file title and path) is now saved in a hidden subject to unlock this knowledge when submitting the shape
- Improved load technique, it now returns ensuing knowledge object in callback
- Improved efficiency when Slim is just not hooked up to the DOM
- Fastened bug the place on iOS8 the popover would maintain blocking the view after it closed
- Fastened drawback when eradicating file by clicking on Slim, identical file couldn’t be loaded twice
- Eliminated “invalid response” standing, as any server response is now acceptable for storage in hidden enter.
1.zero.7 | 16-06-2016
- Fastened drawback the place hidden enter was not emptied after take away button press
- Fastened drawback the place sure crop outcomes could be clear on Safari / iOS
- Take away operate now returns knowledge object instantly when calling by way of API
- When setting an preliminary picture, the init technique will now be referred to as after the picture has loaded
- The init technique is now at all times referred to as after the Slim occasion has been created
- Fastened drawback the place Safari wouldn’t restore enter of sort “file” correctly
1.zero.6 | 15-06-2016
- Fastened knowledge object not being handed to take away callback
- Fastened destroy technique not cleansing up correctly
1.zero.5 | 14-06-2016
- Supply recordsdata at the moment are contained within the bundle as properly
- Minified recordsdata at the moment are a bit bit extra compact
- Fastened issues with enhancing a single picture
- Fastened drawback the place push possibility wouldn’t push after including a brand new picture
- Fastened drawback the place push possibility wouldn’t push preliminary picture
- Fastened drawback the place enhancing a single picture would present take away button
- Renamed the “reset” finish level to “take away”
1.zero.four | 10-06-2016
- Fastened push possibility immediately importing on web page load
- Now accepts cross origin urls. Make certain cross origin requests are configured accurately on the distant server.
- Now has the flexibility to load Information URI sources. File title can be set to “unknown”
1.zero.three | 07-06-2016
- Add choice to preload server picture
- Fastened bug the place second file wouldn’t be allowed to drop on Firefox
- Fastened bug the place blurring in picture editor was incorrect when loading a brand new picture
- Fastened bug the place knowledge dimension wouldn’t resize greater portrait pictures correctly
- Added onRemove proeprty so it’s attainable to deal with removing of pictures
- Added onInit property so it’s attainable to detect when Slim has initialised
- Slim.create now returns the created Slim occasion
- Slim.parse now returns an array of created Slim situations
1.zero.2 | 03-06-2016
- Fastened drawback the place picture editor button captions wouldn’t change to set labels
1.zero.1 | 02-06-2016
- Fastened drawback the place picture was uploaded as PNG as a substitute of JPEG
- Added performance which corrects JPEGs uploaded as PNGs (which generally occurs on older browsers). Slim now makes certain the extension matches the picture format.
- Improved efficiency of picture editor
- Fastened window resizing render issues in picture editor
- Plus varied small code optimisations
1.zero.zero | 26-05-2016
- Preliminary launch