JQuery plug-in ImgAreaSelect how to achieve avatar upload preview and cropping function

In this article Xiaobian for you to introduce in detail "jQuery plug-in ImgAreaSelect how to achieve avatar upload preview and cropping function", detailed content, clear steps, details handled properly, I hope this "jQuery plug-in ImgAreaSelect how to achieve avatar upload preview and cropping function" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge.

First of all, you want to know what functions we should achieve?

(1) Image can be uploaded and previewed.

(2) drag and drop the cropped picture so that it can show the cropped area

(3) display the coordinates of the area to be cropped

Second, how do you reference the plug-in?

Then take a look at it in detail.

Step 1: introduce styles and packages first (according to your own location)

Step 2: use the div layout style first, as shown in the following figure

Dear, please upload the picture and cut it