图片剪裁上传插件 - 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);
        }
    });
});