圖片上傳和裁剪應用：Croppie

HTML

首先我們將相關js和css文件載入head中。

<script src="jquery.min.js"></script>
<script src="croppie.min.js"></script>
<link rel="stylesheet" href="croppie.css">

接下來我們在頁面上放置一個圖片上傳按鈕，我們可以用css將type="file"的文件選擇控件轉成按鈕樣式。選擇完圖片后，在#upload-demo展示上傳圖片，以及調用裁剪插件Croppie。#result用來展示裁剪后的圖片。

<div class="actions">
    <button class="file-btn">
        <span>上傳</span>
        <input type="file" id="upload" value="選擇圖片文件" />
    </button>
    <div class="crop">
        <div id="upload-demo"></div>
        <button class="upload-result">裁剪</button>
    </div>
    <div id="result"></div>
</div>

CSS

使用以下CSS代碼，我們很完美的將選擇文件的控件轉成按鈕的樣式，其實就是將type="file"透明度設成0，然后和button重疊。此外，我們先將圖片裁剪區域.crop設置為不可見，等選擇文件后再顯示。

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

首先利用HTML5的FileReader API讀取本地文件，然后$('#upload-demo').croppie()調用了Croppie插件。Croppie的選項viewport：可以設置所裁剪圖片的寬度和高度，以及類型（圓形或方形）；選項boundary是圖片的外圍尺寸。它還有參數mouseWheelZoom：是否支持鼠標滾輪縮放圖像；showZoom：是否展示縮放條工具；update：回調函數。

$(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);
    }
});

當點擊“裁剪”按鈕后，再次調用Croppie的result的方法，返回一張裁剪后的圖片，并顯示在#result中。

更多詳情請關注Croppie項目官網： https://github.com/Foliotek/Croppie