使用 Croppie.js 实现交互式客户端图片裁剪教程

<!-- 引入 jQuery (如果尚未引入) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入 Croppie.js CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css">
<!-- 引入 Croppie.js JavaScript -->
<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.js 裁剪区域将在此处初始化 -->
                <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;
    height: 250px;
    padding-bottom:25px; /* 为裁剪器底部留出空间 */
}

$(document).ready(function() {
    // 初始化显示默认图片
    $(".gambar").attr("src", "https://user.gadjian.com/static/images/personnel_boy.png");

    var $uploadCrop, tempFilename, rawImg, imageId;

    // FileReader API 用于读取用户选择的文件
    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('.upload-demo').addClass('ready'); // 添加类名，可能用于 Croppie.js 的内部样式或状态
                $('#cropImagePop').modal('show'); // 显示裁剪模态框
                rawImg = e.target.result; // 获取图片Base64数据
            }
            reader.readAsDataURL(input.files[0]); // 将文件读取为Data URL
        } else {
            // 浏览器不支持 FileReader API 的提示
            alert("抱歉 - 您的浏览器不支持 FileReader API");
        }
    }

    // 初始化 Croppie.js 实例
    $uploadCrop = $('#upload-demo').croppie({
        viewport: {
            width: 150, // 裁剪区域宽度
            height: 200, // 裁剪区域高度
            type: 'square' // 裁剪区域形状：'square' 或 'circle'
        },
        enforceBoundary: false, // 是否强制裁剪区域在图片边界内
        enableExif: true // 启用 EXIF 数据读取，有助于正确处理图片方向
    });

    // 模态框显示后，绑定图片到 Croppie.js 实例
    $('#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 () {
        imageId = $(this).data('id');
        tempFilename = $(this).val();
        $('#cancelCropBtn').data('id', imageId);
        readFile(this); // 调用 readFile 函数处理文件
    });

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