如何使用Cropper.js无需上传表单实现已有图片裁剪

1. 修改图库HTML结构 #

给每个「设为头像」按钮新增自定义属性，存储对应图片的可访问URL，示例如下：

<div class="gallery-item">
  <img src="/user/upload/xxx.jpg" alt="用户上传图片">
  <!-- data-img-url属性存储当前对应图片的完整访问路径 -->
  <button class="set-avatar-btn" data-img-url="/user/upload/xxx.jpg">设为头像</button>
</div>

2. 替换原有JS触发逻辑 #

删除原有监听文件上传表单change事件的代码，替换为监听「设为头像」按钮点击的逻辑：

var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;

// 替换原有文件选择监听代码，改为监听设为头像按钮点击
$("body").on("click", ".set-avatar-btn", function(e){
    // 直接获取按钮绑定的已有图库图片URL
    const targetImgUrl = $(this).data('img-url');
    // 赋值给裁剪模态框内的图片元素
    image.src = targetImgUrl;
    // 弹出裁剪框
    $modal.modal('show');
});

// 以下原有模态框初始化、裁剪提交逻辑完全不用修改
$modal.on('shown.bs.modal', function () {
    cropper = new Cropper(image, {
    aspectRatio: 1,
    viewMode: 3,
    preview: '.preview'
    });
}).on('hidden.bs.modal', function () {
   cropper.destroy();
   cropper = null;
});

$("#crop").click(function(){
    canvas = cropper.getCroppedCanvas({
      width: 160,
      height: 160,
    });

    canvas.toBlob(function(blob) {
        url = URL.createObjectURL(blob);
        var reader = new FileReader();
         reader.readAsDataURL(blob);
         reader.onloadend = function() {
            var base64data = reader.result;
            
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "upload.php",
                data: {image: base64data},
                success: function(data){
                    console.log(data);
                    $modal.modal('hide');
                    alert("头像设置成功");
                }
              });
         }
    });
})

3. 兼容调整（按需配置） #

• 若图库图片与当前站点跨域，需要给裁剪模态框内的<img id="image">添加crossorigin="anonymous"属性，同时图片存储服务端需要配置CORS跨域许可，否则裁剪后转码会报错。
• 不需要的文件上传表单可以直接删除，不影响功能运行。
• 原有upload.php接收逻辑无需修改，仍按之前的规则处理base64格式的图片参数即可。

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