Home > Developer > Web Develop
These two days there is a rare time to tidy up the recent study of things, the two-day project using the Avatar upload cutting function, here only to introduce the cutting of the avatar.
The ability to achieve picture clipping individually is easy, entry-level. Look at the official documents, basically understand. If you do not want to see the English version of the official website, you can read this blog, speaking particularly good.
Website address: http://fengyuanchen.github.io/cropper/
Attached website: 78792400
This article speaks very well.
Let me first talk about my needs: just want to achieve the image clipping function, and to have a preview area, get the cropped image after click Confirm Upload.
Preview of the page structure, style to set itself, in order to beautiful pages, can be set according to the scale of the cropping box, according to Aspectratio this property, if not set this property, then the value of this property is Nan. Generally or according to the needs of the page needs to set the picture, so uploaded to the server picture is the demand for the picture.
Specific options to see this blog, I would like to post the code.
<!DOCTYPE HTML><HTML><HeadLang= "en"> <MetaCharSet= "UTF-8"> <Metaname= "Viewport"content= "width=device-width,minimum-scale=1.0,maximum-scale=1.0"/> <Linkrel= "stylesheet"href=".. /css/cropper.css "/> <title>Cropper cropping a picture and uploading the demo</title> <style>. Container{width:70%;float: Left; }. IMG{width:50%; }. Preview-box{width:320px;Height:180px;Overflow:Hidden;float: Right;Margin-right:20px; } </style></Head><Body><Divclass= "Container"ID= "Container"> <imgsrc=".. /image/demo_img.jpg "alt=""class= "img"ID= "Demoimg"/> <!--the path to the real project needs to dynamically get the path of the user's selected picture, which can be in Base64 encoded form-</Div><div class= "Preview-box" ></div><!--Preview Box container--<Scriptsrc=".. /js/jquery-2.1.3.min.js "></Script><Scriptsrc=".. /js/cropper.js "></Script><Script> $('#demoImg'). Cropper ({aspectratio: - / 9,//Crop box scale ViewMode:0,//view mode DragMode:'Move',//The pattern of the cropping box mincanvaswidth: -theminimum width of the//canvas, if not set, the value is 0 mincanvasheight: -, Mincropboxwidth: -,//The minimum width of the clipping layer, with a value of 0 mincropboxheight: -, preview:'. Preview-box' })</Script></Body></HTML>
Attached
The right side is the preview area, and the crop area on the left
Use of cropper.js cropping pictures
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
