background preloader

Outils Web

Facebook Twitter

Javascript

Plupload: Multi-runtime File-Uploader. Map Icons Collection | Google Maps Icons, Map Markers, Free POI Icons, GIS Symbols. Townhouse map marker POI icon. House map marker POI icon. Apartment map marker POI icon. ImgAreaSelect - image selection/cropping jQuery plugin - odyniec.net. ImgAreaSelect is a jQuery plugin for selecting a rectangular area of an image. It allows web developers to easily implement image cropping functionality, as well as other user interface features, such as photo notes (like those on Flickr). Plugin features: Highly configurable Customizable with CSS styling Handles scaled images Keyboard support for moving and resizing the selection Supports callback functions Provides API functions for easier integration with other application components Lightweight — the packed version is just 8KB The plugin works in all major browsers, including Firefox 2+, Opera 9.5+, Google Chrome, Safari 3+, and Internet Explorer 6+.

Live Example Click and drag on the image to select an area. Selection Preview » See more examples Quick Usage Instructions Download the plugin, unzip it, and copy the JavaScript and CSS files to your website/application directory. <head> ... Then, to enable selection on an image, wrap it in a jQuery object and call the imgAreaSelect() method: JavaScript Image Processing Library. What Pixastic is an experimental library which allows you to perform a variety of operations on images using just a bit of JavaScript. The effects supported out of the box include desaturation/greyscale, invert, flipping, brightness/contrast adjustment, hue/saturation, emboss, blur, and many more.

For the full list, see the documentation page. If you have any comments, bug reports or other feedback, don't hesitate to leave a comment here or shoot me an email. You can follow the development of Pixastic as well as other JavaScript experiments on my blog. How Pixastic works by utilizing the HTML5 Canvas element which provides access to raw pixel data, thereby opening up for more advanced image effects. Show me! If you want to see for yourself what Pixastic can do, you can check out the documentation where you will find small demos for all actions No, show me now! If that's not good enough, here's a quick and dirty demo of how to use Pixastic. Example code: Output (mouseover the image): Where Who.