Crop & Resize on the pages of your sites

Walking through the habr-search, I found out that a ready-made solution for crop-resizing of images was not yet offered on the JavaScript / HTML / CSS engine. Therefore, let me bring to your attention a module for your sites, partially implementing the editing functionality that is common in photo hosting.

To business

Outwardly, the idea looks like this:

What for?

The task was to make a universal, if possible, script that could deal with resizing (resizing) and cropping (cropping) any images. This is sometimes necessary:
* for smart clever previews from a large image,
* to prepare an avatar from any uploaded photo,
* Well, you never know why you need cropping and resizing :-)
')
We look how it looks and works .

Installation

Download the archive fc-cropresizer.zip (97Kb) and unpack it in the correct directory. Do not be intimidated by the large size of the distribution, there are in the demo-photo folder there are images that can be safely deleted after viewing the demo .

In addition to the folder with photos in the unpacked archive, you will find:
* folder imgcropresize - includes a couple of small images directly for crop resize;
* demo.html - that demo;
* fc-cropresizer.css - styles;
* fc-cropresizer.js - engine;
* LICENSE - BSD license ;

Connect to js-and css-files, put where you need a folder with a picture and start!

Using

In any convenient place (head or body — it doesn't matter) we write a small JavaScript script to initialize the crop presses:

cropresizer.getObject("photo1").init({
cropWidth : 150,
cropHeight : 150,
onUpdate : function() {}
});

cropresizer is the namespace used. The image's identifier (id) is passed to the getObject method as a parameter, and the init method takes as its only argument an object in JSON-format, the properties of which will adjust the crop-resize as necessary. Consider these properties:

* cropWidth - the default is 100, sets the length of the crop area in pixels.
* cropHeight is the same for height.
* onUpdate is the only required property (more precisely, the method). It takes as its value a function that, through this, has access to all properties of the crop resize object. In the third example of the demo, all the necessary data is output to the final text block page. This method is vital to preserving what you have substituted, usually in hidden-form fields.

You can resize the image while maintaining the width / height aspect ratio (by default) or without saving, for which you need to set the saveProportions property : false .

Let us dwell in more detail on the script work mechanism in order to highlight some useful points:
1) The script receives the item by the identifier and encloses it in a container (DIV) of fixed sizes. Thus, when reducing the size of the image, all of the following HTML content does not go, but remains in place. This feature can be disabled by setting the property this.withContainer: false .
2) As you know, if you hold down the left mouse button and move the pointer, the contents of the page will be highlighted, which is not very useful for cropping / resizing. To fence this effect, the entire page is covered with a transparent absolutely-positioned "film" with z-index: 100, which prevents selection. However, this film makes it difficult to click on the links on the page, so either you need to raise the links or disable the film with the option this.stopSelection: false . You can also use the usual but invalid onSelectStart = “return false;” for IE and -moz-user-select: none for Gecko.
3) You can change the background of the crop area (white by default) or disable the display of crop size with the cropBackground and showCropSize options, respectively .

Compatibility

The efficiency of the script is tested in:
- IE6, IE7 - WIN;
- FF1.5, FF2 - WIN;
- Mozilla 1.7.1 - WIN;
- Safari 3 WIN;
- Opera 9+ WIN, however, there is a selection of content, despite the protective "film";
- FF2 NIX;
- Opera NIX;
- FF3.0RC2 MacOS X 10.5.3
- Safari 3.1.1 MacOS X 10.5.3
- Opera 9.27 MacOS X 10.5.3, the same as with the selection in WIN.

In the old (below ninth) versions of the Opera problem. I will fight.

About plans

* Make it possible to resize the cropping area
* Work out resize images upwards
* What you suggest :-)

Crosspost Crop & Resize your images from http://webew.ru/ .