如何修改Cropper.js代码实现指定图片的预加载裁剪

1. 调整模态框触发逻辑 #

替换原上传触发的逻辑，改成点击链接或页面加载时直接打开模态框并加载指定图片：

<!-- 添加触发链接 -->
<a href="#" id="open-cropper">打开裁剪工具</a>

<!-- 原模态框保留（假设ID为cropModal） -->
<div class="modal fade" id="cropModal" tabindex="-1" role="dialog">
  <!-- 模态框内容（原脚本结构保留） -->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <img id="preview_image" src="" alt="待裁剪图片">
        <div class="preview"></div>
      </div>
      <div class="modal-footer">
        <button type="button" id="crop_button" class="btn btn-primary">完成裁剪</button>
      </div>
    </div>
  </div>
</div>

// 点击链接触发
$('#open-cropper').click(function(e){
    e.preventDefault();
    loadSpecifiedImage('abc.jpg'); // 传入指定图片路径
    $('#cropModal').modal('show');
});

// 页面加载自动触发（可选）
$(document).ready(function(){
    loadSpecifiedImage('abc.jpg');
    $('#cropModal').modal('show');
});

2. 新增指定图片加载与Cropper初始化函数 #

替换原FileReader处理上传文件的逻辑，直接加载指定图片并初始化裁剪：

function loadSpecifiedImage(imagePath) {
    const $image = $('#preview_image');
    
    // 销毁已有Cropper实例，避免重复初始化
    if ($image.data('cropper')) {
        $image.cropper('destroy');
    }
    
    // 设置图片路径并初始化Cropper（参数可按原脚本需求调整）
    $image.attr('src', imagePath).cropper({
        aspectRatio: 1, // 裁剪比例，按需修改
        viewMode: 2,
        preview: '.preview', // 预览区域选择器，原脚本保留则沿用
        autoCropArea: 0.8 // 默认裁剪区域占比
    });
}

3. 修改裁剪提交逻辑 #

原脚本是提交上传文件，现在改为提交裁剪后的图片数据：

$('#crop_button').click(function(){
    const $image = $('#preview_image');
    
    // 获取裁剪后的Canvas对象
    $image.cropper('getCroppedCanvas', {
        width: 400, // 裁剪后图片宽度
        height: 400 // 裁剪后图片高度
    }).toBlob(function(blob) {
        // 构造FormData提交到后端
        const formData = new FormData();
        formData.append('cropped_image', blob, 'cropped_abc.jpg');
        
        // AJAX提交（后端路径沿用原脚本的处理文件）
        $.ajax({
            url: 'crop_process.php',
            method: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(res) {
                $('#cropModal').modal('hide');
                // 这里可添加裁剪成功后的逻辑，比如显示结果图片
            }
        });
    });
});

4. 后端PHP适配（可选） #

如果原后端是处理上传文件，调整为接收裁剪后的图片：

<?php
if(isset($_FILES['cropped_image'])){
    $uploadDir = 'uploads/';
    $targetFile = $uploadDir . basename($_FILES['cropped_image']['name']);
    
    if(move_uploaded_file($_FILES['cropped_image']['tmp_name'], $targetFile)){
        echo json_encode(['status' => 'success', 'path' => $targetFile]);
    } else {
        echo json_encode(['status' => 'error']);
    }
}
?>

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