jquery插件cropper使用笔记

1.html

<div class="layui-form-item">
    <label class="layui-form-label">企业印章</label>
    <div class="layui-input-block">
        <input type="file" id="imgInp" style="display: none" name="sealFile">
        <input type="hidden" name="seal" />
        <input type="hidden" name="sealStream" />
        <!--<input type="hidden" name="oldSealStream" />-->
        <button type="button" id="uploadImg" class="layui-btn layui-btn-normal" style="width:118px;">选择图片</button>
        <div id="cropperBox" style="height:240px;margin-top:5px;display:none;">
            <!--裁剪部分/images/ecs-logo.png-->
            <div>
                <img src="" id="photo" style="max-width: 100% ;height:150px;" />
            </div>
            <!--预览-->
            <div>
                <div class="img-preview preview-lg"></div>
            </div>
        </div>
    </div>
</div>

2.JS代码

var initCropper = function (img, input){
    var $image = img;
    var options = {
        aspectRatio: 1, // 16/9, 4/3, 1/1, 2/3, null 裁剪比例
        preview: '.img-preview'
    };
    $image.cropper(options);
    var $inputImage = input;
    var uploadedImageURL;
    if (URL) {
        $inputImage.change(function () {  // 给input添加监听
            //$("#cropperBox").slideDown();
            var files = this.files;
            var file;
            if (!$image.data('cropper')) {
                return;
            }
            if (files && files.length) {
                file = files[0];
                if (/^image\/\w+$/.test(file.type)) {   // 判断是否是图像文件
                    if (uploadedImageURL) {   // 如果URL已存在就先释放
                        URL.revokeObjectURL(uploadedImageURL);
                    }
                    uploadedImageURL = URL.createObjectURL(file);
                    // 销毁cropper后更改src属性再重新创建cropper
                    $image.cropper('destroy').attr('src', uploadedImageURL).cropper(options);
                    //$image.cropper("getCroppedCanvas").toDataURL()
                    //$inputImage.val('');
                    $('#cropperBox').show();
                } else {
                    window.alert('请选择一个图像文件！');
                }
            }
        });
    } else {
        $inputImage.prop('disabled', true).addClass('disabled');
    }
};

$('#uploadImg').on('click',function(){
    $('#imgInp').click();
});

3.获取截取图片的BASE64流传到后台再转为文件

$('#photo').cropper("getCroppedCanvas").toDataURL();