如何不刷新页面重置Image Cropper图片裁剪器

问题根因 #

你之前的重置方案失效的核心原因是：

• 仅替换了DOM结构，没有销毁旧的Cropper实例，残留的实例绑定逻辑会干扰新元素运行
• 全局存储的recorte变量始终指向初始化时的旧img元素，替换DOM后没有更新该变量指向
• 没有清空file输入框的已选文件值，会出现二次选择同一张图片不触发onchange事件的问题
• 点击裁剪按钮后容器被替换为iframe，重置时没有恢复为初始的img结构

修复步骤 #

1. 将Cropper初始化逻辑抽为公共函数，方便重置后重新调用
2. 重置时按顺序执行：销毁旧实例→清空文件选择框→恢复初始DOM→重新初始化Cropper→更新全局变量指向

完整可运行代码 #

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.min.css'>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.0/cropper.js'></script>

<input type="file" form="feed-post" accept="image/x-png,image/gif,image/jpeg" id="image" onchange="previewFile()" name="image" class="file_image"/>
<div class="img-container" id="some">
  <img id="image_cropped_preview" />
</div>
<a class="salvar post-btn" id="image_crop_btn" >Crop the Image</a>
<!-- 重置按钮 -->
<button class="cancel-post">重置裁剪</button>

<script>
var recorte;
// 抽离Cropper初始化逻辑
function initCropper() {
  recorte = $('.img-container > img');
  recorte.cropper({
    movable: false,
    zoomable: false,
    rotatable: false,
    scalable: false
  });
}
// 页面加载时首次初始化
initCropper();

function previewFile() {
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.onloadend = function () {
   $('img').show(); 
   recorte.cropper('replace',reader.result);
  }
  if (file) {
    reader.readAsDataURL(file);
  } else {
   recorte.cropper('replace','');
  }
}

$('.salvar').click(function(){
  temp = recorte.cropper('getCroppedCanvas').toDataURL(); 
  $("#some").html('<iframe src="' + temp  + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>')
});

// 修正后的重置逻辑
$(".cancel-post").click(function(){
  // 销毁旧的Cropper实例
  if(recorte && recorte.data('cropper')) {
    recorte.cropper('destroy');
  }
  // 清空文件选择框的值
  $('#image').val('');
  // 恢复容器初始结构
  $(".img-container").html('<img id="image_cropped_preview" />');
  // 重新初始化Cropper
  initCropper();
});
</script>

点击重置按钮后无需刷新页面，即可重新选择图片进行裁剪，所有功能和初始状态完全一致。

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