如何在网页中实现交互式图片裁剪功能

<!-- 引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 引入Bootstrap CSS 和 JS (用于模态框) -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- 引入Croppie CSS 和 JS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" rel="stylesheet">
<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 中渲染 -->
                <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; /* 调整位置使其覆盖在figcaption上 */
}

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

$(document).ready(function() {
    var $uploadCrop, tempFilename, rawImg, imageId;

    // 初始化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();
            reader.onload = function (e) {
                rawImg = e.target.result; // 获取Base64编码的图片数据
                $('#cropImagePop').modal('show'); // 显示裁剪模态框
            };
            reader.readAsDataURL(input.files[0]); // 读取文件为Base64编码
        } else {
            // 浏览器不支持FileReader API的提示
            alert("抱歉 - 您的浏览器不支持FileReader API");
        }
    }

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

    // 文件输入框内容改变事件：当用户选择图片后触发
    $('.item-img').on('change', function () {
        imageId = $(this).data('id');
        tempFilename = $(this).val();
        readFile(this); // 调用读取文件函数
    });

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