Crop images using jQuery
Framing photographs is now in demand, because any community involves the communication of living people. And it’s easier to communicate with the person you are talking “by knowing him in person”.
I had my own requirements for control that will produce framing. Having searched for the perfect ready-made solution, I did not find it and decided to write my own.
The requirements are:
1. Icons for which you need to pull to change the block must be large.
2. The part of the image that will be cut out must be original, but the fact that it is formed is translucently covered.
![Crop Type](https://habrastorage.org/getpro/geektimes/post_images/754/167/d2d/754167d2db089d30abb0af96b2c55a58.jpg)
The script uses the jQuery library. The control itself is made as a plug-in for jQuery.
You can see an EXAMPLE in work , there is more about the plugin.
The plugin interface is as follows:
// Creates the structure of the framing control
$ (element) in the specified block element. CropImageCreate (src, src_width, src_height, min_width, min_height, proportion, options);
// Returns information about the cropped image as an object {src, left, top, width, height}
$ (element) .CropImageGetData ());
PS Of the ready-made scripts that I found in my opinion the best is imgAreaSelect .
I had my own requirements for control that will produce framing. Having searched for the perfect ready-made solution, I did not find it and decided to write my own.
The requirements are:
1. Icons for which you need to pull to change the block must be large.
2. The part of the image that will be cut out must be original, but the fact that it is formed is translucently covered.
![Crop Type](https://habrastorage.org/getpro/geektimes/post_images/754/167/d2d/754167d2db089d30abb0af96b2c55a58.jpg)
The script uses the jQuery library. The control itself is made as a plug-in for jQuery.
You can see an EXAMPLE in work , there is more about the plugin.
The plugin interface is as follows:
// Creates the structure of the framing control
$ (element) in the specified block element. CropImageCreate (src, src_width, src_height, min_width, min_height, proportion, options);
// Returns information about the cropped image as an object {src, left, top, width, height}
$ (element) .CropImageGetData ());
PS Of the ready-made scripts that I found in my opinion the best is imgAreaSelect .