解决CodeIgniter3中JCrop裁剪图片高度减半问题

问题原因 #

1. 前端坐标与原图片尺寸不匹配：浏览器会自动缩小大尺寸图片适配页面，JCrop返回的裁剪坐标是基于缩小后图片的比例值，而非原图片真实像素坐标，后端直接使用这些值裁剪会导致比例错误。
2. 后端裁剪配置缺失：未指定new_image参数，裁剪操作会覆盖原上传图片；且未对裁剪后的图片进行标准化尺寸处理。
3. 无效缩放代码：upload_crop方法中初始化了图片缩放配置，但未执行resize()，代码未生效。

解决方案 #

1. 修复前端：转换真实裁剪坐标 #

修改upload_crop_view.php中的JS代码，先获取图片真实尺寸，计算缩放比例，将JCrop返回的坐标转换为原图片真实像素：

<script>
    $(function() {
        var $cropImage = $('#crop-image');
        // 获取图片真实尺寸
        var img = new Image();
        img.src = $cropImage.attr('src');
        img.onload = function() {
            var realWidth = this.width;
            var realHeight = this.height;
            // 获取页面中显示的图片尺寸
            var displayWidth = $cropImage.width();
            var displayHeight = $cropImage.height();
            // 计算缩放比例
            var scaleX = realWidth / displayWidth;
            var scaleY = realHeight / displayHeight;

            $('#crop-image').Jcrop({
                aspectRatio: 1, // 强制正方形比例
                setSelect: [0, 0, 512, 512],
                onSelect: function(c) {
                    // 转换为原图片真实坐标
                    $('#x').val(Math.round(c.x * scaleX));
                    $('#y').val(Math.round(c.y * scaleY));
                    $('#w').val(Math.round(c.w * scaleX));
                    $('#h').val(Math.round(c.h * scaleY));
                }
            });
        };
    });
</script>

2. 修复后端：裁剪+标准化尺寸 #

修改EditUser.php中的crop方法，分两步处理：先裁剪选中区域，再缩放到512×512，同时指定输出路径避免覆盖原图片：

public function crop() {
    $x = $this->input->post('x');
    $y = $this->input->post('y');
    $w = $this->input->post('w');
    $h = $this->input->post('h');
    $file_name = $this->input->post('file_name');

    $image_path = './assets/images/foto_profile_pengguna/' . $file_name;
    $cropped_image_path = './assets/images/foto_profile_pengguna/cropped_' . $file_name;

    // 第一步：裁剪选中区域
    $this->image_lib->clear();
    $config['image_library'] = 'gd2';
    $config['source_image'] = $image_path;
    $config['new_image'] = $cropped_image_path; // 指定裁剪后输出路径
    $config['width'] = $w;
    $config['height'] = $h;
    $config['x_axis'] = $x;
    $config['y_axis'] = $y;
    $config['maintain_ratio'] = FALSE;

    $this->image_lib->initialize($config);
    $this->image_lib->crop();

    // 第二步：将裁剪后的图片缩放到512×512
    $this->image_lib->clear();
    $resize_config['image_library'] = 'gd2';
    $resize_config['source_image'] = $cropped_image_path;
    $resize_config['width'] = 512;
    $resize_config['height'] = 512;
    $resize_config['maintain_ratio'] = FALSE;

    $this->image_lib->initialize($resize_config);
    $this->image_lib->resize();

    redirect('EditUser/upload_crop');
}

3. 移除无效代码 #

删除upload_crop方法中未执行的缩放配置（已在裁剪后统一处理尺寸）：

// 移除以下无效代码块
// $config['image_library'] = 'gd2';
// $config['source_image'] = $uploaded_image;
// $config['maintain_ratio'] = FALSE;
// $config['width'] = 512;
// $config['height'] = 512;

// $this->image_lib->initialize($config);

内容的提问来源于stack exchange，提问作者Andrian_Must