Jquery image upload and cropping application: Croppie example

In many applications it is necessary to upload a local image and then cut it to fit the size of the site. The most common is the user system requires users to upload and cut the Avatar application. Today I'm going to introduce you to a picture upload and clipping plug-in based on HTML5 and jquery, which is called Croppie.

Html

First we load the relevant JS and CSS files into the head.

The code is as follows	Copy Code
<script src= "Jquery.min.js" ></script> <script src= "Croppie.min.js" ></script> <link rel= "stylesheet" href= "Croppie.css" >

Next we put a picture upload button on the page, we can use CSS to type= "file" files select control into a button style. After selecting the picture, upload the picture in the #upload-demo, and call the cropping plugin Croppie. #result用来展示裁剪后的图片.

The code is as follows	Copy Code
<div class= "Actions" > <button class= "FILE-BTN" > <span> Upload </span> <input type= "file" id= "Upload" value= "select Picture file"/> </button> <div class= "Crop" > <div id= "Upload-demo" ></div> <button class= "Upload-result" > Cutting </button> </div> <div id= "Result" ></div> </div>

Css

Using the following CSS code, we have the perfect way to turn the control of the selected file into a button style, which is to set the type= "file" transparency to 0 and then overlap the button. In addition, we will first crop the picture area. Crop set to not visible, and so on, and then display after selecting files.
button

The code is as follows

Copy Code

A.BTN { Background-color: #189094; Color:white; padding:10px 15px; border-radius:3px; border:1px Solid Rgba (255, 255, 255, 0.5); font-size:16px; Cursor:pointer; Text-decoration:none; Text-shadow:none; } Button:focus { outline:0; } . file-btn { position:relative; } . file-btn input[type= "file" { Position:absolute; top:0; left:0; width:100%; height:100%; opacity:0; } . Actions { padding:5px 0; } . Actions button { margin-right:5px; } . Crop{display:none}

Jquery

First, the local file is read using the HTML5 FileReader API, and then $ (' #upload-demo '). Croppie () called the Croppie plug-in. Croppie Options Viewport: You can set the width and height of the cropped picture, as well as the type (round or square); The option boundary is the outer dimension of the picture. It also has parameter mousewheelzoom: whether the mouse wheel scaling image is supported, Showzoom: whether to show the Zoom Bar tool, Update: callback function.

The code is as follows

Copy Code

$ (function () { var $uploadCrop; function ReadFile (input) { if (Input.files && input.files[0]) { var reader = new FileReader (); Reader.onload = function (e) { $uploadCrop. Croppie (' bind ', { Url:e.target.result }); } Reader.readasdataurl (Input.files[0]); } else { Alert ("Sorry-you ' re browser doesn ' t support the FileReader API"); } } $uploadCrop = $ (' #upload-demo '). Croppie ({ Viewport: { WIDTH:200, HEIGHT:200, Type: ' Circle ' }, Boundary: { WIDTH:300, height:300 } }); $ (' #upload '). On (' Change ', function () { $ (". Crop"). Show (); ReadFile (this); }); $ ('. Upload-result '). On (' click ', function (EV) { $uploadCrop. Croppie (' result ', ' canvas '). Then (function (RESP) { Popupresult ({ Src:resp }); }); }); function Popupresult (Result) { var html; if (result.html) { html = result.html; } if (RESULT.SRC) { html = ' '; } $ ("#result"). HTML (HTML); } });

When the "Crop" button is clicked, the Croppie result is called again, and a cropped picture is returned and displayed in the #result