GOOCODE - Find your code/scripts

19 In a lot of applications need to upload the local images and then by size appropriate tailoring to meet the requirements of the website for the size of the picture. The most common is the user system requires users to upload and cut the picture of the application. Today I introduced to you is based on HTML5 and jQuery of the picture upload and clipping plug-in, it is called Croppie.


HTML
First, we will load the relevant JS and CSS files in head.

<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 type= to CSS "file" file select control into button style. After selecting the picture, in the #upload-demo display upload pictures, as well as call clipping Croppie. #result is used to display the cut after the picture.

<div class="actions"> 
    <button class="file-btn"> 
        <span>Upload</span> 
        <input type="file" id="upload" value="Select" /> 
    </button> 
    <div class="crop"> 
        <div id="upload-demo"></div> 
        <button class="upload-result">Croppie</button> 
    </div> 
    <div id="result"></div> 
</div> 

CSS
Using the following CSS code, we are perfect to select the file control into the button style, in fact, the type= "file" transparency is set to 0, and then overlap and button. In addition, we first set the image cropping area.Crop is not visible, and then select the file to display.

button, 
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 use FileReader API HTML5 to read the local file, and then $('#upload-demo').Croppie () called the Croppie plug-in. Croppie option viewport: you can set the width and height of the cropped image, as well as type (round or square); option boundary is the peripheral size of the picture. It also has parameters mouseWheelZoom: whether to support the mouse wheel zoom image; showZoom: whether to display the zoom bar tool; update: callback function.

$(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 = '<img src="' + result.src + '" />'; 
        } 
        $("#result").html(html); 
    } 
}); 

When you click the "cut" button, call the result Croppie method again, after returning to a clip of the picture, and displayed in the #result.