前端图片裁剪技术：Croppie.js实战指南

<!-- 引入 jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 Bootstrap CSS 和 JS (如果使用模态框) -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入 Croppie CSS 和 JS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            <label class="cabinet center-block">
                <figure>
                    <!-- 原始图片预览或裁剪结果显示区域 -->
                    <img src="https://user.gadjian.com/static/images/personnel_boy.png" class="gambar img-responsive img-thumbnail" id="item-img-output" />
                    <figcaption><i class="fa fa-camera"></i></figcaption>
                </figure>
                <!-- 图片上传输入框 -->
                <input type="file" class="item-img file center-block" name="file_photo"/>
            </label>
        </div>
    </div>
</div>

<!-- 裁剪模态框 -->
<div class="modal fade" id="cropImagePop" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">编辑照片</h4>
            </div>
            <div class="modal-body">
                <!-- Croppie 渲染区域 -->
                <div id="upload-demo" class="center-block"></div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="cropImageBtn" class="btn btn-primary">裁剪</button>
            </div>
        </div>
    </div>
</div>

label.cabinet {
    display: block;
    cursor: pointer;
}

label.cabinet input.file {
    position: relative;
    height: 100%;
    width: auto;
    opacity: 0; /* 隐藏原始文件输入框 */
    -moz-opacity: 0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    margin-top:-30px; /* 调整位置使其覆盖在自定义按钮上 */
}

#upload-demo {
    width: 250px; /* Croppie 容器宽度 */
    height: 250px; /* Croppie 容器高度 */
    padding-bottom:25px; /* 底部留白 */
}

$(document).ready(function() {
    // 初始化 Croppie 实例
    var $uploadCrop;
    var rawImg; // 用于存储读取到的图片原始数据URL

    // 配置 Croppie
    $uploadCrop = $('#upload-demo').croppie({
        viewport: { // 裁剪区域的尺寸
            width: 150,
            height: 200,
            type: 'square' // 可以是 'square' 或 'circle'
        },
        enforceBoundary: false, // 是否强制裁剪区域在图片边界内
        enableExif: true // 启用EXIF数据，处理图片方向
    });

    // 文件读取函数
    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader(); // FileReader 用于异步读取文件内容
            reader.onload = function (e) {
                rawImg = e.target.result; // 获取图片数据URL
                $('.upload-demo').addClass('ready');
                $('#cropImagePop').modal('show'); // 显示裁剪模态框
            };
            reader.readAsDataURL(input.files[0]); // 读取文件内容为数据URL
        } else {
            // 浏览器不支持 FileReader API 的提示
            alert("抱歉 - 您的浏览器不支持 FileReader API");
        }
    }

    // 模态框显示后绑定图片到 Croppie
    $('#cropImagePop').on('shown.bs.modal', function(){
        $uploadCrop.croppie('bind', {
            url: rawImg // 将读取到的图片数据绑定到 Croppie 实例
        }).then(function(){
            console.log('jQuery bind complete');
        });
    });

    // 监听文件输入框的 change 事件
    $('.item-img').on('change', function () {
        readFile(this); // 调用文件读取函数
    });

    // 监听裁剪按钮的点击事件
    $('#cropImageBtn').on('click', function (ev) {
        $uploadCrop.croppie('result', {
            type: 'base64', // 输出类型，可以是 'base64', 'canvas', 'blob', 'html'
            format: 'jpeg', // 输出图片格式
            size: {width: 150, height: 200} // 输出图片尺寸
        }).then(function (resp) {
            $('#item-img-output').attr('src', resp); // 将裁剪结果显示在 img 标签中
            $('#cropImagePop').modal('hide'); // 隐藏模态框
        });
    });
});