利用HTML、CSS和JavaScript实现客户端图片裁剪功能指南

<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" alt="裁剪结果预览" />
                    <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">
                <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;
}

// 确保在引入此脚本之前已引入 jQuery 和 Croppie.js

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

    var $uploadCrop, rawImg; // 声明Croppie实例和原始图片数据变量

    // 1. 文件读取函数
    function readFile(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                rawImg = e.target.result; // 将读取的图片数据存储到rawImg
                $('#cropImagePop').modal('show'); // 显示裁剪模态框
            };
            reader.readAsDataURL(input.files[0]); // 以Data URL格式读取文件
        } else {
            // 浏览器不支持FileReader API的提示
            alert("抱歉 - 您的浏览器不支持FileReader API");
        }
    }

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

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

    // 4. 文件输入框内容改变事件
    $('.item-img').on('change', function () {
        readFile(this); // 调用文件读取函数
    });

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