圖片剪裁上傳插件 - cropper

圖片剪裁上傳插件 - cropper

<style>
    .photo-container{float: left;width: 300px;height: 300px;}
    .photo-container { padding-left: 10px; box-sizing: border-box; }
    .photo-container li{line-height: 20px;}
    .photo-container .photo-preview{margin-top: 10px;overflow: hidden;}
    .photo-container .photo-preview.col-1{width: 50px; height: 50px;}
    .photo-container .photo-preview.col-2{width: 100px; height: 100px;}
</style>
<section>
    <div>
        <input type="hidden" name="headphoto" id="headphoto" value="" />
        <input type="file" name="uploadFile" id="uploadFile" data-width="100" data-height="100"  accept="image/*"/>
    </div>
    <div class="clearfix">
        <!--<p class="l-info">插件地址http://fengyuanchen.github.io/cropper</p>-->
        <div class="photo-container">
            <img id="headerPhoto" src="images/default-header.jpg" />
        </div>
        <ul class="photo-container">
            <li class="photo-preview col-2"></li>
            <li class="photo-preview col-1"></li>
        </ul>
    </div>
</section>

/*
 * 頭像剪輯插件初始化
 */
var $image = $('#headerPhoto');
var $previews = $('.photo-container .photo-preview');
var $cut = $('#cut');
var URL = window.URL || window.webkitURL;
var blobURL;
//cropper參數信息：https://github.com/fengyuanchen/cropper/blob/v2.1.0/README.md
var option = {
    preview: '.photo-preview', //顯示預覽圖片的元素
    viewMode: 1, //設置剪裁框的視圖模式（0-只在容器內，默認；1-在canvas內；2-容器不在canvas內；3-容器在canvas內）
    dragMode: 'move', //設置拖拽模式（crop-建立一個新的剪裁框，默認；move-移動canvas；none-什麼都不作）
    aspectRatio: 1 / 1, ///*剪裁框比例*/
    autoCropArea: 1, //初始剪裁框區域比例0~1
    //guides: false, //是否顯示剪裁框的虛線，突出裁剪框
    //highlight: false, //是否有遮罩的半透明效果
    //cropBoxMovable: false, //剪裁框是否能夠移動
    //cropBoxResizable: false, //是否能夠自定義剪裁框的大小 
    built: function() {},
    crop: function(e) {
        //設置預覽圖的大小
        /*var imageData = $(this).cropper('getImageData');
        var previewAspectRatio = e.width / e.height;//圖片寬高比例
        $previews.each(function() {
            var $preview = $(this);
            var previewWidth = $preview.width();
            var previewHeight = previewWidth / previewAspectRatio;//經過寬度和寬高比例得到高
            var imageScaledRatio = e.width / previewWidth;
            $preview.height(previewHeight).find('img').css({
                width: imageData.naturalWidth / imageScaledRatio,
                height: imageData.naturalHeight / imageScaledRatio,
                marginLeft: -e.x / imageScaledRatio,
                marginTop: -e.y / imageScaledRatio
            });
        });*/
    }
};
$image.cropper(option); //初始化cropper

/*
 * 選擇頭像
 */
$("input[type=file]").on('change', function() {
    $inputFileElm = $(this);
    img_class=$inputFileElm.attr('id');
    var f=this.files[0];
    var imgBase64="";
    /*if(f.size > 1024*300){
        alert("上傳圖片不要超過300KB");
        return;
    }*/
    option["aspectRatio"] = parseInt($inputFileElm.data("width")) / parseInt($inputFileElm.data("height"))
    $image.cropper('destroy').cropper(option);
    if (URL) {
        var file, files = this.files;//獲取file對象
        if (!$image.data('cropper')) return;
        if (files && files.length) {
            file = files[0];
            fileName=file.name;
            if (/^image\/\w+$/.test(file.type)) { //判斷是不是圖片格式的文件
                blobURL = URL.createObjectURL(file); //轉換圖片地址
                $image.one('built.cropper', function() {
                    URL.revokeObjectURL(blobURL);
                }).cropper('reset').cropper('replace', blobURL); //設置上傳的圖片
            } else {
                alert('請選擇圖片!');
            }
        }
        $inputFileElm.val("");
    }
});

/*
 * 保存頭像
 */
$('.btn-group').on('click','.save',function(){
    var imgBase64 = $image.cropper('getCroppedCanvas').toDataURL();//獲取剪裁後的圖片base64
    console.log('[LEO]圖片Base64 => ',imgBase64);
    $.ajax({
        type:"post",
        url:"",
        data:{
            photo:imgBase64
        },
        async:true,
        success:function(res){
            if(res == 'ok'){
                alert('上傳成功');
            }else{
                alert('上傳失敗')；
            }
        },
        error:function(e){
            console.log('[LEO]出錯了 => ',e);
        }
    });
});