基于CropperJS的图片裁剪上传问题：点击裁剪按钮后数据重置

使用CropperJS实现图片裁剪上传功能时，点击「确认裁剪」按钮后，表单中已填写的所有数据会被意外清空，但预期这些数据应该保持就绪状态，可直接用于提交。

问题原因 #

「确认裁剪」按钮放置在表单内部，且未明确指定按钮类型，浏览器会默认将其识别为submit类型按钮。点击时会触发表单的submit事件，导致页面刷新，所有表单数据被重置。

修复方案 #

方案1：修改按钮HTML属性 #

直接给按钮添加type="button"属性，明确其为普通按钮，不会触发表单提交：

<button id="crop-confirm" class="btn" type="button">Confirm Crop</button>

方案2：在JS事件中阻止默认行为 #

在按钮点击事件处理函数中，调用event.preventDefault()阻止默认提交行为：

document.getElementById('crop-confirm').addEventListener('click', function(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  
  // 原有裁剪逻辑
  let croppedDataUrl = cropper.getCroppedCanvas().toDataURL('image/png');
  document.getElementById('cropped-image').src = croppedDataUrl;
  document.getElementById('cropped-image').style.display = 'block';
  document.getElementById('cropped-image-filename').value = 'cropped-image.png';
  document.getElementById('crop-modal').style.display = 'none';
});

额外优化建议 #

为避免重复初始化Cropper导致的潜在问题，每次打开裁剪模态框前销毁旧实例，关闭后释放资源：

// Initialize CropperJS
let cropper;

// Handle Image Input Change
document.getElementById('photo_of_mate').addEventListener('change', function(e) {
  let files = e.target.files;
  if (!files.length) return;
  
  let reader = new FileReader();
  reader.onload = function() {
    const cropperImage = document.getElementById('cropper-image');
    // 销毁已有Cropper实例
    if (cropper) cropper.destroy();
    
    cropperImage.src = reader.result;
    document.getElementById('crop-modal').style.display = 'block';
    // 重新初始化Cropper
    cropper = new Cropper(cropperImage, {
      aspectRatio: 1,
      viewMode: 1,
    });
  }
  reader.readAsDataURL(files[0]);
});

// Handle Crop Confirm Button Click
document.getElementById('crop-confirm').addEventListener('click', function(e) {
  e.preventDefault();
  if (!cropper) return;
  
  let croppedDataUrl = cropper.getCroppedCanvas().toDataURL('image/png');
  document.getElementById('cropped-image').src = croppedDataUrl;
  document.getElementById('cropped-image').style.display = 'block';
  
  const filenameInput = document.getElementById('cropped-image-filename');
  if (filenameInput) filenameInput.value = 'cropped-image.png';
  
  document.getElementById('crop-modal').style.display = 'none';
  // 销毁实例释放资源
  cropper.destroy();
  cropper = null;
});

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