By :
pqina
Published on Thursday, May 26, 2016,21:41:08 in JavaScript Scripts
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
Setup to upload via AJAX or Form POST
A Treat for the Eyes
Slim live demo and docs can be found here
Slim is build using the latest HTML 5 and CSS 3 techniques.
Slim ships with extensive documentation on all itâs capabilities.
Just contact me through my
CodeCanyon profile, Iâm happy to help you out with any questions or problems.
âQuick response to questions and a great product.â
miltonarcos
âJust wonderful plugin with great support!â
coinzz
âVery good crop script⦠Best I could find out there.â
gtlondon
âThanks for your very fast reply to my questions!â
custompixel
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.
Browser Cropping
Cropping is done on the client, no image manipulation script required on the server.
Ratio
Specify the output ratio, be it square (1:1), portrat(3:4), movie mode (16:9) or a custom ratio, Slim has got you covered.
AutoCrop
Slim will automatically crop the image to best fit the specified output ratio.
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.
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.
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 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
BROWSER SUPPORT
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.
FILES
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.
VERSION HISTORY
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
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.
Share This Product