Reader
  • Home
  • About
  • Deals
  • Services
  • Contact

Image Cropping with jQuery, MooTools, Prototype & script.aculo.us

Last updated on March 12th, 2010 by Gabriel Livan

JCrop is a JQuery image cropping plugin that can be implemented easily and quickly into a web application. Its advanced cropping functionality can be integrated in any web-based application without sacrificing power and flexibility. This plugin also features clean and well-organized code that works in most modern browsers.

Features
– Any image can be attached unobtrusively
– Aspect ratio locking is supported
– It supports minSize/maxSize
– Callbacks for selection done, or while moving
– Keyboard support for nudging selection
– API features to create interactivity, including animation
– Support for CSS styling

Browser compatibility
FireFox 3, Safari 3, Opera 9.5, Google Chrome 0.2.x, Internet Explorer 6+

[Go to Project Page | JCrop Implementation Theory | Demos and Examples]

imgAreaSelect

imgAreaSelect is a JQuery plugin useful to select a rectangular area of an image. The image cropping functionality can be easily integrated, as well as other user interface features, such as photo notes (such as those on Flickr).

Features include:
* The look of the selection area can be controlled (border width, selection color etc.)
* Width and height limits for the selection area
* Fixed aspect ratio: Keep exact proportions while selecting the desired area
* Callback functions
* Dynamically changing options
* Keyboard Support

[Go to Project Page | Examples]

mootools-crop

MooCrop is an Image Cropping Utility using the powerful JavaScript framework MooTools.

Features
* Completely customizable CSS styling
* Detects and handles multiple CSS box models
* Allows for masking to be toggled
* Ability to hide resize handles during drag
* Custom events for your own modification
* Relative based positioning rather then absolute (should handle overflow properly)
* Works and retains layouts on floating images.
* Resize from 8 different directions
* Ability to set minimum size limit
* Cleans up nicely, leaving your DOM in its original state when removed.
* Fast!

[Go to Project Page]


uvumitools-crop UvumiTools Crop is a professional and easy to use image cropper script.

A quick feature list
* Set minimum sizes of the selected area
* Keep aspect ratio (or not)
* Real time preview
* Support HTML Resizing
* Callback function
* Can be toggled on and off
* Modify style with CSS
* Fast, even on slow computers
* Change image insider the cropper on the fly

[Go to project page]

JavaScript Image Cropper UI, using Prototype & script.aculo.us allows the user to crop an image using similar features found in commercial image editing software.

screenshot_thumb

Features
* Un-obtrusive
* Based on Prototype and script.aculo.us
* Image editing package styling & functionality, the crop area functions and looks like those found in popular image editing software
* Dynamic inclusion of required styles
* Drag to draw areas
* Shift drag to draw/resize areas as squares
* Selection area can be moved
* Selection area can be resized using resize handles
* Allows dimension ratio limited crop areas
* Allows minimum dimension crop areas
* Allows maximum dimensions crop areas, if both min & max set as the same value then we’ll get a fixed cropper size on the axes as appropriate and the resize handles will not be displayed as appropriate
* Allows dynamic preview of resultant crop (if minimum width & height are provided), this is implemented as a subclass so can be removed if not required
* Movement of selection area by arrow keys (shift + arrow key will move selection area by 10 pixels)
* All operations stay within bounds of image

Browser compatibility
* PC: IE 6 & 5.5, Firefox 1.5, Opera 8.5 (see known issues) & 9.0b
* MAC: Camino 1.0, Firefox 1.5, Safari 2.0

[Go to Project Page | View Demo]

Filed Under: jQuery, MooTools

About Me

Gabriel LivanHey, there! I'm Gabriel Livan, Web Developer, Blogger and Internet Marketer. I love making fast, secure and scalable web applications, running and travelling around the world. I blog about WordPress, site speed & security and quality tools for web professionals. Read more

What are you looking for?

Categories

  • AJAX (22)
  • Deals (10)
  • Design (30)
  • eBooks (2)
  • Flash (19)
  • Freebies (11)
  • General (62)
  • Giveaways (1)
  • Graphics (27)
  • HTML & CSS (35)
    • Frameworks (9)
  • JavaScript (160)
    • Frameworks (8)
    • jQuery (89)
    • MooTools (14)
  • Page Loading Speed (2)
  • Photoshop (3)
  • PHP (113)
  • Reviews (8)
  • SEO (6)
  • Statistics (2)
  • Web Tools (13)
  • WordPress (27)
    • Plugins (15)
    • Snippets (4)
    • Tools (2)
    • Tutorials (6)

Copyright © 2021 · BitRepository.com - All Rights Reserved

  • Home
  • About
  • Contact