WEX5 tutorial on the picture of the portrait cutting and uploading

Video Tutorial Address: http://v.youku.com/v_show/id_XMTgyMDE5NjEyOA==.html Effect Demo

1. Click on the avatar to pop up the picture cropping box

2, select picture, crop, upload

3. After the upload is successful, the Avatar icon changes

II. Case Study Catalogue

WEX5 provides us with a picut picture clipping case, as follows:

Component Department Bureau

Add a file tag to open the document manager for picture selection, div tag for picture preview, image label for crop image

Back-end Services

After the backend receives the request parameter, the path is stitched, the file stream is created, and the file is created, successfully passing the success message to the foreground.

Code interpretation

Introduce cropper.js picture clipping JS.

Cropper.js provides us with a set of parameters, with comments in the case,

$ ('. Cropper-example-1 > img '). Cropper (options), find IMG To perform cropper on the image and initialize parameters.

Use the Click event of the button to trigger the Click event of the file tag, open the Files manager, select the picture

When the picture is selected, the Filechange event that triggers the file tag, in this event, is judged by the type of image. Event.target.filts[0] represents multiple picture arrays selected from the File Manager, with only the first pair of images selected, and the Url.createobjecturl (file) conversion.

var data = Result.todataurl (); Gets the cut of the two-dimensional stream, through the Baas.send method asynchronous upload, the successful return of information.

The successful upload of the image information to the image, the implementation of the preview.

Three-combat Modification and code implementation 1 database design

Create an avatar field Headimgurl

2 Back-end retrofit

Copy back-end upload Upload.java to the current project, add to it for easy modification,

Modify the file path to the current project directory

3. Front-End Retrofit

Click the Avatar, open the picture clipping box with Windowdialog, and pass in the user's current row data.

Windowdialog data for mapping.

The Crop box page data autoload is false, receives parameters, and loads.

Image preview, made into a circle, and placed on the head of the header.

Depending on the Avatar circle, change viewfinder to 1:1, which is square.

With Justep. Uuid.createuuid () creates a picture name and stitching the Imgurl picture path.

Once the image is uploaded successfully, write to the database Imgurl.

Because I use Windowdialog to open the picture crop box, OK, and then transfer the data back to the main page

Project completed, icon replacement completed.

WEX5 tutorial on the picture of the portrait cutting and uploading