jquery.cropper 裁剪圖片上傳

https://github.com/fengyuanchen/cropper

一、必要的文件引用：

<script src="/path/to/jquery.js"></script><!-- jQuery is required -->
<link  href="/path/to/cropper.css" rel="stylesheet">
<script src="/path/to/cropper.js"></script>   

二、HTML結構

//能夠將圖片或canvas直接包裹到一個塊級元素中。 
<!-- Wrap the image or canvas with a block element -->
<div class="container">
    <img src="picture.jpg">
</div>

三、插件調用

//能夠使用$.fn.cropper方法來初始化該圖片剪裁插件。 
$('.container > img').cropper({
    aspectRatio: 16 / 9,
    crop: function(data) {
    // Output the result data for cropping image.
    }
});

四、部分參數解釋

aspectRatio：類型：Number，默認值NaN。----------------設置剪裁容器的比例。
crop：類型：Function，默認值null。--------------------當改變剪裁容器或圖片時觸犯的事件函數。
preview：類型：String(jQuery選擇器)，默認值''。-------添加額外的元素（容器）的預覽裁剪效果圖片。
responsive：類型：Boolean，默認值true。---------------是否在窗口尺寸改變的時候重置cropper。
checkImageOrigin：類型：Boolean，默認值true。---------默認狀況下，插件會檢測圖片的源，若是是跨域圖片，圖片元素會被添加crossOrigin class，並會爲圖片的url添加一個時間戳來使getCroppedCanvas變爲可用。添加時間戳會使圖片從新加載，以使跨域圖片可以使用getCroppedCanvas。在圖片上添加crossOrigin class會阻止在圖片url上添加時間戳，及圖片的從新加載。
data：類型：object{}----------------------------------默認狀況下，裁剪框在圖片的正中間，能夠設置四個值：x,y,width,height，裁剪框的位置跟大小。
multiple：類型：Boolean，默認值false。----------------默認狀況下，每頁只支持一個裁剪器，若是須要支持多個，設置爲true。
modal：類型：Boolean，默認值true。--------------------顯示（true）或隱藏（false）裁剪器上方的黑色模態圖層。
dashed：類型：Boolean，默認值true。-------------------顯示（true）或隱藏（false）裁剪區域上方的虛線。
autoCrop：類型：Boolean，默認值true。-----------------初始化時是否容許自動渲染裁剪框。
autoCropArea：類型：Number，默認值0.8（圖片的80%）。--0-1之間的數值，定義自動剪裁區域的大小。
dragCrop：類型：Boolean，默認值true。-----------------啓用刪除當前的裁剪區域，並經過拖動圖像建立一個新的區域。
movable：類型：Boolean，默認值true。------------------是否容許移動剪裁框。
resizable：類型：Boolean，默認值true。----------------是否容許改變剪裁框的大小。
zoomable：類型：Boolean，默認值true。-----------------是否容許放大縮小圖片。
rotatable：類型：Boolean，默認值true。----------------是否容許旋轉圖片。
minWidth：類型：Number，默認值0。---------------------裁剪區域最小寬度。
minHeight：類型：Number，默認值0。--------------------裁剪區域最小高度。
maxWidth：類型：Number，默認值Infinity。--------------裁剪區域最大寬度。
maxHeight：類型：Number，默認值Infinity。-------------裁剪區域最大高度。

五、部分方法解釋

ready：類型：Function --------------------------------加載圖片是異步過程，須要圖片加載成功後執行的方法放入ready中
crop：類型：Function --------------------------------當改變剪裁容器或圖片時觸犯的事件函數

六、實戰例子（洋老闆）

<script>
    var croppable = false;
    var $image;  //須要裁剪的圖片
    var $button; //點擊按鈕肯定裁剪
    var $result; //裁剪圖片預覽
    var layerIndex = null;
    function getRoundedCanvas(sourceCanvas) {
        var canvas = document.createElement('canvas');
        var context = canvas.getContext('2d');
        var width = sourceCanvas.width;
        var height = sourceCanvas.height;

        canvas.width = width;
        canvas.height = height;
        context.beginPath();
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI);
        context.strokeStyle = 'rgba(0,0,0,0)';
        context.stroke();
        context.clip();
        context.drawImage(sourceCanvas, 0, 0, width, height);

        return canvas;
    }
    
    function imgFileUpload() {
        var input = document.getElementById("imgFileUpload");
        var result,div;

        if(typeof FileReader==='undefined'){
            // result.innerHTML = "抱歉，你的瀏覽器不支持 FileReader";
            input.setAttribute('disabled','disabled');
        }else{
            input.addEventListener('change',readFile,false);
        }
        function readFile(){
            var files = this.files[0];
            if (!/image\/\w+/.test(files.type)) {
                alert("請上傳一張圖片~");
                return false;
            }
            var reader = new FileReader();
            reader.readAsDataURL(files);
            reader.onload = function(e) {
                var _this = this;
                layerIndex = layer.open({
                    type: 1
                    ,content:'<div style="display: block;height: 100%;position: relative"><img id="image" src="" alt="Picture"> <button type="button" id="button" style="position: fixed;left: 50%;bottom: 20px;z-index: 99">Crop</button></div>'
                    ,anim: 'up'
                    ,style: 'position:fixed; bottom:0; left:0; width: 100%; height: 100%; padding:10px 0; border:none;opacity:0.5;background:#000'
                    ,success : function () {
                        $("#image").attr('src',_this.result);
                        $image = $("#image");
                        $image.cropper({
                            aspectRatio: 1,
                            viewMode: 1,
                            ready: function () {
                                croppable = true;
                            }
                        });
                        $button = $('#button');
                        $result = $('#result');
                        $button.on('click', function () {
                            var croppedCanvas;
                            var roundedCanvas;
                            if (!croppable) {
                                return;
                            }
                            croppedCanvas = $image.cropper('getCroppedCanvas');
                            // Round
                            roundedCanvas = getRoundedCanvas(croppedCanvas);
                            layer.close(layerIndex);
                            $result.attr('src',roundedCanvas.toDataURL());
                        });
                    }
                });

            };
        }
    }

    $(function () {
        imgFileUpload();
    });
</script>

<ul class="system-list">
        <li class="border-b-1px">
            <div class="a">
                <span class="name">頭像</span>
                <span id="account" style="position: relative">
                    <input type="file" class="img-file" id="imgFileUpload" style="opacity: 0;position: absolute;width: 36px;height: 36px;left: 0;top: 5px;"/>
                    <img src="/images/user-index-default-icon.png" alt="" id="result" width="36" height="36" style="display:block;vertical-align: top;margin-top: 5px;"/>
                </span>
                <span class="arrow"><img src="/images/go.png"></span>
            </div>
        </li>
    </ul>