Example of jQuery Avatar cropping tool jcrop usage (with demo and demo source code download), jqueryjcrop

Example of jQuery Avatar cropping tool jcrop usage (with demo and demo source code download), jqueryjcrop

This document describes how to use the jQuery Avatar cropping tool jcrop. We will share this with you for your reference. The details are as follows:

Currently, most popular Avatar cropping tools are flash and jquery. I personally think it is better to use jquery, because the code is carefully studied and can basically understand what is going on. It is easier to change it.

For an example, see the jcrop demo, which is modified by the root jcrop example. Add the following two features:

1, center display, and can be dragged to change the size of the clip
2. The size of the previewed image is proportional to the size of the root drag.

Below is the js Code, which is simple Encapsulation

<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
When jquery jcrop is combined with jquery ajax upload, the Avatar upload and interception function can be very user-friendly.
Click here to download the complete instance code.